整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
本篇文章主要給大家介紹一下如何使用html+css完成二級橫向以及豎向菜單導(dǎo)航制作；菜單導(dǎo)航是網(wǎng)站建設(shè)中最常用的一塊了，基本每個(gè)網(wǎng)站內(nèi)都會有個(gè)導(dǎo)航菜單，用鼠標(biāo)劃過還可以有下拉子菜單。
由上圖我們可以看出，該圖包含一個(gè)橫向?qū)Ш綏l，然后鼠標(biāo)經(jīng)過橫向?qū)Ш綏l之后，子導(dǎo)航顯示出來。
我們這里主要用到的知識點(diǎn)就是列表標(biāo)簽（ul、dl）的使用、浮動（float）的使用、絕對定位（absolute）及鼠標(biāo)經(jīng)過（hover）的效果。
1、列表標(biāo)簽ul、dl（我們使用ul、dl來創(chuàng)建同類型的導(dǎo)航元素內(nèi)容，通過設(shè)置css樣式來達(dá)到圖片所示效果）；
2、浮動元素float（每個(gè)導(dǎo)航元素我們需要使用float:left;讓其左對齊，這里涉及到了我們之前講解的如何清除浮動的影響）；
3、絕對定位absolute（對于子導(dǎo)航我們要使用絕對定位來讓其浮動在上級有定位元素的下方，不占據(jù)元素空間）
4、鼠標(biāo)經(jīng)過hover（使用css的鼠標(biāo)經(jīng)過元素（hover）效果，配合display的none（隱藏）和block（顯示）來實(shí)現(xiàn)子菜單的顯示與隱藏）
具體的實(shí)現(xiàn)html代碼以及css代碼就如下圖所示：
還有一個(gè)縱向菜單導(dǎo)航原理跟橫向的類似，只需簡單調(diào)整一下css代碼即可。
html代碼跟橫向一樣，這里就不再貼圖，具體的實(shí)現(xiàn)圖片效果以及css代碼就如下圖所示：
好了，本篇文章就給大家說到這里，大家自己動手寫一下看能不能寫出一樣的頁面效果出來，也可以找一些類似的頁面自己練習(xí)一下，有需要源碼的可以直接私信我即可。
每日金句：每天收獲小進(jìn)步，積累起來就是大進(jìn)步；每天收獲小幸福，積攢起來便成大幸福。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識。
0
本例參考了網(wǎng)上的例子，唯一不一樣的是，我這里的操作是一步一步講解，網(wǎng)上僅是源碼。
一、我們先創(chuàng)建一張空白的網(wǎng)頁，網(wǎng)頁要自適應(yīng)手機(jī)。
圖1
二、我們再創(chuàng)建網(wǎng)頁的頭部。
圖2
圖3
三、做出來的網(wǎng)頁頭部太丑了，我們要去掉盒子與瀏覽器的間隙，還有給頭部加內(nèi)部距離。
圖4
圖5
四、給網(wǎng)頁頭部添加一些內(nèi)容。
圖6
圖7
五、接下來開始做導(dǎo)航條了。
圖8
圖9
六、發(fā)現(xiàn)沒，導(dǎo)航條居然看不見，沒有東西在里面自然是看不見的，我們加三個(gè)鏈接吧。
圖10
圖11
七、這回是看見了，不過樣式太丑，我們改改樣式。
圖12
圖13
八、加上內(nèi)部距離，就好看了許多，即然是鏈接，我們加點(diǎn)動態(tài)吧，當(dāng)鼠標(biāo)在鏈接上面時(shí)，鏈接塊變色。
圖14
圖15
九、開始做網(wǎng)頁內(nèi)容，網(wǎng)頁內(nèi)容我分為三塊，左右兩邊是側(cè)欄，中間是主要內(nèi)容。
圖16
圖17
十、我想讓它橫著排，它卻是豎著排，改改各個(gè)塊的樣式。
圖18
圖19
十一、給主體的各個(gè)塊加點(diǎn)內(nèi)容。
圖20
圖21
十二、內(nèi)容是有了，但你會發(fā)現(xiàn)各塊之間沒有間隙，貼得太近了，我們改一下樣式，加個(gè)內(nèi)部距離。
圖22
圖23
十三、距離是有了，但有一個(gè)側(cè)欄跑到了另一行，怎么回事？原來padding是會改變盒子的整體寬度，我們原本是100%，現(xiàn)在多了padding的寬度，自然就換行了，解決一下吧。
圖24
圖25
十四、這回終于在一行了，接下來可以做網(wǎng)頁底部了。
圖26
圖27
十五、改改樣式，讓底部好看一點(diǎn)。
圖28
圖29
十六，這個(gè)時(shí)候，網(wǎng)頁的整體版面就完成了，再補(bǔ)充一個(gè)小內(nèi)容，讓網(wǎng)頁瀏覽器在小于600像素寬的時(shí)候，主體內(nèi)容的三個(gè)塊由橫變豎。
圖30
圖31
式
@media screen and (orientation: portrait) {
html{
width : 100vmin;
height : 100vmax;
}
body{
width : 100vmin;
height : 100vmax;
}
#gyroContain{
width : 100vmax;
height : 100vmin;
transform-origin: top left;
transform: rotate(90deg) translate(0,-100vmin);
}
}
@media screen and (orientation: landscape) {
html{
width : 100vmax;
height : 100vmin;
}
body{
width : 100vmax;
height : 100vmin;
}
#gyroContain{
width : 100vmax;
height : 100vmin;
}
}
結(jié)構(gòu)
<html> <body> <div id="gyroContain"> 非常多非常多的文字 </div> </body> </html>
P.S. 如果你的頁面里有from表單要填的話，應(yīng)該用 「**彈出遮罩層讓用戶旋轉(zhuǎn)手機(jī)**」 的解決方案。檢測手機(jī)豎屏下，提示用關(guān)閉屏幕旋轉(zhuǎn)鎖定，并橫置手機(jī)。想想手機(jī)瀏覽器還是豎屏，而內(nèi)容卻被強(qiáng)制橫屏的畫面有多奇怪吧...
P.S. 頁面強(qiáng)制橫屏是一碗都快放壞了的冷飯。但文主百度到的解決方法都用了js。文主覺得有些高炮打蚊子。所以自己用Css+Html實(shí)現(xiàn)了一個(gè)。文章內(nèi)的代碼只是一個(gè)給大家發(fā)散思維的littleDemo，你們想豎屏滾動就去掉height加y-auto, 想有背景色就加bg-color，還望大家不要討伐我的不嚴(yán)謹(jǐn)啊。第一篇文章，望海涵。其實(shí)做為一個(gè)開發(fā)者，有一個(gè)學(xué)習(xí)的氛圍跟一個(gè)交流圈子特別重要這里我要推薦c++交流群648，778，840，不管你是小白還是大牛歡迎入住，大家一起交流成長。
學(xué)習(xí)思路：
學(xué)習(xí)資料：
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
