如何创建导航条（栏）

最新推荐文章于 2021-09-10 20:36:03 发布

渔闻520

最新推荐文章于 2021-09-10 20:36:03 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/weixin_41060905/article/details/81197002

css 专栏收录该内容

13 篇文章

订阅专栏

创建基础

导航栏其实是一个以链接链表为基础而完成的。

首先：创建一个列表

<ul>
<li><a href="">home</a></li>
<li><a href="">news</a></li>
<li><a href="">contest</a></li>
<li><a href="">about</a></li>
</ul>

而后，去掉列表中的外边距和小圆点，这里用list-style-type:none来去掉小圆点。而把

外边距和内边距设置为0，可以去掉浏览器的默认设置。

下面这是用垂直或者水平导航栏中的标准代码：

ul
{
list-style-type:none;
margin:0;
padding:0;
}

创建垂直导航栏

如要创建垂直的导航栏，我们只要定义<a>的样式。

a
{
display:block;
width:60px;
}

$:display:block 把链接显示为块元素可以使整个链接的区域可以点击，而不仅仅是链接的本身

这样更加美观，且也便于我们规定宽度。

还有，请始终规定垂直导航栏中<a>元素的宽度。

若要完成下面这个效果的垂直导航栏（其实还有背景色，这里不好显示）

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:white;
background-color:gray;
width:120px;
text-align:center;
padding:20px;
text-decoration:none;
text-transform:uppercase;
}
a:hove,a:active
{
background-color:red;
}
</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>

text-decoration:none 可以去掉链接自带的下划线。

text-transform:uppercase 可以将所有字母都变成大写（text-transform:capacity可以将首字母变成大写）

设置外边距padding 可以设置大小。