18-超链接导航栏案例

冷不防 2021-12-22 09:21 153阅读 0赞

直接上代码了

html结构

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

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

css代码如下：

*{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
            .nav{
                width: 960px;
                /*height: 40px;*/
                overflow: hidden;
                margin: 100px auto ;
                background-color: purple;
                /*设置圆角*/
                border-radius: 5px;
            }
            .nav ul li{
                float: left;
                width: 160px;
                height: 40px;
                line-height: 40px;
                text-align: center;
            }
            .nav ul li a{
                display: block;
                width: 160px;
                height: 40px;
                color: white;
                font-size: 20px;
                text-decoration: none;
                font-family: 'Hanzipen SC';
            }
            /*a标签除外，不继承父元素的color*/
    
    
            .nav ul li a:hover{
                background-color: red;
                font-size: 22px;
            }

转载于:https://www.cnblogs.com/bai-max/p/9133815.html