DIV CSS 佈局教程網

網頁制作poluoluo文章簡介：很多做前端開發的在為頁面元素定class的時候經常會拿不定主意，導致隨意使用class，一個好的class要能夠描述出某個特定元素的表現，在符合團隊開發流程、規范的情況下也要注意在工作中形成一套自己的風格，下面是我最經常使用的個人認為命名比較恰當和有一定作用的10個c

很多做前端開發的在為頁面元素定class的時候經常會拿不定主意，導致隨意使用class，一個好的class要能夠描述出某個特定元素的表現，在符合團隊開發流程、規范的情況下也要注意在工作中形成一套自己的風格，下面是我最經常使用的個人認為命名比較恰當和有一定作用的10個class。

1.class=”fixed”

fixed這個class幾乎出現在沒個樣式文件中，用在為包含浮動子元素的容器元素清除浮動，樣式如下

 .fixed:after{
 content:".";
 display:block;
 height:0;
 clear:both;
 visibility:hidden;
 }
.fixed{
 display:block;
 }
/*  \*/
.fixed{
 min-height:1%;
 }
* html .fixed{
 height:1%;
 }

這個樣式就可以用在下面的情形，每個li都是浮動的：

 <ul class="fixed">
 <li><img src="images/img_01.jpg" alt="First Thumb" /></li>
 <li><img src="images/img_02.jpg" alt="Second Thumb" />
 
 ...</li>
</ul>

2.class=”alt”

alt是”alternative”（交替）的簡稱，這個class用在有一組樣式一樣的元素，需要為其中的某幾個設定特別的樣式，比如一組向左浮動的圖片中需要有一張是向右浮動,可以這樣：

 #content img{
 float:left;
 display:inline;
 margin-right:10px;
 border:1px solid #ccc;
 padding:1em 0;
 background:#fff;
 }
#content img.alt{
 float:right;
 margin-right:0;
 margin-left:10px;
 }

 3.class=”selected”

這個最經常用的，用來處理mouseover或選中元素的效果。

  <li class="selected"><a href="/about">About Us</a></li>

選項卡制作的時：

<dl>
<dt class="selected">Tag Cloud</dt>
...
...
...
</dl>

 4.class=”first”, class=”last”

 直到99.9% 的浏覽器支持:first-child和:last-child這兩個偽類之前，class=”first”, class=”last”用的地方還是很多的。

5.class=”image”

平常選擇圖片元素一般用類似(#container img)這樣的標簽選擇器，但是我這裡的class=”image”是用在包含圖片的容器元素，假如你正在做一個新聞列表，需要在新聞標題下面加一行帶圖片和說明文字，並且向右浮動，可以這樣做：

  <img src="/images/img_me.jpg" alt="my funny face" />
 This is me trying to look cool!
 
 The rest of the content here
 ...

6. class=”inner”

inner也是經常使用的class，而且大部分上是用來制造視覺上的額外效果，用來給嵌套在容器裡的子容器定義樣式（比如制作雙背景圖片效果）。

<div id="container">
 <div class="inner">
 
 </div>
</div>

7.class=”link”

link跟image類似，我用來嵌套一個A標簽，最經常用來制作”Read More”鏈接：

<p class="link"><a href="#">Read more...</a></p>

8.class=”one”, class=”two”, class=”three”…

 這些class用在需要區別每個子元素的列表項，比如用移動背景圖片來制作導航菜單：

 <ul>
 <li class="one"><a href="#">Home</a></li>
 <li class="two"><a href="#">About</a>
 ...</li>
</ul>

 9.class=”even”, class=”odd”

用來實現隔行換樣式，一般用在表格和列表：

 <ul>
 <li class="even">Content</li>
 <li class="odd">Content</li>
 <li class="even">Content</li>
 <li class="odd">Content</li>
</ul>

表格裡：

<table>
 <tr class="even">
  <td>Content</td>
  <td>Content</td>
 </tr>
 <tr class="odd">
  <td>Content</td>
  <td>Content</td>
 </tr>
 <tr class="even">
  <td>Content</td>
  <td>Content</td>
 </tr>
 <tr class="odd">
  <td>Content</td>
  <td>Content</td>
 </tr>
</table>

10.class=”section”

一般用在為指定內容中特定部分添加特定的樣式：

<div class="section">
 content here...
</div>