13-超链接导航栏案例

超链接导航栏案例

html结构
<body>
    <div class="nav">
    <ul>
        <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>
</body>

写好上面的结构代码之后，也就是将我们页面展示的内容显示了，但是我们此时要利用我们学过的知识点来布局页面

首先我们要做导航栏，并排显示元素，第一想到浮动，想到使用浮动之后，一定记得清除浮动元素。

css代码如下：
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    .nav{
        margin: 100px auto 50px; 距离上边距100px，左右居中，下边距50px
        width: 800px; /*每个li宽度是160px，共有5个li*/
        overflow: hidden;
        background-color: purple;
    }

    ul li{
        float: left;   /*左浮动*/
        width: 160px;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    ul li a{
        display: block;  /*将a元素转换成块元素，*/
        text-decoration: none;  /*去掉下划线*/
        color: white; 
        font-size: 20px;
        width: 160px;
        height: 40px;
        background-color: green;
        font-family: '微软雅黑';
    /*a标签除外，不继承父元素的color*/

    }
    ul li a:hover{
        background-color: red; /*被选中时显示红色*/
    }
</style>

posted on 2019-01-10 21:54 longfei2021 阅读(164) 评论(0) 编辑收藏举报