作者|李娜
*本文為「Java聯(lián)盟」原創(chuàng)內(nèi)容硬鞍，轉(zhuǎn)載無(wú)需授權(quán)，請(qǐng)保留署名來(lái)源酷勺。
娜姐最近看了一下有關(guān)前端 html 的文章,相比于其他的文章的閱讀量并不是很受歡迎啊!
看來(lái)小伙伴們對(duì)于前端頁(yè)面的學(xué)習(xí)欲望本橙，并不是很大。
但是這個(gè) html 學(xué)習(xí) Java 最先應(yīng)該學(xué)習(xí)的知識(shí)點(diǎn)了 ,不然以后?Java web 的項(xiàng)目怎么帶你們做呢脆诉！
堅(jiān)持了一段時(shí)間了甚亭！
俗話說(shuō)的好“天下沒(méi)有不散的宴席”,
但是就這么無(wú)聲無(wú)息的終結(jié)，
不是你娜姐的作風(fēng)击胜！
而且還是有很多小伙伴
在支持著娜姐的前端知識(shí)分享文章亏狰。
所以娜姐給小伙伴帶來(lái)了高級(jí)篇系列文章
娜姐帶你一步步做錘子官網(wǎng)！
之所以寫這個(gè)
是因?yàn)槟冉阋菜闶前雮€(gè)錘粉偶摔。
（堅(jiān)果pro發(fā)布后就路轉(zhuǎn)粉了Ｏ就佟）
開(kāi)始
好了，老話說(shuō)萬(wàn)事開(kāi)頭難
一個(gè)網(wǎng)頁(yè)也不是那么容易就做完的辰斋。
所以今天娜姐就先帶著大家做錘子
官網(wǎng)的導(dǎo)航欄策州。
效果演示
看到?jīng)]有，就是這一小條宫仗。
我們力求可以做的很像够挂！是時(shí)候表演真正的技術(shù)了！
我們現(xiàn)在寫的是一個(gè)項(xiàng)目了就不能像之前那么隨便了锰什！
首先新建一個(gè)項(xiàng)目文件夾
其中 css 文件夾就是用來(lái)放我們的 css 的樣式下硕。
images 是用來(lái)放我們的圖片的
js 就是放置 js 文件的。
iconfont 就是阿里圖標(biāo)汁胆。
那么一個(gè)前端的工程大致就是這樣的組織結(jié)構(gòu)了梭姓。
（基本上前端的項(xiàng)目都是這樣的架構(gòu)了）
然后在左面定義一個(gè)空間放我們的 logo
中間的部分做一個(gè)列表標(biāo)簽，
然后在最右邊放置兩個(gè)小圖標(biāo)嫩码。
恩誉尖！大致就是這樣三塊了！
然后動(dòng)手铸题，讓你見(jiàn)識(shí)一下娜姐的厲害铡恕！
看到?jīng)]有琢感，完活!
我已經(jīng)把主體搭建起來(lái)了
那么剩下的就是為我們的結(jié)構(gòu)加樣式了！
主體
（點(diǎn)擊圖片可以看大圖）
看到了嗎探熔？我們這個(gè)樣式只有這兩行代碼＞哉搿！厲害吧诀艰！哈哈哈哈柬甥！
這世界哪有這么神奇的事兩行代碼就搞定樣式！
還記得我剛才說(shuō)過(guò)得嗎其垄？裝css樣式的文件夾苛蒲！
這也是今天的知識(shí)點(diǎn)了！
我們以后會(huì)將css樣式寫在html 文件外面绿满。
然后利用上面的兩行代碼引入css樣式臂外。
這樣我們以后頁(yè)面換風(fēng)格只要換掉css樣式。
或者修改一下文件夾的路徑就可以了!
是不是很贊呀!
看我們的css樣式就在這里了喇颁！
base 就是我們的頁(yè)面屬性初始化樣式漏健。
（點(diǎn)擊圖片可以看大圖）
這些代碼相信小伙伴們很熟悉了！
我就不給大家細(xì)講了无牵！
（偷個(gè)懶Ｑ埂）
（點(diǎn)擊圖片可以看大圖）
這個(gè)就是我們這個(gè)頁(yè)面的導(dǎo)航欄樣式了厂抖！啦啦啦茎毁！
總算是把這個(gè)頁(yè)面的導(dǎo)航欄開(kāi)好了。
運(yùn)行一下忱辅，效果就出來(lái)了七蜘！
涉及知識(shí)點(diǎn)：
外部樣式
href 后面接我們的 css 文件所在的路徑。
假如我們同時(shí)設(shè)置了外部樣式墙懂，內(nèi)部樣式和行內(nèi)樣式橡卤。
那么優(yōu)先級(jí)就是：
外部樣式<內(nèi)部樣式<行內(nèi)樣式。
好啦錘子官網(wǎng)的導(dǎo)航欄就做好了
下一篇就是做官網(wǎng)的海報(bào)啦损搬！
關(guān)注Java聯(lián)盟微信公眾號(hào)回復(fù)“錘子官網(wǎng)”就可以獲取素材源碼啦碧库！
當(dāng)然有什么問(wèn)題或者需要李娜我給大家分享講解的地方，可以在留言區(qū)留言告訴我巧勤，整理后會(huì)在公眾號(hào)里面分享講解哦嵌灰！
有疑問(wèn)？請(qǐng)留言颅悉！關(guān)注Java聯(lián)盟微信公眾號(hào)沽瞭，看Java要聞！
