Home > Article > Web Front-end > General practices for navigation menus
General practices for navigation menus
- WBOYOriginal
- 2016-08-20 08:47:511265browse
<!DOCTYPE html>
<html>
<head>
<title>导航栏的做法之一</title>
<style>
<span style="color: #008000;">/*</span><span style="color: #008000;">这是导航条***************************************************************************</span><span style="color: #008000;">*/</span>
<span style="color: #008000;">/*</span><span style="color: #008000;">容器是用来装那个存放了a标签的div</span><span style="color: #008000;">*/</span><span style="color: #000000;">
.rongqi{
background:#2C323B;
height:55px;
width:</span><span style="color: #800080;">100</span>%<span style="color: #000000;">;
margin:80px 0px;
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">导航条里面各个a标签的总宽度，当前是六个a的宽度，每个a宽度默认是200px</span><span style="color: #008000;">*/</span><span style="color: #000000;">
#top{
</span><span style="color: #008000;">//</span><span style="color: #008000;">border:solid #fff 1px;</span>
<span style="color: #000000;"> margin:0px auto;
width:1200px;
height:55px;
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">hanghang是a标签的class</span><span style="color: #008000;">*/</span><span style="color: #000000;">
.hanghang{
font</span>-<span style="color: #000000;">size:20px;
color:#DDDDDD;
text</span>-<span style="color: #000000;">align:center;
line</span>-<span style="color: #000000;">height:50px;
</span><span style="color: #0000ff;">float</span><span style="color: #000000;">:left;
width:200px;
height:55px;
margin</span>-<span style="color: #000000;">left:0px;
list</span>-style-<span style="color: #000000;">type:none;
background:#2C323B;
text</span>-<span style="color: #000000;">decoration:none;
}
.hanghang:hover{
list</span>-style-<span style="color: #000000;">type:none;
color:#ffffff;
font</span>-weight:<span style="color: #800080;">800</span><span style="color: #000000;">;
background:#0C8ED9;
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;">****************************************************************************这是导航条/
</style>
</head>
<body>
<!--这是导航条***************************************************************************-->
<div class="rongqi">
<div id="top">
<a class="hanghang" href="#">首页</a>
<a class="hanghang" href="#">导航1</a>
<a class="hanghang" href="#">导航2</a>
<a class="hanghang" href="#">导航3</a>
<a class="hanghang" href="#">导航4</a>
<a class="hanghang" href="#">导航5</a>
</div>
</div>
<!--***************************************************************************这是导航条-->
</body>
</html></span>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn