13-超链接导航栏案例

最新推荐文章于 2023-04-11 21:44:33 发布

weixin_30292745

最新推荐文章于 2023-04-11 21:44:33 发布

阅读量193

点赞数 1

原文链接：http://www.cnblogs.com/dxnui119/p/10252596.html

版权

超链接导航栏案例

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>

转载于:https://www.cnblogs.com/dxnui119/p/10252596.html

weixin_30292745

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
13-超链接导航栏案例

超链接导航栏案例html结构<body> <div class="nav"> <ul> <li><a href="">导航</a></li> <li><a href="">导航</a></li> ...
复制链接

扫一扫