18-超鏈接導航欄案例

直接上代碼了

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>

寫好上面的結構代碼之后，也就是將我們頁面展示的內容顯示了，但是我們此時要利用我們學過的知識點來布局頁面

首先我們要做導航欄，並排顯示元素，第一想 浮動，想到使用浮動之后，一定記得清除浮動元素。

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