資訊專欄INFORMATION COLUMN
摘要：一般來講，我們的網(wǎng)頁導(dǎo)航欄是這么個(gè)模式來構(gòu)建在結(jié)構(gòu)上首先我們需要給導(dǎo)航欄的給個(gè)類名一般為然后就是一個(gè)無序表格由于導(dǎo)航欄的文字一般都是鏈接用來跳轉(zhuǎn)頁面要在里面包含一個(gè)首頁云云商城智慧門店?duì)I銷平臺(tái)媒體聯(lián)盟關(guān)于云道在樣式上目前我見過的分為兩種導(dǎo)航
一般來講，我們的網(wǎng)頁導(dǎo)航欄
是這么個(gè)模式來構(gòu)建
在結(jié)構(gòu)上：
1.首先我們需要給導(dǎo)航欄的div 給個(gè)類名 一般為nav
2.然后就是一個(gè)無序表格?
3.由于導(dǎo)航欄的文字一般都是鏈接用來跳轉(zhuǎn)頁面 要在li里面包含一個(gè)a
在樣式上： 目前我見過的分為兩種
導(dǎo)航欄的文字 裸露 也就是沒有滑動(dòng)門的那種
比如這種
1.首先寫網(wǎng)頁之前就要取消 網(wǎng)頁默認(rèn)的邊距，不然不管你寫什么都跟別人的不一樣。但是后期就不能這么寫了。
* {
margin: 0; // *是通配選擇器 選擇所有的標(biāo)簽
padding: 0;
}
2.對(duì)于表格中的樣式 也就是li中的小點(diǎn)點(diǎn) 要進(jìn)行初始化
因?yàn)椴煌瑸g覽器對(duì)小點(diǎn)點(diǎn)的兼容不支持 而且 小點(diǎn)點(diǎn)也沒有那么美觀好看 顯得很雞肋
ul {
list-style: none;
}
3.對(duì)于鏈接 我們一般都取消下劃線的寫法 因?yàn)椴粔蛎烙^處理如下
a {
text-decoration: none;
}
1.2.3 三點(diǎn)都是寫導(dǎo)航欄之前的初始化問題
接下來就是讓表格里面的li 排列在一行，并且使得li垂直居中，而且要控制之間的距離，我們一般用浮動(dòng)來做比較好，浮動(dòng)的最大的作用就是讓多個(gè)div在一行顯示 并且脫標(biāo) 不再占有位置。
.nav li {
float: left;
margin: 0 10px;
}
4.由于文字長(zhǎng)度不能確定 又因?yàn)槭羌兾淖譀]有必要轉(zhuǎn)換為塊級(jí)元素 所以不能夠給a轉(zhuǎn)換成塊級(jí)元素 賦予寬 和 高（高根據(jù)字體大小會(huì)自動(dòng)確定） 把a(bǔ)當(dāng)作文字一樣用的好處是 容易居中對(duì)齊?
一般垂直居中對(duì)齊用的就是行高 等于高 也就是 line-height == height
5.接下來再給li之間設(shè)置間距
有兩種寫法 在這里使用起來基本沒有什么效果的差距
接著復(fù)習(xí)一下margin 和 padding的區(qū)別把?
padding 會(huì)撐開盒子 內(nèi)邊距 如圖
、
margin會(huì)真正意義上的隔開距離 外邊距? 如圖?
由于寫博客的人是個(gè)菜逼?分不清楚用這兩個(gè)哪個(gè)好 大家就問一下大佬們把 問到的也給我說一下哈哈哈哈哈
好了接下來是另一種導(dǎo)航欄的寫法 有推拉門的那種
這種寫法跟我上述中講的不太一樣 因?yàn)樵谶@里面的 a標(biāo)簽 需要轉(zhuǎn)換成塊級(jí)元素
轉(zhuǎn)換成塊級(jí)元素的目的呢 就是滑動(dòng)門的原理了
滑動(dòng)門的原理簡(jiǎn)單來講 是這么個(gè)結(jié)構(gòu)
通過給 標(biāo)簽a 一個(gè)背景圖片定位到左端
給標(biāo)簽span 一個(gè)背景圖片定位到右端
如圖
左端綠色部分 作為a的背景 右端綠色部分 作為 span 的背景 （左a 右s）
這樣實(shí)現(xiàn)起來的話 無論文字有多長(zhǎng)都可以滑動(dòng)剛好是這個(gè)樣子 大概如微信官網(wǎng) 如圖
由于字體不一樣長(zhǎng)而背景又需要相同的樣式 也就是滑動(dòng)門原理
跟上述純文字 導(dǎo)航欄不同的是 不能夠再利用行高=高來垂直居中這些個(gè)a了?
我們?cè)诖怪本又械臅r(shí)候就可以利用padding-top 這個(gè)屬性來操作（我查了微信的代碼 也是這么做的）
不再贅述 代碼如下
微信，是一種生活方式
?
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/1359.html
摘要：一導(dǎo)航欄導(dǎo)航欄的作用熟練使用導(dǎo)航欄，對(duì)于網(wǎng)站排版非常重要使用你可以轉(zhuǎn)換成好看的導(dǎo)航欄而不是枯燥的菜單。下拉菜單代碼如下下拉菜單你好我好大家好效果圖如下眼睛累了吧，注意勞逸結(jié)合呀 一、CSS導(dǎo)航欄 （1）導(dǎo)航欄的作用 熟練使用導(dǎo)航欄，對(duì)于網(wǎng)站排版非常重要,使用CSS你可以轉(zhuǎn)換成好看的導(dǎo)航欄而不是枯燥的HTML菜單。 （2）垂直導(dǎo)航欄 代碼如下 ...
摘要：層疊樣式表二修訂版這是對(duì)作出的官方說明。速查表兩份表來自一份關(guān)于基礎(chǔ)特性，一份關(guān)于布局。核心第一篇一份來自的基礎(chǔ)參考指南簡(jiǎn)寫速查表簡(jiǎn)寫形式參考書使用層疊樣式表基礎(chǔ)指南，包含使用的好處介紹個(gè)方法快速寫成高質(zhì)量的寫出高效的一些提示。 迄今為止，我已經(jīng)收集了100多個(gè)精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設(shè)計(jì)脫穎而出。 CSS3 資源 20個(gè)學(xué)習(xí)CSS3的有用資源 C...
摘要：文章首發(fā)自我的個(gè)人網(wǎng)站前言學(xué)也有一段時(shí)間了網(wǎng)上也有不少官方文檔的中文翻譯版但是似乎只有中文網(wǎng)站文檔一直是最新的奈何并沒有供直接下載是在是不太方便為了方便閱讀以及方便后續(xù)文檔更新決定用寫一個(gè)爬蟲將網(wǎng)頁下載下來保持為最后完成結(jié)果如下是的沒錯(cuò) 文章首發(fā)自我的 個(gè)人網(wǎng)站-Leetaos Blog 前言 學(xué) Rust 也有一段時(shí)間了,網(wǎng)上也有不少官方文檔的中文翻譯版,但是似乎只有 [Rust中...
摘要：代碼如下頁面內(nèi)容樣式接下來，將側(cè)邊欄和主內(nèi)容區(qū)域使用一個(gè)包含起來。列和行布局部分橫跨所有的列。也可以使用簡(jiǎn)寫，起始值和結(jié)束值位于同一行上，并用斜杠分隔。設(shè)計(jì)方法總結(jié)以上的布局設(shè)計(jì)中，使用了來進(jìn)行整體布局以及設(shè)計(jì)中的非線性部分。 CSS 浮動(dòng)屬性一直是網(wǎng)站上排列元素的主要方法之一，但是當(dāng)實(shí)現(xiàn)復(fù)雜布局時(shí)，這種方法不總是那么理想。幸運(yùn)的是，在現(xiàn)代網(wǎng)頁設(shè)計(jì)時(shí)代，使用 Flexbox 和 CSS...
摘要：現(xiàn)在我們打算實(shí)現(xiàn)一個(gè)在網(wǎng)頁上方的導(dǎo)航條，并在所有的頁面中繼承這個(gè)導(dǎo)航條。導(dǎo)航條的建立，我們直接使用提供的如下導(dǎo)航條的樣式。之后我們把上述導(dǎo)航條的代碼復(fù)制到的中，及引用復(fù)制到中，瀏覽器就能顯示和圖中一樣的導(dǎo)航條了。 在建設(shè)一個(gè)網(wǎng)站的時(shí)候，不同的頁面有很多元素是一樣的，比如導(dǎo)航條、側(cè)邊欄等，我們可以使用模板的繼承，避免重復(fù)編寫html代碼?，F(xiàn)在我們打算實(shí)現(xiàn)一個(gè)在網(wǎng)頁上方的導(dǎo)航條，并在所有的...
閱讀 3290·2021-11-11 16:55
閱讀 2660·2021-10-13 09:39
閱讀 2506·2021-09-13 10:27
閱讀 2214·2019-08-30 15:55
閱讀 3144·2019-08-30 15:54
閱讀 3184·2019-08-29 16:34
閱讀 1887·2019-08-29 12:41
閱讀 1123·2019-08-29 11:33
