1、新建html文档。
2、书写hmtl代艨位雅剖码。<div id="aaaaa"> <ul> <li> <a href="#"><img src="1409110Z9280-L.jpg" /></a> <div class="text"> <b>菜单导航</b> <p>菜单导航栏内容涵盖量最广泛，最实用</p></div> </li> <li> <a href="#"><img src="1409110Z9280-L.jpg" /></a> <div class="text"> <b>tab标签</b> <p>菜单导航栏内容涵盖量最广泛，最实用</p></div> </li> <li> <a href="#"><img src="1409110Z9280-L.jpg" /></a> <div class="text"> <b>QQ在线客服代码</b> <p>菜单导航栏内容涵盖量最广泛，最实用</p></div> </li> <li> <a href="#"><img src="1409110Z9280-L.jpg" /></a> <div class="text"> <b>图片特效</b> <p>菜单导航栏内容涵盖量最广泛，最实用</p></div> </li> </ul></div>
3、书写css代码。<style>*{ margin:0; padding:0; list-style:none;}img{ border:0;}#aaaaa{ height:auto; width:820px;margin:100px auto; overflow:hidden;}#aaaaa ul li{ width:396px; height:165px; overflow:hidden; float:left; margin:0px 10px 10px 0px; position:relative;}#aaaaa ul li .text{ width:100%; height:0; overflow:hidden; position:absolute; left:0; bottom:0; background:url(dot.png) repeat; font-size:12px; color:#fff;}#aaaaa ul li .text p{text-align:left; color:#fff; line-height:180%; padding:5px 10px; clear:both}#aaaaa ul li .text b{ display:block; padding:5px 10px; display:block; float:left; background:#333; margin-bottom:5px;}</style>
4、书写并添加js代码。<script src="jquery.min.js"></script>
5、代码整体结构。
6、查看效果。
