超链接导航栏案例

Posted 2021-02-02 llbfwh

html结构

<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>
            <li>
                <a href="">网站导航</a>
            </li>
        </ul>
    </div>

 

通过上方的代码,在利用页面布局的知识来进行排布,

注意点:

1.首先我们要做导航栏.并排显示元素,第一想浮动,想到使用浮动之后,但是一定要消除浮动元素

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;
        }