制作2--京东菜单列表（html/css）
效果图：
制作思路：
[html]
1.创建一个外部容器（内容），可以使用nav、div、ul
nav(div)
div(div)
ul(li)
2.div里面放超链接a及文字
3.去除换行产生的空格，在父元素上用font-size:0;
[css]
4.清除所有样式，引入外部样式
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/style.css">
5.设置nav的宽、高（内容区）、背景、内边距（设置body的背景颜色，便于nav显示）
6.设置item的高，宽度显然跟nav一样
7.鼠标移到item，背景颜色变成灰色，用:hover
8.让item中的文字垂直居中(让文字在父元素中垂直居中，只需将父元素的line-height=父元素height)
9.设置item的内边距padding-left，如果改成nav的内边距，那么选中后背景颜色少一块，那块是nav的，不是item的
10.设置a标签内字体的颜色、大小、文本修饰
11.设置span标签内字体的大小、间隔(内外边距都可以）
12.鼠标移到文字，文字颜色变成红色，用:hover
代码：
left_nav.html
<body>
<nav class="left_nav">
<div class="item">
<a href="javascript:;">家用电器</a>
</div>
<div class="item">
<a href="javascript:;">手机</a>
<span>/</span>
<a href="javascript:;">运营商</a>
<span>/</span>
<a href="javascript:;">数码</a>
</div>
<div class="item">
<a href="javascript:;">电脑</a>
<span>/</span>
<a href="javascript:;">办公</a>
</div>
<div class="item">
<a href="javascript:;">家居</a>
<span>/</span>
<a href="javascript:;">家具</a>
<span>/</span>
<a href="javascript:;">家装</a>
<span>/</span>
<a href="javascript:;">厨具</a>
</div>
<div class="item">
<a href="javascript:;">男装</a>
<span>/</span>
<a href="javascript:;">女装</a>
<span>/</span>
<a href="javascript:;">童装</a>
<span>/</span>
<a href="javascript:;">内衣</a>
</div>
<div class="item">
<a href="javascript:;">美妆</a>
<span>/</span>
<a href="javascript:;">个护清洁</a>
<span>/</span>
<a href="javascript:;">宠物</a><!-- -->
</div>
<div class="item">
<a href="javascript:;">女鞋</a>
<span>/</span>
<a href="javascript:;">箱包</a>
<span>/</span>
<a href="javascript:;">钟表</a>
<span>/</span>
<a href="javascript:;">珠宝</a>
</div>
<div class="item">
<a href="javascript:;">男鞋</a>
<span>/</span>
<a href="javascript:;">运动</a>
<span>/</span>
<a href="javascript:;">户外</a>
</div>
<div class="item">
<a href="javascript:;">房产</a>
<span>/</span>
<a href="javascript:;">汽车</a>
<span>/</span>
<a href="javascript:;">汽车用品</a>
</div>
<div class="item">
<a href="javascript:;">母婴</a>
<span>/</span>
<a href="javascript:;">玩具乐器</a>
</div>
<div class="item">
<a href="javascript:;">食品</a>
<span>/</span>
<a href="javascript:;">酒类</a>
<span>/</span>
<a href="javascript:;">生鲜</a>
<span>/</span>
<a href="javascript:;">特产</a>
</div>
<div class="item">
<a href="javascript:;">艺术</a>
<span>/</span>
<a href="javascript:;">礼品鲜花</a>
<span>/</span>
<a href="javascript:;">农资绿植</a>
</div>
<div class="item">
<a href="javascript:;">医药保健</a>
<span>/</span>
<a href="javascript:;">计生情趣</a>
</div>
<div class="item">
<a href="javascript:;">图书</a>
<span>/</span>
<a href="javascript:;">文娱</a>
<span>/</span>
<a href="javascript:;">教育</a>
<span>/</span>
<a href="javascript:;">电子书</a>
</div>
<div class="item">
<a href="javascript:;">机票</a>
<span>/</span>
<a href="javascript:;">酒店</a>
<span>/</span>
<a href="javascript:;">旅游</a>
<span>/</span>
<a href="javascript:;">生活</a>
</div>
<div class="item">
<a href="javascript:;">理财</a>
<span>/</span>
<a href="javascript:;">众筹</a>
<span>/</span>
<a href="javascript:;">白条</a>
<span>/</span>
<a href="javascript:;">保险</a>
</div>
<div class="item">
<a href="javascript:;">安装</a>
<span>/</span>
<a href="javascript:;">维修</a>
<span>/</span>
<a href="javascript:;">清洗</a>
<span>/</span>
<a href="javascript:;">二手</a>
</div>
<div class="item">
<a href="javascript:;">工业品</a>
</div>
</nav>
</body>
style.css
body {
background-color: burlywood;
}
.left_nav {
width: 190px;
height: 450px;
padding: 10px 0;
background-color: #FEFEFE;
}
.left_nav .item {
height: 25px;
line-height: 25px;
padding-left: 18px;
font-size: 0;
}
.left_nav .item:hover {
background-color: #d9d9d9;
;
}
.item a {
color: #333333;
text-decoration: none;
font-size: 14px;
}
.item span {
font-size: 12px;
/* margin: 0 2px; */
padding: 0 2px;
}
.item a:hover {
color: #c81623;
}
浙公网安备 33010602011771号