代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商城左侧菜单条</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
padding-top: 10px;
padding-bottom: 5px;
color: gray;
}
ul li {
list-style: none;
padding-left: 40px;
}
hr {
border: 1px dashed gray;
}
.all {
background-color: white;
width: 320px;
height: 980px;
}
.top {
background-color: black;
height: 60px;
color: white;
line-height: 60px;
padding-left: 20px;
font-size: large;
}
.menu_top {
width: 300px;
height: 25px;
line-height: 30px;
/*background-color: rebeccapurple;*/
font-size: large;
font-weight: bold;
}
.menu_img {
width: 30px;
height: 30px;
float: left;
}
.menu_title {
padding-left: 10px;
}
.menu {
padding-top: 15px;
/*height: 100px;*/
width: 320px;
padding-left: 20px;
}
</style>
</head>
<body bgcolor="gray">
<div class="all">
<div class="top">
全部分类
</div>
<div class="menu">
<div class="menu_top">
<span class="menu_img">
<img src="img/1.gif">
</span>
<span class="menu_title">护肤</span>
</div>
<ul>
<li>洁面 化妆水 喷雾 美容液 眼霜</li>
<li>眼部精华 眼膜 面膜 面膜贴</li>
<li>水洗面膜 免洗面膜 精华 精油</li>
<li>啫哩 凝露 乳液 面霜 日霜 晚霜</li>
</ul>
<hr>
</div>
<div class="menu">
<div class="menu_top">
<span class="menu_img">
<img src="img/3.gif">
</span>
<span class="menu_title"> 彩妆</span>
</div>
<ul>
<li> 卸妆 防晒 隔离 BB霜 粉底 粉饼</li>
<li> 睫毛膏 眼影 唇彩 腮红 眼线笔</li>
<li> 底妆 遮瑕 蜜粉 眉笔 美甲</li>
</ul>
<hr>
</div>
<div class="menu">
<div class="menu_top">
<span class="menu_img">
<img src="img/2.gif">
</span>
<span class="menu_title">香氛</span>
</div>
<ul>
<li>男香 女香 小Q装 中性香水</li>
</ul>
<hr>
</div>
<div class="menu">
<div class="menu_top">
<span class="menu_img">
<img src="img/4.gif">
</span>
<span class="menu_title">身体护理</span>
</div>
<ul>
<li>洗发 护发 沐浴 身体乳 手足护理</li>
<li> 护手霜 纤体 身体精油 颈部护理</li>
<li> 个人护理 卫生用品 脱毛</li>
</ul>
<hr>
</div>
<div class="menu">
<div class="menu_top">
<span class="menu_img">
<img src="img/5.gif">
</span>
<span class="menu_title">礼盒套装</span>
</div>
<ul>
<li> 护肤套装 身体护理套装 彩妆套装</li>
<li> 旅行装 香水套装 男士套装</li>
</ul>
<hr>
</div>
<div class="menu">
<div class="menu_top">
<span class="menu_img">
<img src="img/6.gif">
</span>
<span class="menu_title">美容工具</span>
</div>
<ul>
<li> 护肤 彩妆 美发 美体 美甲
</li>
<li> 美容仪器 其他美容工具</li>
</ul>
<hr>
</div>
<div class="menu">
<div class="menu_top">
<span class="menu_img">
<img src="img/7.gif">
</span>
<span class="menu_title">母婴专区</span>
</div>
<ul>
<li>奶粉 尿裤湿巾 母婴洗护</li>
</ul>
<hr>
</div>
<div class="menu">
<div class="menu_top">
<span class="menu_img">
<img src="img/8.gif">
</span>
<span class="menu_title">男士专区</span>
</div>
<ul>
<li> 洁面 爽肤水 面霜 啫哩 男香</li>
<li> 眼霜 凝胶 乳液 精华 沐浴</li>
</ul>
<hr>
</div>
<div class="menu">
<div class="menu_top">
<span class="menu_img">
<img src="img/9.gif">
</span>
<span class="menu_title">食品保健</span>
</div>
<ul>
<li> 瘦身类 保健类 美容类 食品类</li>
</ul>
</div>
</div>
</body>
</html>结果：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
