<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表样式</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div id="nav">
<h1 class="title">全部商品分类</h1>
<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> <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: rgb(206, 205, 208);
}
.title{
font-size: 20px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
/* background：颜色，图片，图片位置，平铺方式 */
background: red url('../resource/image/favicon.ico') 270px 10px no-repeat;
}
ul{
background: rgb(206, 205, 208);
}
ul li{
height: 30px;
/* 去掉圆点list-style:none
变成空心圆list-style:circle
有序列表list-style:decimal
变成正方形list-style:square
*/
list-style: none;
text-indent: 1em;
background-image: url('../resource/image/favicon.ico');
background-repeat: no-repeat;
background-position: 230px 2px;
}
a{
text-decoration: none;
font-size: 14px;
color: #000;;
}
a:hover{
color: rgb(251, 198, 9);
text-decoration: underline;
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
