作者|李娜
*本文為「Java聯(lián)盟」原創(chuàng)內(nèi)容撞蚕，轉(zhuǎn)載無(wú)需授權(quán)润梯，請(qǐng)保留署名來(lái)源。
今天這篇是
編程基礎(chǔ)html第九章！
這里先爆料一下纺铭，等這個(gè)HTML教程寫(xiě)完啦寇钉！
（好像還有2章這樣子）
娜姐來(lái)帶你們寫(xiě) 錘子手機(jī)官網(wǎng)！
怎么樣,NB不NB?
感覺(jué)NB的
待會(huì)看完的時(shí)候
給我在這篇文章下點(diǎn)個(gè)ZAN!
再插一句舶赔！
自從李娜做HTML系列教程以來(lái)就一直在想扫倡，
如何才能讓小伙伴們學(xué)到知識(shí)的同時(shí)，
又不會(huì)覺(jué)得太枯燥竟纳，
這個(gè)時(shí)候我忽然想到撵溃！
小時(shí)候李娜的各項(xiàng)成績(jī)中只有手工課的成績(jī)最好
因?yàn)橹挥惺止ふn是動(dòng)手的！
（PS：怪不得老師的畢業(yè)評(píng)語(yǔ)是該生動(dòng)手能力強(qiáng)锥累，和同學(xué)們打成一片缘挑。）
于是乎李娜就有了這個(gè)想法。
每次都給小伙伴分享一些小東西的做法桶略。
不過(guò)告訴你
今天娜姐语淘，就看上微信的官網(wǎng)了。
SO际歼，今天來(lái)給大家分享一下 微信官網(wǎng) 做法惶翻。
看到?jīng)]有這就是微信的官網(wǎng)，我剛截下來(lái)的圖片鹅心，還是新鮮的吕粗。
快趁熱來(lái)
.
.
學(xué)習(xí)！
對(duì)!我們的目標(biāo)就是微信官網(wǎng)
..
..
上面的黑色導(dǎo)航欄部分巴帮，就是這一小條溯泣。
怎么樣驚不驚喜，意不意外榕茧。
（PS：哇哈哈哈＠佟！用押！我就是這么調(diào)皮肢簿，可愛(ài)呀！ｒ卟Α）
正題
首先先來(lái)分析這個(gè)效果圖池充，進(jìn)行一個(gè)盒子的劃分。
大致就是以下三個(gè)部分缎讼。
一個(gè)大盒子套一個(gè)稍小點(diǎn)的盒子收夸，這個(gè)稍小點(diǎn)的盒子中。
放入logo 和 菜單欄血崭。
上代碼：
先把我們分出來(lái)的幾部分的代碼補(bǔ)全卧惜。
效果如下
（感覺(jué)就像我們有時(shí)候網(wǎng)頁(yè)加載出來(lái)的時(shí)候的網(wǎng)頁(yè)效果）
沒(méi)關(guān)系
下面我們進(jìn)行樣式初始化并且去掉這些默認(rèn)的樣式厘灼。
之后把背景圖片和 ?logo 設(shè)置到我們的代碼中。
然后設(shè)置一下列表的樣式咽瓷，就可以了设凹。
這么一說(shuō)是不是覺(jué)得很簡(jiǎn)單呀！
覺(jué)得簡(jiǎn)單的小伙伴茅姜，大可以自己試一試闪朱，
看看是不是真的就像你想的那樣！
（ps:只是看的話就可以學(xué)會(huì)知識(shí)的話钻洒，那我們還要工作經(jīng)驗(yàn)做什么奋姿！哼！）
社會(huì)你娜姐航唆！人美路子野胀蛮！
直接上全部代碼！Ｅ锤啤粪狼！
給你看看效果圖片：
說(shuō)實(shí)話這是一個(gè)鼠標(biāo)浮動(dòng)的效果，
實(shí)在是截不下來(lái)鼠標(biāo)圖標(biāo)了任岸，
你們就當(dāng)上邊有一個(gè)隱形的小鼠標(biāo)在滑動(dòng)好不好呀再榄！
本章用到的知識(shí)點(diǎn)
知識(shí)點(diǎn)1：
通配符選擇器：
*{margin:;padding:;}??（樣式初始化用的那個(gè)）
元素選擇器：
ul{width:;height:;}????（去除標(biāo)簽樣式用的那個(gè)）
類(lèi)選擇器：
.wrap{width:;height:;}????(先給標(biāo)簽取個(gè)類(lèi)名，然后進(jìn)行設(shè)置)
id選擇器
#box{width:;height:;}????（這里沒(méi)有用到享潜，但是提一下）
選擇器的優(yōu)先級(jí)順序：
（看不懂的困鸥！你過(guò)來(lái)，來(lái)剑按，咱們私聊微信疾就，我看你是不是來(lái)?yè)v亂的！Ｒ蘸ｂ）
通配符 ? < ? 標(biāo)簽 ? < ? Class ? < ? Id
知識(shí)點(diǎn)2：
浮動(dòng)
使元素脫離文檔流，按照指定方向（左右）發(fā)生移動(dòng)猜敢，
遇到父級(jí)邊界或者相鄰的浮動(dòng)元素停了下來(lái)姑荷。
浮動(dòng)會(huì)導(dǎo)致父元素的塌陷，所以在使用完之后要清除浮動(dòng)缩擂。
好的今天的分享就到這里了鼠冕！怎么樣，李娜說(shuō)清楚了嗎胯盯？
要是有沒(méi)說(shuō)明白的地方懈费，小伙伴們要指出來(lái)喲！博脑！
那么下期再見(jiàn)了憎乙！
當(dāng)然有什么問(wèn)題或者需要李娜我給大家分享講解的地方薄坏，可以在留言區(qū)留言告訴我，整理后會(huì)在公眾號(hào)里面分享講解哦寨闹！
