HTML5标记为规范

名单，我挣扎了一下，了解什么是下列信息进行适当的标记HTML5标记为规范

这将是一个规格列表葡萄酒：

土壤：该固体是石灰石和粘土的混合物...
上诉：st。美浓
下藤方面：7.3公顷
葡萄品种：
- 梅洛：50％
- 品丽珠：50％
老化：在新橡木桶中陈年24个月
顶级葡萄酒：
- 1929年
- ...
- 2009年
地窖值图表重建基础：<img src="..."/>

所以，首先我想到：这个如果每个项目在规格section内都是section，但看起来它不是一个部分，因为它基本上由key:value对组成。

所以我改变了一个定义列表<dl>这将有一些定义条款和少数项目与多个定义。它在标记中看起来不错，但如果你需要一个块/流程元素来查找其中一个定义并且将它们并排浮动，那么就没有办法正确设置样式。

是这样的：

how the items should be displayed

然后，它发生，我认为我可以用一个无序列表太多，但我不知道这是否会是一个很好的标记，因为它实际上将有为每个列表项目创建一个标题，并将它们的值插入到一个子序列段落中（对我而言似乎太多了）

因此，也许是一个表格？...以及在这些可用选项之后，我有点困惑，让我感觉更舒适，但仍然是亚section的替代方案，但我不确定这是否是一个好的标记，因为我对部分的印象是它们在某些情况下会包含更多的内容而不仅仅是一行。

如果有人能在这里就如何使在干净的标记工作，但同时考虑到无障碍给予帮助，这将是巨大的:)

提前

来源

2011-03-10 zanona

好吧，现在我明白你的问题了。我不知道这是否就足够了您的需求，但我已经能够做到这一点的结果（与FF /铬/ IE8作品）：

与我的做法的问题是：

您需要手动设置DL的高度
水平规则是不灵活，连接到DTS（你可以解决这个正确使用margin和padding的，但是，
如果你想不同每个r的高度ows，您需要将css类分配给每行中至少一个dt标签（请参阅帖子底部）。

正如您所看到的，我的标记非常简单。然而，CSS并不那么重要。此外，这种做法是简约风格，不是很灵活（注意，我不使用任何保证金/填充，使它看起来更好）：如果你不想使用三重

dl.winelist { 
background-color: #fdd; 
width: 600px; 
height: 452px; /* 3 * 150px boxes + 2 * 1px border */ 
border: 1px solid #000; 
} 

dl.winelist dt { 
width: 200px; /* definition for normal boxes */ 
height: 150px; 
float: left; 
font-weight: bold; 
background-color: #070; 
margin: 0; 
border-top: 1px solid #000; 
} 

dl.winelist dt:first-child { 
border-top: 0 /* only show those lines <i>between</i> the boxes */ 
} 

dl.winelist dd { 
font-style: italic; 
background-color: #770; 
margin: 30px 0 0; /* dd gets positioned 30px below the origin of dt */ 
width: 200px; 
float: left; 
margin-left: -200px; /* could combine that with margin statement above */ 
} 

dl.winelist dt.triple { 
width: 600px; 
} 

dl.winelist dt.triple + dd { 
width: 600px; 
margin-left: -600px; 
} 

dl.winelist ul { 
list-style: none; /* you can freely style the ul, it won't actually break anything */ 
margin: 0; 
padding: 0; 
}

类为土的东西，你甚至可以使用:first-child代替.triple

如果你可以将类分配给每个<dt>元素（例如称谓，地区，可以有不同的高度值，每一行（删除然而，从dl.winelist dt的高度：

dt.appelation, dt.aging { 
clear: left; 
} 

dt.soil { 
height: 150px; 
} 

dt.appelation { 
height: 120px; 
} 

dt.aging { 
height: 240px; 
}

完全不同的方法是在DL上使用position: relative，和成员absolute定位LY，这取决于它们各自的类中。

来源

2011-03-10 17:27:49 dialer

哇，谢谢@dialer，我以前没有这样想过，它是一个非常好的实现，感谢你在这里的努力。只是一个提示，因为看起来你是新来的SO：你可以编辑你的答案，并添加更多的细节，而不是创建另一个答案，这有助于当你需要检查答案是正确的:) – zanona 2011-03-10 18:16:32

最locical谢谢东西将会是一个定义列表，在<dd>标签中为“葡萄品种”和“顶级年份”添加更小的列表。但是，您表示您在造型方面存在问题。如果你可以提供更多关于你想如何设计它的信息，以及为什么你不能使用CSS这样做，人们可能会帮助你。

来源

2011-03-10 15:28:29 dialer

感谢@dialer，是的，它似乎是合乎逻辑的我，我刚刚更新了图像，这样更容易理解的帖子，感谢小费:) – zanona 2011-03-10 15:42:11

这是@经销商解决方案的幻灯片修改。

您无需设置dl高度。
每个dd可以是不同的，不是固定的高度。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Информация за вино</title> 

    <style type="text/css"> 
    .wine-description 
    { 
     font-family: sans-serif; 
     font-size: 12px; 
     background-color: #efece7; 

     width: 600px; 
     padding: 5px 20px 10px; 
    } 

    .wine-description:after 
    { 
     clear: both; 
     height: 0; 
     display: block; 
     visibility: hidden; 
     content: "."; 
    } 

    .wine-description dt 
    { 
     color: #908f8c; 

     font-size: 120%; 
     font-weight: bold; 
     text-transform: uppercase; 

     float:left; 
     width: 200px; 

     padding: 5px 0; 
     border-top: 1px solid #fff; 
    } 

    .wine-description dt.wine-soil 
    { 
     border-top-width: 0px; 
     width: 100%; 
    } 

    .wine-description dd 
    { 
     color: #98676d; 

     float: left; 
     width: 195px; /* +5px padding-right = 200px; */ 

     margin: 30px 0 0 -200px; 
     padding: 0 5px 25px 0; 
    } 

    .wine-description dt.wine-soil + dd 
    { 
     margin: 0 0 10px; 
     width: 100%; 
    } 

    .clear 
    { 
     clear: left; 
    } 
    </style> 
</head> 

<body> 
    <dl class="wine-description"> 
     <dt class="wine-soil">Soil</dt> 
     <dd>The soil is a mixture of limestone and clay, becoming sandier on the lower reaches where the grapes exhibit slidhtly lower accidity.</dd> 

     <dd class="clear">&nbsp;</dd> 

     <dt>Apellation</dt> 
     <dd>St. Emillion</dd> 

     <dt>Area under vine</dt> 
     <dd>7.3 Hectares</dd> 

     <dt>Anual production</dt> 
     <dd>2200 Cases per annum</dd> 

     <dd class="clear">&nbsp;</dd> 

     <dt>Grape vrieties</dt> 
     <dd>Merlot (50%)<br />Cabernet Franc (50%)</dd> 

     <dt>Ageing</dt> 
     <dd>Aged in new oak barrels for 24-27 months</dd> 

     <dt>Top vintages</dt> 
     <dd>1929, 1979, 1982, 1995, 1996, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006</dd> 
    </dl> 
</body> 
</html>

来源

2011-03-11 15:57:13

HTML5标记为规范

回答

相关问题