DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS編寫經驗談:常用的10個CSS類名
CSS編寫經驗談:常用的10個CSS類名
編輯: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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved