文章目錄
date: 2018-07-06 00:13:02
列表是很常見的，橫向菜單欄，豎向菜單欄，新聞列表之類的，還會說到盒子定位中的另一個屬性position，後面會具體補充說這個屬性，以及設置元素堆疊順序的z-index屬性。
列表
list-style-type
設置列表項標記類型，主要有以下幾種
- none 無標記符號
- disc 實心圓（默認）
- circle 空心圓
- square 實心正方形
- decimal 數字
list-style-image
使用圖像來替代上面說到的標記，設置image圖像之後，list-style-type屬性將不再起作用，實際使用的時候要避免某些瀏覽器不支持這個屬性，還是要設置list-style-type這個屬性。
li{
list-style-image:url(image/arrow-right.gif);
list-style-type:circle;
}
list-style-position
設置何處放置列表項的標記，有兩個屬性值，inside和outside。
inside表示項目標記放置在文本以內，且環繞文本根據標記對齊。
outside默認值，表示標記位於文本左側，列表項標記放置在文本以外，且環繞文本不根據標記對齊。
但是我並沒有發現有什麼區別，至少相對於普通文字列表來說。
list-style屬性也可以直接聲明所有屬性，如下
li{
list-style:circle outside url(image/arrow-right.gif);
}
z-index屬性
用於調整定位時重疊快的上下位置，類似於ps裏的圖層，值可以爲正整數也可以爲負整數。設置了position之後可以使用這個屬性調整高低關係，默認值爲0。
示例代碼如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>練習</title>
<style type="text/css">
img {
position:absolute;
left:0;
top:0;
z-index:-1;
}
</style>
</head>
<body>
<h1>z-index屬性值爲負</h1>
<img src="F:\Programming\Sublime\html\html5\HTML5+CSS3前端技術\Chapter06\理論素材\理論案例\北大青鳥界面\image\bodyBg.jpg" width="502" height="288"/>
<p>默認值爲0默認值爲0默認值爲0默認值爲0默認值爲0</p>
<p>-1擁有更低的優先級，顯示在0的後面-1擁有更低的優先級，顯示在0的後面-1擁有更低的優先級，顯示在0的後面-1擁有更低的優先級，顯示在0的後面</p>
<p>優先級正數大於負數優先級正數大於負數優先級正數大於負數優先級正數大於負數</p>
</body>
</html>
將z-index改爲1時效果如下圖所示
下拉菜單的實現
主要思想如下，設置dl的position爲相對定位，設置dd不顯示，通過position和z-index設置其位置，當鼠標滑過的時候，是hover屬性，即設置dl:hover dd屬性，使其顯示出來。
最簡單的示例如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>練習</title>
<style type="text/css">
dl{
position:relative;
float:left;
width:100px;
}
dd{
display:none;
position:absolute;
z-index:1;
left:0px;
top:0px;
}
dl:hover dd{
display:block;
}
</style>
</head>
<body>
<dl>
<dt><a href="#">標題</a></dt>
<dd>
<a href="#">第一個</a>
<a href="#">第二個</a>
</dd>
</dl>
</body>
</html>
下面是一個比較好的下拉菜單示例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>練習</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.ul1{
display: inline-block;
/*text-decoration: none;*/
width: 300px;
height: 40px;
margin: 150px;
float: left;
position: relative;
}
li{
text-align: center;
line-height: 40px;
list-style: none;
display: block;
background: #2fa0ec;
border:1px solid;
width: 100px;
height:40px ;
}
.li1{
width: 100px;
height: 40px;
position: absolute;
float: left;
}
.li2{
width: 100px;
height: 40px;
display: block;
position: absolute;
float: left;
left: 100px;
}
.li3{
width: 100px;
height: 40px;
display: block;
position: absolute;
float: right;
left: 200px;
top:0;
}
.second{
top:40px;
left: -2px;
border: 1px solid #ccc;
display: none;
position: absolute;
margin: 0;
}
li:hover{
background: #AA66EE;
}
.li1:hover .second{
/*display: inline-block;*/
display: block;
}
</style>
</head>
<body>
<ul class="ul1">
<li class="li1">hah
<ul class="second">
<li>doudou</li>
<li>doudou</li>
</ul>
</li>
<li class="li2">haerh</li>
<li class="li3">haaah</li>
</ul>
</body>
</html>
