網頁導航欄 html + css的代碼實現

時間 2019-11-09

標籤網頁導航 html css 代碼實現欄目 HTML 简体版

原文原文鏈接

通常來說，咱們的網頁導航欄
是這麼個模式來構建
在結構上：
1.首先咱們須要給導航欄的div 給個類名通常爲nav
2.而後就是一個無序表格
3.因爲導航欄的文字通常都是連接用來跳轉頁面要在li裏面包含一個ahtml

<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.首先寫網頁以前就要取消網頁默認的邊距，否則無論你寫什麼都跟別人的不同。可是後期就不能這麼寫了。微信

* {
        margin: 0;  // *是通配選擇器  選擇全部的標籤
        padding: 0;
    }

2.對於表格中的樣式也就是li中的小點點要進行初始化
由於不一樣瀏覽器對小點點的兼容不支持並且小點點也沒有那麼美觀好看顯得很雞肋字體

ul {
        list-style: none;
    }

3.對於連接咱們通常都取消下劃線的寫法由於不夠美觀處理以下ui

a {
        text-decoration: none;
}

1.2.3 三點都是寫導航欄以前的初始化問題
接下來就是讓表格裏面的li 排列在一行，而且使得li垂直居中，並且要控制之間的距離，咱們通常用浮動來作比較好，浮動的最大的做用就是讓多個div在一行顯示而且脫標再也不佔有位置。url

 .nav li {
        float: left;
        margin: 0 10px;
    }

4.因爲文字長度不能肯定又由於是純文字沒有必要轉換爲塊級元素因此不可以給a轉換成塊級元素賦予寬和高（高根據字體大小會自動肯定）把a看成文字同樣用的好處是容易居中對齊
通常垂直居中對齊用的就是行高等於高也就是 line-height == height
5.接下來再給li之間設置間距
有兩種寫法在這裏使用起來基本沒有什麼效果的差距
接着複習一下margin 和 padding的區別把
padding 會撐開盒子內邊距如圖spa

、scala

margin會真正意義上的隔開距離外邊距如圖 code

因爲寫博客的人是個菜逼分不清楚用這兩個哪一個好你們就問一下大佬們把問到的也給我說一下哈哈哈哈哈htm

好了接下來是另外一種導航欄的寫法有推拉門的那種
這種寫法跟我上述中講的不太同樣由於在這裏面的 a標籤須要轉換成塊級元素
轉換成塊級元素的目的呢就是滑動門的原理了
滑動門的原理簡單來說是這麼個結構

<a> 
    <span> </span>
 </a>

經過給標籤a 一個背景圖片定位到左端
給標籤span 一個背景圖片定位到右端
如圖

左端綠色部分做爲a的背景右端綠色部分做爲 span 的背景（左a 右s）
這樣實現起來的話不管文字有多長均可以滑動恰好是這個樣子大概如微信官網如圖

因爲字體不同長而背景又須要相同的樣式也就是滑動門原理
跟上述純文字導航欄不一樣的是不可以再利用行高=高來垂直居中這些個a了
咱們在垂直居中的時候就能夠利用padding-top 這個屬性來操做（我查了微信的代碼也是這麼作的）
再也不贅述代碼以下

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>微信，是一種生活方式</title>
    <style>
       /*標題導航欄開始*/
       * {
           margin: 0; padding: 0; } body { background: url(wx.jpg) repeat-x; } li { list-style: none ; } a { text-decoration: none; } .nav li { float: left; margin: 0 40px; padding-top:21px; } .nav a{ height: 33px; background: url("to.png") no-repeat left; padding-left: 10px; color: #fff; display: block; line-height: 33px; font-weight: 700; font-size:14px; } .nav span { height: 33px; display: block; background: url("to.png") no-repeat right; padding-right: 10px; } .nav a:hover { background: url("ao.png") no-repeat left; } .nav a:hover span { background: url("ao.png") no-repeat right; } </style> </head> <body> <div class="top"> <div class="nav"> <ul> <li><a href="#"><span>首頁</span></a></li> <li><a href="#"><span>聯繫電話</span></a></li> <li><a href="#"><span>活動中心</span></a></li> <li><a href="#"><span>用戶指導</span></a></li> <li><a href="#"><span>關於咱們</span></a></li> </ul> </div> </div> </body> </html>