技術標籤：淘寶靜態頁面htmlcss

思路分析：

這部分我們需要實現如下樣式：

先整體分析：

• 這部分也是在頁面中居中，並不是撐滿整個頁面，所以我們到時候需要記得讓整體模組居中
• 6.1狂歡這部分我們可以看做單獨一塊的圖片，而當滑鼠懸浮上去的時候會變成小手，所以我們這裡可以採用超連結巢狀圖片的方式
• 後面五個樣式，顯而易見是五個很相似的樣式，且處於同一行，所以我們可以利用無序列表ul、li進行佈局

整體部分：

先在該部分再嵌入一個居中的div進行包裹該部分，清除浮動不要忘記，然後再給它加上背景色

<div id="headAd">
<div class="
 
clearfix layer">
</div>
</div>

#headAd {
	background-color: rgb(241, 47, 4);
}

6.1狂歡

按第一部分說的進行佈局，由於該部分是左對齊，所以我們將其新增左浮動，並給它新增一個類名以設定大小：

<a href="#" class="fl go"><img src="./img/go.png" alt=""></a>

通過檢視頁面來了解內邊距的大小，並且由於a是行內元素，我們將其轉換為塊級元素然後再設定內邊距

#headAd .go{
	display: block;
	padding: 10px 10px 10px 15px;
}

無序列表ul

我們先觀察li內部結構：

兩段文字和一個圖片，我們採用h3、p標籤和圖片標籤（記得加上浮動），這裡延伸兩個知識點:

• 塊級元素包裹行內元素，但行內元素在嚴格規範下是不允許包裹塊級元素的
• 為什麼採用h3標籤？
  H1：通常用於一個頁面最重要的地方，它的title等
  H2：分類大標題、導航一般採用H2
  H3：普通標題就可以是H3

程式碼如下：

     <ul class="fr">
            <li class=
 
"item1">
                <!-- h和p是塊級元素，而a是行內元素，行內不能巢狀塊級，因此需要放在外面，img不屬於行內元素也不屬於塊級元素，有一個單獨的名稱叫做行內替換元素-->           
                <a href="#" class="fr"> 
                    <img src="img/adimg_01.jpg" alt="">
                </a>
                <h3><a href="#">電視會場</a></h3>
				<p><a href="#">最高降2000</a></p>
            </li>
            <li class="item2">
                <a href="#" class="fr">
                    <img src="img/adimg_02.jpg" alt="">
                </a>
                <h3><a href="#">電視會場</a></h3>
                <p><a href="#">最高降2000</a></p>
            </li>
            <li class="item3">
                <a href="#" class="fr"> 
                    <img src="img/adimg_03.jpg" alt="">
                </a>
                <h3><a href="#">電視會場</a></h3>
                <p><a href="#">最高降2000</a></p>
            </li>
            <li class="item4">
                <a href="#" class="fr">
                    <img src="img/adimg_04.jpg" alt="">
                </a>
                <h3><a href="#">電視會場</a></h3>
                <p><a href="#">最高降2000</a></p>
            </li>
            <li class="item5">
                <a href="#" class="fr">
                    <img src="img/adimg_05.jpg" alt=""> 
                </a>
                <h3><a href="#">電視會場</a></h3>
                <p><a href="#">最高降2000</a></p>
            </li>
        </ul>

設定樣式

6.1狂歡logo設定大小
將無序列表往下挪13個畫素
給每個li設定字型大小，寬高
設定背景圖片

程式碼：

/* 頭部廣告 */
#headAd {
	background-color: rgb(241, 47, 4);
}

#headAd .go{
	display: block;
	padding: 10px 10px 10px 15px;
}

#headAd .go img{
	width: 80px;height: 80px;
}

#headAd ul{
	padding-top: 13px;
}

#headAd li{
	float: left;
	width: 209px;
	height: 75px;
	margin-right: 10px;
	padding: 12px 15px 0 15px;
	/* 
	普通盒模型中寬高需要進行計算，因為包含邊框和內邊距
	而border-box可以設定成另一種盒子模型，此時其寬高就是正常寬高 
	*/
	box-sizing: border-box;
}

#headAd li a img{
	width: 52px;
	height: 52px;
	border-radius: 5px;
}

#headAd li h3{
	font-size: 20px;
	line-height: 28px;
	
	
}
#headAd li a{
	color: #fff;
	display: block;
}

#headAd li.item1{
	background: url(../img/adbg_01.png) no-repeat;
}
#headAd li.item2{
	background: url(../img/adbg_02.png) no-repeat;
}
#headAd li.item3{
	background: url(../img/adbg_03.png) no-repeat;
}
#headAd li.item4{
	background: url(../img/adbg_04.png) no-repeat;
}
#headAd li.item5{
	background: url(../img/adbg_05.png) no-repeat;
	margin-right: 0;
}

圖片自取：