                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /CSS Sprite雪碧圖應用

看效果圖做網頁

<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<style>
????ul{list-style:none;}
????li{
????????line-height:31px;
????????border-bottom:1px?solid?#ccc;
????????height:31px;
????????font-size:14px;
????}
????div{
????????width:150px;
????????background:#f8f8f8;
????????border:1px?solid?#bbb;
????}
</style>

</head>
<body>
<div>
????<ul>
????????<li>
????????????<i></i>
????????服裝內衣
????????</li>
????????<li>
????????????<i></i>
????????鞋包配飾
????????</li><li>
????????????<i></i>
????????運動戶外
????????</li><li>
????????????<i></i>
????????珠寶手表
????????</li><li>
????????????<i></i>
????????手機數碼
????????</li><li>
????????????<i></i>
????????家電辦公
????????</li><li>
????????????<i></i>
????????護膚彩妝
????????</li><li>
????????????<i></i>
????????母嬰用品
????????</li>
????</ul>
</div>



</body>
</html>

做出來效果如下：