整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
本篇文章主要給大家介紹一下如何使用html+css完成二級(jí)橫向以及豎向菜單導(dǎo)航制作；菜單導(dǎo)航是網(wǎng)站建設(shè)中最常用的一塊了，基本每個(gè)網(wǎng)站內(nèi)都會(huì)有個(gè)導(dǎo)航菜單，用鼠標(biāo)劃過(guò)還可以有下拉子菜單。
由上圖我們可以看出，該圖包含一個(gè)橫向?qū)Ш綏l，然后鼠標(biāo)經(jīng)過(guò)橫向?qū)Ш綏l之后，子導(dǎo)航顯示出來(lái)。
我們這里主要用到的知識(shí)點(diǎn)就是列表標(biāo)簽（ul、dl）的使用、浮動(dòng)（float）的使用、絕對(duì)定位（absolute）及鼠標(biāo)經(jīng)過(guò)（hover）的效果。
1、列表標(biāo)簽ul、dl（我們使用ul、dl來(lái)創(chuàng)建同類型的導(dǎo)航元素內(nèi)容，通過(guò)設(shè)置css樣式來(lái)達(dá)到圖片所示效果）；
2、浮動(dòng)元素float（每個(gè)導(dǎo)航元素我們需要使用float:left;讓其左對(duì)齊，這里涉及到了我們之前講解的如何清除浮動(dòng)的影響）；
3、絕對(duì)定位absolute（對(duì)于子導(dǎo)航我們要使用絕對(duì)定位來(lái)讓其浮動(dòng)在上級(jí)有定位元素的下方，不占據(jù)元素空間）
4、鼠標(biāo)經(jīng)過(guò)hover（使用css的鼠標(biāo)經(jīng)過(guò)元素（hover）效果，配合display的none（隱藏）和block（顯示）來(lái)實(shí)現(xiàn)子菜單的顯示與隱藏）
具體的實(shí)現(xiàn)html代碼以及css代碼就如下圖所示：
還有一個(gè)縱向菜單導(dǎo)航原理跟橫向的類似，只需簡(jiǎn)單調(diào)整一下css代碼即可。
html代碼跟橫向一樣，這里就不再貼圖，具體的實(shí)現(xiàn)圖片效果以及css代碼就如下圖所示：
好了，本篇文章就給大家說(shuō)到這里，大家自己動(dòng)手寫一下看能不能寫出一樣的頁(yè)面效果出來(lái)，也可以找一些類似的頁(yè)面自己練習(xí)一下，有需要源碼的可以直接私信我即可。
每日金句：每天收獲小進(jìn)步，積累起來(lái)就是大進(jìn)步；每天收獲小幸福，積攢起來(lái)便成大幸福。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。
0
本例參考了網(wǎng)上的例子，唯一不一樣的是，我這里的操作是一步一步講解，網(wǎng)上僅是源碼。
一、我們先創(chuàng)建一張空白的網(wǎng)頁(yè)，網(wǎng)頁(yè)要自適應(yīng)手機(jī)。
圖1
二、我們?cè)賱?chuàng)建網(wǎng)頁(yè)的頭部。
圖2
圖3
三、做出來(lái)的網(wǎng)頁(yè)頭部太丑了，我們要去掉盒子與瀏覽器的間隙，還有給頭部加內(nèi)部距離。
圖4
圖5
四、給網(wǎng)頁(yè)頭部添加一些內(nèi)容。
圖6
圖7
五、接下來(lái)開(kāi)始做導(dǎo)航條了。
圖8
圖9
六、發(fā)現(xiàn)沒(méi)，導(dǎo)航條居然看不見(jiàn)，沒(méi)有東西在里面自然是看不見(jiàn)的，我們加三個(gè)鏈接吧。
圖10
圖11
七、這回是看見(jiàn)了，不過(guò)樣式太丑，我們改改樣式。
圖12
圖13
八、加上內(nèi)部距離，就好看了許多，即然是鏈接，我們加點(diǎn)動(dòng)態(tài)吧，當(dāng)鼠標(biāo)在鏈接上面時(shí)，鏈接塊變色。
圖14
圖15
九、開(kāi)始做網(wǎng)頁(yè)內(nèi)容，網(wǎng)頁(yè)內(nèi)容我分為三塊，左右兩邊是側(cè)欄，中間是主要內(nèi)容。
圖16
圖17
十、我想讓它橫著排，它卻是豎著排，改改各個(gè)塊的樣式。
圖18
圖19
十一、給主體的各個(gè)塊加點(diǎn)內(nèi)容。
圖20
圖21
十二、內(nèi)容是有了，但你會(huì)發(fā)現(xiàn)各塊之間沒(méi)有間隙，貼得太近了，我們改一下樣式，加個(gè)內(nèi)部距離。
圖22
圖23
十三、距離是有了，但有一個(gè)側(cè)欄跑到了另一行，怎么回事？原來(lái)padding是會(huì)改變盒子的整體寬度，我們?cè)臼?00%，現(xiàn)在多了padding的寬度，自然就換行了，解決一下吧。
圖24
圖25
十四、這回終于在一行了，接下來(lái)可以做網(wǎng)頁(yè)底部了。
圖26
圖27
十五、改改樣式，讓底部好看一點(diǎn)。
圖28
圖29
十六，這個(gè)時(shí)候，網(wǎng)頁(yè)的整體版面就完成了，再補(bǔ)充一個(gè)小內(nèi)容，讓網(wǎng)頁(yè)瀏覽器在小于600像素寬的時(shí)候，主體內(nèi)容的三個(gè)塊由橫變豎。
圖30
圖31
移動(dòng)端中我們經(jīng)常碰到橫屏豎屏的問(wèn)題，那么我們應(yīng)該如何去判斷或者針對(duì)橫屏、豎屏來(lái)寫不同的代碼呢。
豎屏引用
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
@media screen and (orientation: portrait) {
/*豎屏 css*/
}
@media screen and (orientation: landscape) {
/*橫屏 css*/
}
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
