11.列表
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>列表样式</title>
</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> <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></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>
css:
#nav{
width: 300px;
background: #ab847a;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 2em;
line-height: 35px;
/*background:颜色 图片 图片位置 平铺方式*/
background: red url("../images/x.png") 261px 12px no-repeat;
}
ul{
background: #ab847a;
}
/*ul li
list-style:
none:去掉原点
circle:空心圆
decimal:数字
square:正方形
*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("../images/x.png");
background-position: 200px 2px;
background-repeat: no-repeat;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color:orange;
text-decoration: none ;
}
运行结果：
460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
