下面菜单用一个DIV里面嵌套五个DIV。
每个DIV的宽高设置好。
第一个DIV的渐变效果代码略复杂，可以找个图做背景，商品分类和全部分类超链接设置属性disaplay为block，一个左浮动一个右浮动，行高属性（line-height）设置成与DIV的高度一直，这样垂直才会居中，下面的应该大同小异。
用DISAPLAY设置为BLOCK之后会变成块级元素，下面的超链接全都要设置成左浮动，像【家用电器】那样的，你可以直接打空格控制缩进距离，也可以调整左边距。。。
嗯。。。不懂可以继续问。。。本人大一，HTML学的还凑合
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0padding: 0box-sizing:border-box}
a{color:#666text-decoration: none}
.menu{width:220px}
.menu h2{width:100%height: 36pxline-height: 36pxfont-size:18pxpadding-left: 10pxbackground: #0F7CBF}
.menu h2 a{color:#fff}
.menu .item h3{height: 30pxline-height:30pxpadding-left:15pxbackground: #E4F1FA}
.menu .item h3 a{color:#0F7CBFfont-size: 14px}
.menu .item p{padding: 15pxline-height: 18px}
.menu .item p a{font-size: 12px}
</style>
</head>
<body>
<div class="menu">
<h2><a href="#">家用电器</a></h2>
<div class="item">
<h3><a href="#">大家电</a></h3>
<p>
<a href="#">平板电视</a> <a href="#">洗衣机</a> <a href="#">冰箱</a>
<a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#">热水器</a>
<a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a>
</p>
</div>
<div class="item">
<h3><a href="#">大家电</a></h3>
<p>
<a href="#">平板电视</a> <a href="#">洗衣机</a> <a href="#">冰箱</a>
<a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#">热水器</a>
<a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a>
</p>
</div>
<div class="item">
<h3><a href="#">大家电</a></h3>
<p>
<a href="#">平板电视</a> <a href="#">洗衣机</a> <a href="#">冰箱</a>
<a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#">热水器</a>
<a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a>
</p>
</div>
<div class="item">
<h3><a href="#">大家电</a></h3>
<p>
<a href="#">平板电视</a> <a href="#">洗衣机</a> <a href="#">冰箱</a>
<a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#">热水器</a>
<a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a>
</p>
</div>
</div>
</body>
</html>
兼容IE8+
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）