您的位置：首页 > Web前端 > CSS

CSS 构造列表

2017-10-21 21:58 211 查看

参考：CSS

列表对于网页表现来说非常重要，我们看到的网页元素很多都是通过列表展现的！

1.构造列表

将 ul 或 ol 设置为

list-style: none;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>构造列表</title>
<style type="text/css">
ul {
list-style:none;
margin:0px;
padding:0px;
}
#nav ul.list {
width:130px;
background:#F8F8F8;
border:1px solid #BBBBBB;
padding:0px 20px;
}
#nav ul<
4000
/span>.list li {
height:31px;
line-height:31px;
border-bottom:1px solid #dedede;
text-indent:35px;
font-size: 14px;
font-weight:400;
font-family:微软雅黑;
color:#3c3c3c;
}
#nav ul.list li a {
color:#3c3c3c;
text-decoration:none;
}
#nav ul.list li a:hover {
text-decoration:underline;
}
.li-0 {
background:url(images/icon_1.png) 0px center no-repeat;
}
.li-1 {
background:url(images/icon_2.png) 0px center no-repeat;
}
.li-2 {
background:url(images/icon_3.png) 0px center no-repeat;
}
.li-3 {
background:url(images/icon_4.png) 0px center no-repeat;
}
.li-4 {
background:url(images/icon_5.png) 0px center no-repeat;
}
.li-5 {
background:url(images/icon_6.png) 0px center no-repeat;
}
</style>
</head>
<body>
<div id="nav">
<ul class="list">
<li class="li-0"><a href="http://sifangku.com" target="_blank">服装内衣</a></li>
<li class="li-1"><a href="http://sifangku.com" target="_blank">鞋包配饰</a></li>
<li class="li-2"><a href="http://sifangku.com" target="_blank">运动户外</a></li>
<li class="li-3"><a href="http://sifangku.com" target="_blank">珠宝手表</a></li>
<li class="li-4"><a href="http://sifangku.com" target="_blank">手机数码</a></li>
<li class="li-5"><a href="http://sifangku.com" target="_blank">家电办公</a></li>
</ul>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>第四章 用CSS给网页装潢[8] -构造列表</title>
<style type="text/css">
ul.list {
list-style:none;
background:#F8F8F8;
width:130px;
margin:0px;
padding:0px 20px;
border:1px solid #BBBBBB;
}
ul.list li {
height:31px;
border-bottom:1px solid #dedede;
width:130px;
line-height:31px;
font-family:微软雅黑;
color:#3c3c3c;
font-size:14px;
text-indent:35px;
}
.li-1 {
background:url(images/icon_1.png) 0px center no-repeat;
}
.li-2 {
background:url(images/icon_2.png) 0px center no-repeat;
}
.li-3 {
background:url(images/icon_3.png) 0px center no-repeat;
}
.li-4 {
background:url(images/icon_4.png) 0px center no-repeat;
}
.li-5 {
background:url(images/icon_5.png) 0px center no-repeat;
}
.li-6 {
background:url(images/icon_6.png) 0px center no-repeat;
}
#div1 {
margin:10px 0 0 0;
width:25px;
height:18px;
background:url(images/icon.png) -120px -3px no-repeat;
}
</style>
</head>
<body>
<ul class="list">
<li class="li-1">服装内衣</li>
<li class="li-2">鞋包配饰</li>
<li class="li-3">运动户外</li>
<li class="li-4"
d96c
>珠宝手表</li>
<li class="li-5">手机数码</li>
<li class="li-6">家电办公</li>
</ul>

<div id="div1"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航