(1)class="fixed"

我在每個(gè)樣式表中都使用這個(gè)類名。我將這個(gè)類指定在包含浮動(dòng)子元素的容器上。我要用它來清除該容器內(nèi)的浮動(dòng)，使用這些代碼：

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

我一般遇到這種情況下就會(huì)用這個(gè)屬性，這里這些圖片是浮動(dòng)的，它們彼此緊挨著，我就這樣使用：

<ul>
  <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” (或是”alternate”)的縮寫。
我在當(dāng)我有一組以某種方式布局的元素，但是其中的一些有些小變動(dòng)的地方使用這個(gè)類名。比如，圖片左浮動(dòng)或右浮動(dòng)。
 
#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”
這個(gè)類名我常常用在導(dǎo)航菜單上，當(dāng)某個(gè)菜單被選中時(shí)：
<li class="selected"><a href="/about">About Us</a></li>
同時(shí)我在用JS實(shí)現(xiàn)的標(biāo)簽效果時(shí)使用它來現(xiàn)在選中的標(biāo)簽：
<dl>
<dt class="selected">Tag Cloud</dt>
 
	...
	...
	...
</dl>
 
（4）class=”first”, class=”last”
在:first-child和:last-child偽類被所有瀏覽器完全支持之前，我將堅(jiān)持使用這兩個(gè)樣式。
我用這些類來選擇某個(gè)元素的第一個(gè)和最后一個(gè)子元素。我發(fā)現(xiàn)這是減少不必要標(biāo)簽的非常棒的方法。
 
（5）class=”image”
我通常在選擇圖片時(shí)使用標(biāo)簽選擇器（例如 #content img），而根據(jù)實(shí)際需要將這個(gè)類名用于圖片的容器
（p class=”image”）。比方說，你有個(gè)新聞列表，你需要圖片，而且圖片下面有靠左浮動(dòng)的摘要，然后是余下的新聞內(nèi)容。
我這樣做:
<p class="image">
	<img src="/images/img_me.jpg" alt="my funny face" />
	This is me trying to look cool!</p>
<p>
	The rest of the content here
	...</p>
 
（6）class=”inner”
我常常使用這個(gè)樣式，必須要說的是，它最常用于表面的用途。
我將這個(gè)類名指定到某個(gè)額外嵌套的div，因?yàn)槲倚枰獢U(kuò)展的樣式（比如，雙背景）。
 
（7）class=”link”
就像這個(gè)類名一樣，我用這個(gè)類名來控制鏈接樣式。:)但是我常常將這個(gè)類名用在容器上，通常是一個(gè)p標(biāo)簽，
而不是直接用在A標(biāo)簽上面。它最常見的用途就是那些”read more”按鈕。
<p class="link"><a href="#">Read more...</a></link>
那樣我就可以用.link控制P內(nèi)部的鏈接樣式，而且也可以同時(shí)用該樣式控制這個(gè)段落的樣式。
 
（8）class=”one”, class=”two”, class=”three”…
當(dāng)我需要單獨(dú)的指出每個(gè)元素的時(shí)候，我使用這幾個(gè)樣式。最常見的案例就是在導(dǎo)航菜單中使用圖片替換技術(shù)的時(shí)候。
<ul>
	<li class="one"><a href="#">Home</a></li>
	<li class="two"><a href="#">About</a></li>
...</ul>
 
(9)class=”even”, class=”odd”
這兩個(gè)類名用來交替顯示表格和列表中的相鄰的兩行。
<ul>
	<li class="even">Content</li>
	<li class="odd">Content</li>
	<li class="even">Content</li>
	<li class="odd">Content</li>
</ul>
或是：
<table border="0">
	<tbody>
		<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>
	</tbody>
</table>
 
（10）class=”section”
這個(gè)類名之前一般被稱為”box”。:) 在我需要一些特殊樣式時(shí)，我用它來顯示特定章節(jié)的內(nèi)容。
<div class="section">	content here...</div>