탐색 메뉴의 일반 사례
- WBOY원래의
- 2016-08-20 08:47:511298검색
<!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>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.