导航菜单的一般做法

WBOY
发布: 2016-08-20 08:47:51
原创
1262 人浏览过



<title>导航栏的做法之一</title>
<style>
<span style="color: #008000;">/*<span style="color: #008000;">这是导航条***************************************************************************<span style="color: #008000;">*/
    <span style="color: #008000;">/*<span style="color: #008000;">容器是用来装那个存放了a标签的div<span style="color: #008000;">*/<span style="color: #000000;">
    .rongqi{
        background:#2C323B;
        height:55px;
        width:<span style="color: #800080;">100%<span style="color: #000000;">;
        margin:80px 0px;
    }
    <span style="color: #008000;">/*<span style="color: #008000;">导航条里面各个a标签的总宽度,当前是六个a的宽度,每个a宽度默认是200px<span style="color: #008000;">*/<span style="color: #000000;">
    #top{
        <span style="color: #008000;">//<span style="color: #008000;">border:solid #fff 1px;
<span style="color: #000000;">        margin:0px auto;
        width:1200px;
        height:55px;
        
    }
    <span style="color: #008000;">/*<span style="color: #008000;">hanghang是a标签的class<span style="color: #008000;">*/<span style="color: #000000;">
    .hanghang{
        font-<span style="color: #000000;">size:20px;
        color:#DDDDDD;
        text-<span style="color: #000000;">align:center;
        line-<span style="color: #000000;">height:50px;
        <span style="color: #0000ff;">float<span style="color: #000000;">:left;
        width:200px;
        height:55px;
        margin-<span style="color: #000000;">left:0px;
        list-style-<span style="color: #000000;">type:none;
        background:#2C323B;
        text-<span style="color: #000000;">decoration:none;
    }
    .hanghang:hover{
        list-style-<span style="color: #000000;">type:none;
        color:#ffffff;
        font-weight:<span style="color: #800080;">800<span style="color: #000000;">;
        background:#0C8ED9;
    }
<span style="color: #008000;">/*<span style="color: #008000;">****************************************************************************这是导航条/    
</style>


<!--这是导航条***************************************************************************-->
    <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>
<!--***************************************************************************这是导航条-->

登录后复制

 

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!