幫忙找出佈置此頁面部分的最佳方法？

我的想法是根據代碼結構設計的最佳方式繪製一個空白頁，可以使用<dl>或<ul>標籤來實現，還是必須有div等等？幫忙找出佈置此頁面部分的最佳方法？

所有建議表示讚賞。

http://www.flickr.com/photos/[email protected]/5719672246/in/photostream/

來源

2011-05-14 styler

我剛剛閱讀你的編輯，我建議（特別是如果你沒有經驗）去''唯一的解決方案。你可以用很多方式設計它們的樣式，檢查'float'屬性和'clear'屬性。 – jackJoe 2011-05-14 19:06:36

@jackjoe我的博文真的是要找出如何擺脫過度使用divs這就是爲什麼我也建議使用dl或ul標籤做這種佈局的可能性。只是試圖找出最適合用最少量的混亂的東西 – styler 2011-05-14 19:10:22

我不認爲你可以「過度使用」div。如果它在標準範圍內，並且如果你可以正確設計，我不介意。對於這樣一個簡單的佈局，它肯定不會是過度使用的情況，至少IMO。 – jackJoe 2011-05-14 19:12:56

我可以做這樣的：http://jsfiddle.net/Drnsk/

<ul class="userDetails"> 
    <li> 
     <h4>My Vitals</h4> 
     <div class="social">social</div> 
    </li> 
    <li> 
     <h4>Where I'm From <span>USA</span></h4> 
     <div class="map">map</div> 
    </li> 
    <li> 
     <h4>My Name <span>John</span></h4> 
    </li> 
    <li> 
     <h4>My Age <span>29</span></h4> 
    </li> 
</ul> 

.userDetails { 
    width: 440px; 
    background: #fff; 
    list-style: none; 
    margin: 0; 
    padding: 9px 9px 0 9px 
} 
.userDetails li { 
    overflow: hidden; 
    border-top: 1px solid #000; 
    padding: 9px 0; 
} 
.userDetails li:first-child { 
    padding-top: 0; 
    border-top: 0 
} 
.userDetails h4 { 
    font-weight: bold; 
    font-size: 20px; 
    margin: 0; 
    padding: 0; 
    position: relative 
} 
.userDetails h4 span { 
    font-weight: normal; 
    font-size: 20px; 
    width: 120px; 
    position: absolute; 
    top: 0; right: 0 
} 


.userDetails .social, .userDetails .map { 
    height: 40px; 
    color: #fff; 
    background: #f0f 
}

來源

2011-05-14 19:15:20 thirtydot

恕我直言，列表中的一個標題，雖然有效的HTML，似乎不正確。 – 2011-05-14 19:24:25

@八月Karlstrom：我實際上同意（我認爲）。我不確定是將它製作成'h '還是簡單地使用'span'。 – thirtydot 2011-05-14 19:29:53

我推薦960 Grid System和使用div的一切鋪陳。它是佈局設計的一個非常強大的開發工具。

來源

2011-05-14 18:47:42

一個div是一個標籤:)

有很多方法可以實現這一點。您需要創建適當的標籤（在這種情況下是div），然後使用CSS對其進行設計。

爲了讓您一開始我的建議是：

<div class="myvitals"> 
    vitals content here 
</div> 
<div class="where"> 
    where content here 
</div> 
<div class="name"> 
    name content here 
</div> 
<div class="age"> 
    age content here 
</div>

那麼CSS：

.myvitals { 
    {your properties here} 
} 

and the definition of the other classes here.

明白，這是基本的人有一定的經驗，否則，你需要學習一些關於HTML和CSS。

來源

2011-05-14 18:50:16 jackJoe

-1

如果不是因爲地圖（它佔據兩列）我肯定會使用一個表的事實部分。合理的妥協可能是使用div元素，如jackJoe發佈的解決方案。

來源

2011-05-14 19:27:59

幫忙找出佈置此頁面部分的最佳方法？

回答

相關問題