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標記爲規範

回答

相關問題