作者|李娜
*本文為「Java聯(lián)盟」原創(chuàng)內(nèi)容，轉(zhuǎn)載無需授權(quán)，請保留署名來源。
今天這篇是
編程基礎(chǔ)html第九章！
這里先爆料一下，等這個HTML教程寫完啦！
（好像還有2章這樣子）
娜姐來帶你們寫 錘子手機(jī)官網(wǎng)！
怎么樣,NB不NB?
感覺NB的
待會看完的時候
給我在這篇文章下點個ZAN!
再插一句！
自從李娜做HTML系列教程以來就一直在想，
如何才能讓小伙伴們學(xué)到知識的同時，
又不會覺得太枯燥，
這個時候我忽然想到！
小時候李娜的各項成績中只有手工課的成績最好
因為只有手工課是動手的！
（PS：怪不得老師的畢業(yè)評語是該生動手能力強(qiáng)，和同學(xué)們打成一片。）
于是乎李娜就有了這個想法。
每次都給小伙伴分享一些小東西的做法。
不過告訴你
今天娜姐，就看上微信的官網(wǎng)了。
SO，今天來給大家分享一下 微信官網(wǎng) 做法。
看到?jīng)]有這就是微信的官網(wǎng)，我剛截下來的圖片，還是新鮮的。
快趁熱來
.
.
學(xué)習(xí)！
對!我們的目標(biāo)就是微信官網(wǎng)
..
..
上面的黑色導(dǎo)航欄部分，就是這一小條。
怎么樣驚不驚喜，意不意外。
（PS：哇哈哈哈！！！我就是這么調(diào)皮，可愛呀！！）
正題
首先先來分析這個效果圖，進(jìn)行一個盒子的劃分。
大致就是以下三個部分。
一個大盒子套一個稍小點的盒子，這個稍小點的盒子中。
放入logo 和 菜單欄。
上代碼：
先把我們分出來的幾部分的代碼補(bǔ)全。
效果如下
（感覺就像我們有時候網(wǎng)頁加載出來的時候的網(wǎng)頁效果）
沒關(guān)系
下面我們進(jìn)行樣式初始化并且去掉這些默認(rèn)的樣式。
之后把背景圖片和 ?logo 設(shè)置到我們的代碼中。
然后設(shè)置一下列表的樣式，就可以了。
這么一說是不是覺得很簡單呀！
覺得簡單的小伙伴，大可以自己試一試，
看看是不是真的就像你想的那樣！
（ps:只是看的話就可以學(xué)會知識的話，那我們還要工作經(jīng)驗做什么！哼！）
社會你娜姐！人美路子野！
直接上全部代碼！！！
給你看看效果圖片：
說實話這是一個鼠標(biāo)浮動的效果，
實在是截不下來鼠標(biāo)圖標(biāo)了，
你們就當(dāng)上邊有一個隱形的小鼠標(biāo)在滑動好不好呀！
本章用到的知識點
知識點1：
通配符選擇器：
*{margin:;padding:;}??（樣式初始化用的那個）
元素選擇器：
ul{width:;height:;}????（去除標(biāo)簽樣式用的那個）
類選擇器：
.wrap{width:;height:;}????(先給標(biāo)簽取個類名，然后進(jìn)行設(shè)置)
id選擇器
#box{width:;height:;}????（這里沒有用到，但是提一下）
選擇器的優(yōu)先級順序：
（看不懂的！你過來，來，咱們私聊微信，我看你是不是來搗亂的！！！）
通配符 ? < ? 標(biāo)簽 ? < ? Class ? < ? Id
知識點2：
浮動
使元素脫離文檔流，按照指定方向（左右）發(fā)生移動，
遇到父級邊界或者相鄰的浮動元素停了下來。
浮動會導(dǎo)致父元素的塌陷，所以在使用完之后要清除浮動。
好的今天的分享就到這里了！怎么樣，李娜說清楚了嗎？
要是有沒說明白的地方，小伙伴們要指出來喲！！
那么下期再見了！
當(dāng)然有什么問題或者需要李娜我給大家分享講解的地方，可以在留言區(qū)留言告訴我，整理后會在公眾號里面分享講解哦！
