国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

keke / 1856人閱讀

摘要：一般來講，我們的網頁導航欄是這么個模式來構建在結構上首先我們需要給導航欄的給個類名一般為然后就是一個無序表格由于導航欄的文字一般都是鏈接用來跳轉頁面要在里面包含一個首頁云云商城智慧門店營銷平臺媒體聯盟關于云道在樣式上目前我見過的分為兩種導航

一般來講，我們的網頁導航欄
是這么個模式來構建
在結構上：
1.首先我們需要給導航欄的div 給個類名 一般為nav
2.然后就是一個無序表格?
3.由于導航欄的文字一般都是鏈接用來跳轉頁面 要在li里面包含一個a

在樣式上： 目前我見過的分為兩種
導航欄的文字 裸露 也就是沒有滑動門的那種
比如這種

1.首先寫網頁之前就要取消 網頁默認的邊距，不然不管你寫什么都跟別人的不一樣。但是后期就不能這么寫了。

* {
        margin: 0;  // *是通配選擇器  選擇所有的標簽
        padding: 0;
    }

2.對于表格中的樣式 也就是li中的小點點 要進行初始化
因為不同瀏覽器對小點點的兼容不支持 而且 小點點也沒有那么美觀好看 顯得很雞肋

ul {
        list-style: none;
    }

3.對于鏈接 我們一般都取消下劃線的寫法 因為不夠美觀處理如下

a {
        text-decoration: none;
}

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

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

4.由于文字長度不能確定 又因為是純文字沒有必要轉換為塊級元素 所以不能夠給a轉換成塊級元素 賦予寬 和 高（高根據字體大小會自動確定） 把a當作文字一樣用的好處是 容易居中對齊?
一般垂直居中對齊用的就是行高 等于高 也就是 line-height == height
5.接下來再給li之間設置間距
有兩種寫法 在這里使用起來基本沒有什么效果的差距
接著復習一下margin 和 padding的區別把?
padding 會撐開盒子 內邊距 如圖

、

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

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


好了接下來是另一種導航欄的寫法 有推拉門的那種
這種寫法跟我上述中講的不太一樣 因為在這里面的 a標簽 需要轉換成塊級元素
轉換成塊級元素的目的呢 就是滑動門的原理了
滑動門的原理簡單來講 是這么個結構

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

左端綠色部分 作為a的背景 右端綠色部分 作為 span 的背景 （左a 右s）
這樣實現起來的話 無論文字有多長都可以滑動剛好是這個樣子 大概如微信官網 如圖

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




    
    
    
    微信，是一種生活方式

?

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1359.html

相關文章

  • CSS中的導航欄和下拉菜單

    摘要：一導航欄導航欄的作用熟練使用導航欄，對于網站排版非常重要使用你可以轉換成好看的導航欄而不是枯燥的菜單。下拉菜單代碼如下下拉菜單你好我好大家好效果圖如下眼睛累了吧，注意勞逸結合呀 一、CSS導航欄 （1）導航欄的作用 熟練使用導航欄，對于網站排版非常重要,使用CSS你可以轉換成好看的導航欄而不是枯燥的HTML菜單。 （2）垂直導航欄 代碼如下 ...

    2json 評論0 收藏0

  • [譯]148個資源讓你成為CSS專家

    摘要：層疊樣式表二修訂版這是對作出的官方說明。速查表兩份表來自一份關于基礎特性，一份關于布局。核心第一篇一份來自的基礎參考指南簡寫速查表簡寫形式參考書使用層疊樣式表基礎指南，包含使用的好處介紹個方法快速寫成高質量的寫出高效的一些提示。 迄今為止，我已經收集了100多個精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設計脫穎而出。 CSS3 資源 20個學習CSS3的有用資源 C...

    impig33 評論0 收藏0

  • 導出 VuePress 構建的網站為 PDF

    摘要：文章首發自我的個人網站前言學也有一段時間了網上也有不少官方文檔的中文翻譯版但是似乎只有中文網站文檔一直是最新的奈何并沒有供直接下載是在是不太方便為了方便閱讀以及方便后續文檔更新決定用寫一個爬蟲將網頁下載下來保持為最后完成結果如下是的沒錯 文章首發自我的 個人網站-Leetaos Blog 前言 學 Rust 也有一段時間了,網上也有不少官方文檔的中文翻譯版,但是似乎只有 [Rust中...

    AlphaWallet 評論0 收藏0

  • 如何使用Flexbox和CSS Grid，實現高效布局

    摘要：代碼如下頁面內容樣式接下來，將側邊欄和主內容區域使用一個包含起來。列和行布局部分橫跨所有的列。也可以使用簡寫，起始值和結束值位于同一行上，并用斜杠分隔。設計方法總結以上的布局設計中，使用了來進行整體布局以及設計中的非線性部分。 CSS 浮動屬性一直是網站上排列元素的主要方法之一，但是當實現復雜布局時，這種方法不總是那么理想。幸運的是，在現代網頁設計時代，使用 Flexbox 和 CSS...

    eternalshallow 評論0 收藏0

  • 4.模板的繼承及Bootstrap實現導航條

    摘要：現在我們打算實現一個在網頁上方的導航條，并在所有的頁面中繼承這個導航條。導航條的建立，我們直接使用提供的如下導航條的樣式。之后我們把上述導航條的代碼復制到的中，及引用復制到中，瀏覽器就能顯示和圖中一樣的導航條了。 在建設一個網站的時候，不同的頁面有很多元素是一樣的，比如導航條、側邊欄等，我們可以使用模板的繼承，避免重復編寫html代碼。現在我們打算實現一個在網頁上方的導航條，并在所有的...

    blair 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<