导航栏=链接列表
导航条基本上是一个链接列表,所以使用 <ul> 和 <li>
元素非常有意义:
1).垂直导航栏
只需要设置<a>
元素的样式,就可以建议一个垂直导航栏。
注意请务必指定 <a>
元素在垂直导航栏的的宽度。如果省略宽度,IE6可能产生意想不到的效果。
css:
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
激活/当前导航条实例
在点击了选项后,我们可以添加 “active” 类来标准哪个选项被选中:
.active {
background-color: #4CAF50;
color: white;
}
html:
<ul>
<li><a href="#home" class="active ">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
2).水平导航栏
有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。
这两种方法都很好,但如果你想链接具有相同的大小,你必须使用浮动的方法。
2.1 使用内联
css:
ul
{
list-style-type:none;
margin:0;
padding:0 6px; /*注意:如果您只为 a 元素设置内边距(而不设置 ul 元素),那么链接会出现在 ul 元素之外。所以,我们为 ul 元素添加了 top 和 bottom 内边距*/
}
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;
}
html:
<!--li不换行则无边距缝隙,换行了就有。因为是内联元素,设置了dispaly:inline具有文字属性的缘故-->
<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.2 使用浮动 —— 正文内容注意清除浮动
css:
<style>
ul {
list-style-type: none;
/**注意: overflow:hidden 添加到 ul 元素,以防止 li 元素列表的外出。.**/
overflow: hidden;
}
li {
/**注意: 如果 !DOCTYPE 没有定义, floating 可以产生意想不到的结果.**/
float: left;
}
a {
display: block;
width: 100px;
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;
}
</style>
html:
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#news">News</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
<li style="float:right">
<a class="active" href="#about">关于</a>
</li>
</ul>
3).全屏高度的固定导航条 :一个左边是全屏高度的固定导航条,右边是可滚动的内容
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;/**设置宽度:便于fixed定位**/
background-color: #f1f1f1;
position: fixed;/**固定左侧:fixed定位**/
height: 100%; /* 全屏高度 */
overflow: auto; /* 如果导航栏选项多,允许滚动 */
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
/**注意这里的写法not(.active)即hover时候不包括active当前li**/
li a:hover:not(.active) {
background-color: #555;
color: white;
}
固定导航条
可以设置页面的导航条固定在头部或者底部:
position: fixed; 配合top|bottom|left|right 进行定位
/**固定在头部或者脚步**/
ul {
position: fixed;
top: 0; /*bottom: 0;*/
width: 100%;
}