下面做個毒霸首頁中圖片切換的效果，如下：
實現代碼如下：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .zong { width: 600px; height: 70px; background-color: gray; } .nav { width: 50px; height: 70px; background-color: darkblue; float: left; } .nav ul { margin-top: 0px; padding: 0px; } .nav ul li { margin-top: 1px; list-style-type: none; width: 49px; height: 16.2px; font-size: small; background-color: crimson; text-align: center; line-height: 17px; float:left; } .content { margin-left: 51px; height: 70px; background-color: chartreuse; } .content ul { padding: 0px; margin: 0px; margin-left: 1px; } .content ul li { list-style-type: none; width: 108px; height: 70px; float: left; text-align: center; margin-left: 1px; } </style></head><body><div class="zong"> <div class="nav"> <ul> <li>熱門</li> <li>電視劇</li> <li>電影</li> <li>娛樂</li> </ul> </div> <div class="content"> <ul> <li><img src="pic/01.png"/></li> <li><img src="pic/02.png"/></li> <li><img src="pic/03.png"/></li> <li><img src="pic/04.png"/></li> <li><img src="pic/05.png"/></li> </ul> </div></div></body></html>
以上代碼運行後的效果如下：
總結：
1 總的在一個div下
2 左側導航是一個div,導航右側圖片地區整體是一個div
3 導航左浮動，圖片地區設定margin-left
4 導航內部是一個無序列表
5 圖片地區也是一個無序列表，每一個清單項目被設定成左浮動
6 注意調整盒子的margin，特別注意是ul元素的margin和padding清零
兩種辦法可以輕鬆實現兩欄的效果
1 一個左浮動，一個設定margin-left
2 兩個都設定左浮動
FR：海濤高軟（QQ技術交流群：386476712）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
