首页 > 其他 > 详细

制作导航栏

时间:2019-11-10 00:51:21      阅读:86      评论:0      收藏:0      [点我收藏+]

如图:

技术分享图片

 

 

 

代码如下:

css:

<style type="text/css">
    /*所有标签的margin,padding清零*/
    *{
        padding:0px;margin:0px;
    }
    /*导航栏*/
    .nav{
        width:780px;
        height:30px;
        list-style-type:none;            /*去掉无序列表前面的圆圈*/
        background-color:#A8FFA8;    
        margin:20px auto;                /*水平居中,离顶部20px*/
    }
    /*导航栏里的li*/
    .nav>li{
        float:left;                        /*里面的li全部左浮动*/
        width:129px;                
        text-align:center;                /*让li里的文字居中*/
        line-height:30px;                /*行高变成30px填满li,就能竖直居中*/
        border-right:1px solid white;    /*把li的右边距用白色分割*/
    }
    /*a标签*/
    .nav>li>a{                        
        color:#060;
        text-decoration:none;            /*去掉下划线*/
    }
    /*鼠标经过a标签时*/
    .nav>li>a:hover{
        color:white;
        display:block;                    /*变成块元素,自动撑大(由于块状元素width:100%
                        和自己设置的line-height:30px),将充满整个li*/
background-color:pink; } </style>

html:

<div class="wrap">
    <ul class="nav">
        <li><a href="#">公司首页</a></li>
        <li><a href="#">产品介绍</a></li>
        <li><a href="#">用户反馈</a></li>
        <li><a href="#">给我留言</a></li>
        <li><a href="#">联系我们</a></li>
        <li><a href="#">公司简介</a></li>
    </ul>
</div>

如有错误或者建议请留言~

制作导航栏

原文:https://www.cnblogs.com/first-bloodlalala/p/11828473.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!