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

【css】导航栏小结(一)-----简单导航

2017-12-22 14:01 363 查看

导航栏=链接列表

导航条基本上是一个链接列表，所以使用
<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%;
}

原文地址：http://www.runoob.com/css/css-navbar.html

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

标签：

相关文章推荐

新的分享

章节导航