頁面導航實現

時間 2019-11-20

標籤頁面導航實現简体版

原文原文鏈接

Web頁面的導航菜單通常用列表項實現，根據導航的位置劃分：縱向導航和橫向導航。咱們先從最簡單的縱向導航開始html

縱向導航

下面是仿照百度新聞頁面的導航菜單，HTML標記以下ui

 1 <!DOCTYPE html>
 2 <html lang="zh_ch">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 5     <title>HTML 5 Nav</title>
 6     <style>
 7     </style>
 8 </head>
 9 <body>
10 <nav class="nav-list">
11                 <ul>
12                     <li><a href="http://news.baidu.com/view.html">首頁</a></li>
13                     <li><a href="http://baijia.baidu.com/" id="nav-hot-link" target="_blank">百家</a></li>
14                     <li><a href="http://jian.news.baidu.com/" target="_blank"><div class="icon-new"></div>個性推薦</a></li>
15                     <li><a href="http://sh.news.baidu.com/">上海</a></li>
16                     <li><a href="http://internet.baidu.com/">互聯網</a></li>
17                     <li><a href="http://media.baidu.com/">傳媒</a></li>
18                     <li><a href="http://auto.baidu.com/">汽車</a></li>
19                     <li><a href="http://yule.baidu.com/">娛樂</a></li>
20                     <li><a href="http://mil.news.baidu.com/">軍事</a></li>
21                     <li><a href="http://finance.baidu.com/">財經</a></li>
22                     <li><a href="http://sports.baidu.com/">體育</a></li>
23                     <li><a href="http://guonei.news.baidu.com/">國內</a></li>
24                     <li><a href="http://shehui.news.baidu.com/">社會</a></li>
25                     <li><a href="http://tech.baidu.com/">科技</a></li>
26                     <li><a href="http://guoji.news.baidu.com/">國際</a></li>
27                     <li><a href="http://lady.baidu.com/">女人</a></li>
28                     <li><a href="http://fangchan.news.baidu.com/">房產</a></li>
29                     <li><a href="http://youxi.news.baidu.com/">遊戲</a></li>
30                     <li><a href="http://shipin.news.baidu.com/">視頻</a></li>
31                 </ul>
32 </nav>
33 </body>
34 </html>

HTML 5新標籤nav在語義上適合作頁面導航，所以咱們選擇它做爲頁面導航的容器spa

預覽以後，在頁面中顯示的是一個縱向上下排列的無序列表項目，由於<li>標籤是塊級元素，因此列表顯示爲上下排列code

美化導航

默認的縱向導航毫無美感，如今咱們須要用CSS來美化導航樣式視頻

首先清楚默認的盒子內外邊距htm

 * {margin:0; padding:0;}

這樣的話，頁面中全部元素的內外邊距，都被重置爲0 ，這樣作的好處是爲了後面添加本身的內外邊距blog

導航位置

導航菜單放置在頁面中什麼位置呢？上、下、左、右？這取決於你項目須要，默認狀況下，導航菜單是放置在頁面左上角的，由於這是HTML盒模型的默認定位方式。下面咱們將縱向導航調整到頁面的左側遊戲

nav {margin:20px; width:120px;}

先將nav標籤的外邊距設置爲20px，並設置了盒子的寬度爲120pxip

採用絕對定位的方式，將導航設置到頁面的左側get

nav{position:absolute;right:1px;top:1px;}

添加樣式

下面CSS樣式，設置了ul邊框、樣式、顏色、圓角、內邊距

 .nav-list ul {border:1px solid #f00; border-radius:20px;padding:6px;}

去掉列表項的下劃線

.nav-list li {list-style-type:none; padding:6px 10px;}

默認狀況下<li>列表項是帶有下劃線的，這裏經過CSS樣式清楚了這種效果

爲每一個列表項，添加本身的下劃線，如下代碼利用了「非首位子選擇符」，它是緊鄰同胞選擇符的升級版，它實現了爲除了列表的第一項外，其餘的每一個列表項目頂部都添加一條下劃線效果，這裏的下劃線是利用盒子的邊框顯示的

 .nav-list li + li {border-top:1px solid green;}

除了用「非首位子選擇符」實現列表項底部劃線效果外，還能夠用僞選擇符來實現一樣的效果

li{border-top: 1px solid;}
li:first-child{border-style: none;}

上面的CSS樣式，先給全部列表項添加頂部邊框，而後使用僞類，清楚了，第一個列表項的頂部邊框，既然把第一個列表項排除了，從而到達和「非首位子選擇符」一樣的效果

爲連接添加樣式

         /*爲連接添加樣式*/
        .nav-list a {text-decoration:none;font-size:20px;font-weight:400; color:#000;;}
        /*懸停高亮*/
        .nav-list a:hover {color:green;}

點擊區域擴大

因爲<a>連接是能夠點擊的，而<li>是不能夠點擊的，最佳的用戶體驗是讓這個列表行均可以點擊，而不單單是連接那麼一小塊區域

.nav-list li+li a{border-top: 1px solid green }
.nav-list a{display: block;padding: 3px 10px ;}

橫向導航

<!DOCTYPE html>
<html lang="zh_ch">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>HTML 5 Nav</title>

</head>
<body>
<nav class="nav-list">
                <ul>
                    <li><a href="http://news.baidu.com/view.html">首頁</a></li>
                    <li><a href="http://baijia.baidu.com/" id="nav-hot-link" target="_blank">百家</a></li>
                    <li><a href="http://jian.news.baidu.com/" target="_blank"><div class="icon-new"></div>個性推薦</a></li>
                    <li><a href="http://sh.news.baidu.com/">上海</a></li>
                    <li><a href="http://internet.baidu.com/">互聯網</a></li>
                    <li><a href="http://media.baidu.com/">傳媒</a></li>
                    <li><a href="http://auto.baidu.com/">汽車</a></li>
                    <li><a href="http://yule.baidu.com/">娛樂</a></li>
                    <li><a href="http://mil.news.baidu.com/">軍事</a></li>
                    <li><a href="http://finance.baidu.com/">財經</a></li>
                    <li><a href="http://sports.baidu.com/">體育</a></li>
                    <li><a href="http://guonei.news.baidu.com/">國內</a></li>
                    <li><a href="http://shehui.news.baidu.com/">社會</a></li>
                    <li><a href="http://tech.baidu.com/">科技</a></li>
                    <li><a href="http://guoji.news.baidu.com/">國際</a></li>
                    <li><a href="http://lady.baidu.com/">女人</a></li>
                    <li><a href="http://fangchan.news.baidu.com/">房產</a></li>
                    <li><a href="http://youxi.news.baidu.com/">遊戲</a></li>
                    <li><a href="http://shipin.news.baidu.com/">視頻</a></li>
                </ul>
</nav>
</body>
</html>

CSS樣式

<style>
    .nav-list ul {
        /*強制ul 包圍浮動的li 元素*/
        overflow:hidden;
    }
    .nav-list li {
        /*讓li 元素水平排列*/
        float:left;
        /*去掉項目符號*/
        list-style-type:none;
    }
    .nav-list a {
        /*讓連接填滿li 元素*/
        display:block;
        padding:0 16px;
        /*去掉連接的下劃線*/
        text-decoration:none;
        color:#999;
    }
    .nav-list li + li a {border-left:1px solid #aaa;}
    .nav-list a:hover {color:#555;}
</style>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。