在內容中
一行內容包括三張圖片，每張圖片下面有標題和具體介紹，那么可以使用：
分析和解決如下步驟：
1，一行三塊，先向左浮動成為一行float:left。
2，把他們的寬度平分三份，33.3%。三份都一樣，所以共同屬性寫在comment中。
3，再調整他們的內邊框，外邊框等等。調整好外面一層，再寫里面一層。從外面到里面敲代碼。
4，因為下面三塊的內容的樣式基本都差不多，所以在寫框架時，可以把它們重復的全部整理寫到一起。
5，存在換行時，基本都使用塊級元素div h1等等，如果不存在換行的話才使用span標簽。
6，整理代碼，把相同樣式寫到一起。
<style type="text.css">
*{ margin:0; padding:0; font-size:16px; } /*注釋一定要記住*/
.container{ width:100%; ...}/*注釋一定要記住*/
.main{ width:1200px; .....} 千萬記住一定要把邊框的width先進行定義，一步一步向里面寫，而且樣式也的排列也一定是從外面到里面進行排列，不能混亂
.common{ ....}/*注釋一定要記住*/
.one{ ... }/*注釋一定要記住*/
另外：寫css樣式時，記住一定要標清楚是那一級下面的什么類的哪個標簽。層級一定要明顯，如：
.container .main .common .one{......} 一定記住這么寫，不易出錯，易於維護。
</style>
<div class="main">
<h1>這是標題</h1> 這里的標題其實最好都使用<div class="title"></div>，因為瀏覽器樣式都重置了，使用DIV比較好處理
其實這里是圖文混排，優先考慮 <dl></dl>自定義列表作為結構
<div class="common one"> /*common:共同的 這個class是寫三個塊的共同樣式，one：描述，這是寫每個塊自己獨特的樣式*/
<img src=""/>
<h1> </h1>
<div> </div>
</div>
其實這里是圖文混排，優先考慮 <dl></dl>自定義列表作為結構
<div class="conmment two> /*common:共同的 這個class是寫三個塊的共同樣式，two：描述，這是寫每個塊自己獨特的樣式*/
<img src=""/>
<h1> </h1>
<div> </div>
</div>
<div class="conmment two> /*common:共同的 這個class是寫三個塊的共同樣式，third：描述，這是寫每個塊自己獨特的樣式*/
<img src=""/>
<h1> </h1>
<div> </div>
</div>
</div>
=================