CSS 8.4 导航条
1.导航条都是用ul-li-a做的，关键在于CSS
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
2.链接a的可点击区域是border边框范围
a:link,a:visited{
padding:20px;
background-color: gray;
}
a:hover,a:active{
background-color: red;
}
结果：
3.垂直导航条，a样式为块。
ul块无宽高，li块无宽高，a块有宽高。浏览器根据a的宽高计算li和ul的宽高值。
a是块，必须设宽，高度未来居中可由字体+padding或width=line-height设置。
当我们将内联元素a设为块元素时，a即有内联属性line-height，又有块属性宽高。
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#cc0000;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
结果：
注1：list-style-type:none -删除圆点。导航栏不需要列表项标记。
注2：把外边距和内边距设置为0可以去除浏览器的默认设定。
注3：display:block -把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。
注4：width:60px -块元素默认占用全部可用宽度。我们需要规定60像素的宽度。
注5：请始终规定垂直导航栏中<a>元素的宽度。如果省略宽度，IE6会产生意想不到的结果。
4.水平导航条，li浮动，a样式为块
ul块无宽高，li块无宽高，a块有宽，padding。
a的水平居中用：text-align，垂直居中用：无高，有padding。
注：与3.垂直导航栏的区别只在于多了li{float:left;}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden; /*作用清除浮动，是ul撑开，具体解释参见注*/
}
li{
float:left;
}
a:link,a:visited{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active{
background-color:#cc0000;
}
结果：
注：
父元素是块，包含浮动时，父元素没有撑开。解决方法有：
①在父元素里写一个空块，属性clear：both
②父元素也浮动，但父元素之后的元素也要清除浮动
③在父元素里加overflow:hidden;超出隐藏，可以将父元素撑开，清除浮动。
5.水平导航条，li样式为内联，长度不一样。
ul块无宽高，设padding-top和padding-bottom，li内联无宽高，
a内联宽=字数+padding，高=字体，背景=宽+（高+padding）
浏览器根据内联a计算块ul和内联li，li=a，ul参见注。
但是对于背景色的行内非替换元素(这里a)，背景可以向元素上下padding延伸。
ul{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
background-color:red; /*没有这句，为了观察ul*/
}
li{
display:inline;
}
a:link,a:visited{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active{
background-color:#7A991A;
}
结果：
若ul中不设padding-top和padding-bottom，结果如下：
应该去掉ul中 background-color:red; /*没有这句，为了观察ul*/
注：块中的内联：内联支撑起的块的大小只有内联的内容区。
块中的块1：块1支撑起的块的大小有块1的margin那么大。
例如：
<div style="border:3px solid black;">
<p style="border:1px solid red;margin:10px;padding:22px;">块中块</p>
</div>
<br /><br />
<div style="border:3px solid black;">
<span style="border:1px solid red;margin:10px;padding:22px;">快中内联</span>
</div>
结果：
扫一扫
9003
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
