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

超鏈接導航欄案例