使用CSS进一步处理列表
2017-04-16 本文已影响17人
陈老板_
CSS方框模型如何影响列表
与列表相关的特定样式包括：list-style-image（用于放置一幅图像作为列表项标记）、list-style-position（指示把列表项标记放在什么位置）、list-style-type（列表项标记本身的类型）。通过这样样式控制列表和列表项的结构，可以使用margin、padding、color、和background-color样式利用列表实现甚至更具体的显示效果。
<!DOCTYPE html>
<html>
<head>
<title>LIST TEST</title>
<style type="text/css">
ul{
background-color:#6666ff;
border:1px solid #000000;
width:100px;
}
li{
background-color:#cccccc;
border:1px solid #ff0000;
}
</style>
</head>
<body>
<h1>List Test</h1>
<ul>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
</ul>
</body>
</html>
给无序列表本身提供了蓝色的背景，黑色的边框，和100px的特定宽度，列表项则具有灰色的背景和黄色的边框，列表项文本和指示符是黑色的。
无论列表的类型是什么，左边的默认填充值仍然保持相同。如果向样式表中添加list-style-type：none；创建一个没有列表项指示符的列表，将会看到填充仍然保持相同。
放置列表项指示符
list-style-position属性的默认值是outside，意味着项目符号、编号及其他标识符将保持在由<li></li>标签对创建的方框外面的文本左边。当文本在列表项内换行时，它将在该方框内换行，并且保持左对齐到元素的左边框。
但是，当list-style-position的值为inside时，指示符位于由<li></li>标签对创建的方框内。不仅列表项指示符随后将进一步缩进，而且文本将在每个列表项指示符底下换行。
利用CSS创建图像映射
<!DOCTYPE html>
<html>
<head>
<title>CSS Image Example</title>
<style type="text/css">
#theImg{
width: 960px;
height: 1280px;
background: url(33.jpg) no-repeat;
position: relative;
border: 1px solid #000000;
}
#theImg ul{
margin: 0px;
padding: 0px;
list-style: none;
}
#theImg a{
position: absolute;
text-indent: -1000em;
}
#theImg a:hover{
border: 4px solid #ffffff;
}
#ss a{
top: 100px;
left: 500px;
width: 800px;
height: 225px;
}
#gn a{
top: 226px;
left: 150px;
width: 700px;
height: 110px;
}
#ib a{
top: 225px;
left: 850px;
width: 600px;
height: 900px;
}
#iTEA1 a{
top: 1000px;
left: 320px;
width: 178px;
height: 125px;
}
#iTEA2 a{
top: 225px;
left: 375px;
width: 123px;
height: 1150px;
}
</style>
</head>
<body>
<div id="theImg">
<ul>
<li id="ss"><a href="[some URL]" title="I LOVE YOU">I LOVE YOU</a></li>
<li id="gn"><a href="[some URL]" title="NICE TO MEET YOU">NICE TO MEET YOU</a></li>
<li id="ib"><a href="[some URL]" title="NICE MEETING YOU">NICE MEETING YOU</a></li>
<li id="iTEA1"><a href="[some URL]" title="DO YOU LOVE ME">DO YOU LOVE ME</a></li>
<li id="iTEA2"><a href="[some URL]" title="I WANT TO MARRY YOU">I WANT TO MARRY YOU</a></li>
</ul>
</div>
</body>
</html>
text-indent:-1000em;可以保证文本永远也不会出现。
#theImg a:hover{
border: 4px solid #ffffff;
}
当用户的光标悬停在包含一个连接的列表项上时，由于样式表中的上面这个条目，该列表项将显示4px的纯白色边框。
