12、列表样式练习
3.6 列表
#nav {
width:300px;
background: #a0a0a0;
}
.title {
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height:35px;
background: red;
}
/*ul li*/
/*list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形*/
/*ul {
background: #a0a0a0;
}*/
ul li {
height: 30px;
list-style: none;
text-indent: 1em;
}
a {
text-decoration: none;
font-size: 14px;
color: #000;
}
a:hover {
color: orange;
text-decoration: underline;
}
代码show
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">服装鞋帽</a> <a href="#">个护化妆</a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li>
</ul>
</div>
</body>
</html>
style.css
#nav {
width:300px;
background: #a0a0a0;
}
.title {
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height:35px;
background: red;
}
/*ul li*/
/*list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形*/
/*ul {
background: #a0a0a0;
}*/
ul li {
height: 30px;
list-style: none;
text-indent: 1em;
}
a {
text-decoration: none;
font-size: 14px;
color: #000;
}
a:hover {
color: orange;
text-decoration: underline;
}
彩蛋
1.css对比前后
原始网页:
css修饰后: