頭部 演練 開心網(wǎng)首頁的布局與制作 1003
時(shí)間：2023-07-03 04:21:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-07-03 04:21:01 來源：網(wǎng)站運(yùn)營
頭部 演練 開心網(wǎng)首頁的布局與制作 1003：
視頻
階段代碼源文件
01-最外層容器分析-演練-開心首頁-HTML-1003
先分析目標(biāo)網(wǎng)站如何布局
總共劃分為三個(gè)區(qū)
我們一起完成寬度的測量
版心是1000的寬度
02-頭部組成與技術(shù)細(xì)分-演練-開心首頁-HTML-1003
頭部盒子技術(shù)分析
先看頭盒子的結(jié)構(gòu)組成
由三個(gè)部分組成
三個(gè)盒子通過浮動(dòng)定位
》頭部的底色是淺變色
03-項(xiàng)目結(jié)構(gòu)準(zhǔn)備-演練-開心首頁-HTML-1003
創(chuàng)建一個(gè)項(xiàng)目
做好相關(guān)的布局
需要有網(wǎng)頁文件，圖片文件，樣式文件等
我們可以先建好目錄，用于存放相關(guān)文件
新建css目錄
新建images目錄
到此完成了樣式目錄，images目錄的創(chuàng)建（images里同時(shí)也準(zhǔn)備好了相關(guān)的圖片素材）
新建index.html文件
到此，文件與目錄都建好了
還需要有一個(gè)css樣式文件，與html文件關(guān)聯(lián)起來
試一試是否生效
測試完畢，結(jié)構(gòu)完成
小結(jié)：
新建圖片目錄
新建樣式目錄
新建首頁文件
新建樣式文件
首頁與樣式文件產(chǎn)生關(guān)聯(lián)
注意：當(dāng)前我們是擴(kuò)展階段，所以開發(fā)順序摸著石頭走
04-布局頭部內(nèi)容區(qū)和底部盒子-演練-開心首頁-HTML-1003
先實(shí)現(xiàn)容器并用文字占位
然后給容器設(shè)置他們自己的樣式，并且居中
下一步，依次實(shí)現(xiàn)各個(gè)部分的內(nèi)容即可
當(dāng)前的這幾個(gè)盒子都沒有給高度
讓內(nèi)容把高度撐開
06-頭內(nèi)部logo與菜單上-演練-開心首頁-HTML-1003
先做三個(gè)容器，裝三個(gè)部件
做前測大小
LOGO盒子
導(dǎo)航按鈕盒子
右側(cè)注冊(cè)盒子
頭部盒子高 50
測量完畢，開始代碼
先把頭部盒子弄出來
50高
實(shí)現(xiàn)三個(gè)盒子
盒子寬度分別是
247
100
207
盒子做出來
設(shè)置寬
讓盒子浮起來
寫一個(gè)浮動(dòng)樣式類，讓需要浮的盒子裝備一下
現(xiàn)在想讓盒子浮起來。如何利用這樣樣式？
LOGIN應(yīng)該是右浮動(dòng)
來一個(gè)右浮的樣式
裝備給對(duì)應(yīng)的盒子
06-頭部細(xì)調(diào)-演練-開心首頁-HTML-1003
》實(shí)現(xiàn)淺變色的效果
向下的漸變
#d01d3b
#d36079
》實(shí)現(xiàn)LOGO圖象的插入
由于LOGO是可以點(diǎn)擊的
用A包IMG
》菜單欄
是一個(gè)文字按鈕
也有鏈接
使用ul>li結(jié)構(gòu)來實(shí)現(xiàn)
考慮拓展性，做成多個(gè)a包li的結(jié)構(gòu)
高度是40
現(xiàn)在，去掉小黑點(diǎn)，高度調(diào)40
一般情況，li這樣的樣式要在初始化時(shí)去掉
/*通用樣式的初始化*/* { padding: 0; margin: 0;}/*列表樣式初始化*/li { list-style: none;}/*超鏈接樣式初始化*/a { text-decoration: none;}高度調(diào)40
現(xiàn)在只針對(duì)頭部，菜單中的li進(jìn)行這樣的設(shè)置
使用后代選擇器
讓他們浮起來
思考辦法
1，可以給所有的li加fl屬性
2，可以直接給li里加float left樣式
為了方便，直接在li樣式里加
希望讓盒子低一些
可以考慮利用margin把它擠下來
也可以利用定位
我們使用margin，讓頭部多10
為什么margin要給ul加？
可以直接給li加嗎？
也是可以的
》按鈕背景是白色，左右有邊距
給了一個(gè)左右外邊距后，由于父盒子寬度不夠，有內(nèi)容被擠下去了
考慮把父盒子寬度去掉
父盒子寬度沒有后，它就沒有寬度了
原因，被浮動(dòng)的盒子，它的display相當(dāng)于是inline-block
inline-block的寬度由內(nèi)容決定寬
因此，需要把寬度給多一些才可解決
寬度給夠了，子浮動(dòng)元素就不會(huì)因?yàn)楦?dòng)問題，父寬度不夠被擠下去了
07-頭內(nèi)部菜單下-演練-開心首頁-HTML-1003
》讓文字垂直居中
行高=高度
》左右給些白色的填充
微調(diào)一下padding與margin
》讓按鈕變成上圓角
》文字顏色與加粗
采集到的色
#cb3333
》讓選中的li才會(huì)有這樣的按鈕效果
新建一個(gè)active的li的樣式
把按鈕相關(guān)的特效給它
給第一個(gè)li添加上active樣式
其它的樣式默認(rèn)給白色
調(diào)改一下后變成如下
相關(guān)樣式
當(dāng)前效果
08-頭部右側(cè)登陸區(qū)-演練-開心首頁-HTML-1003
當(dāng)前
》先做上內(nèi)容
利用a標(biāo)簽來做
》讓文字下來一些
可以利用padding或者利用margin
先看看a盒子的空間
讓盒子下來一些
思考？
如何讓一個(gè)盒子垂直居中？
可以利用定位
top:50%;
transform:translateY(-50%)
1，讓父盒子相對(duì)定位
更正，是父盒子，當(dāng)前要操作.login盒子
它的父盒子是header
讓header相對(duì)定位
2，讓子盒子絕對(duì)定位
讓.login盒子絕對(duì)定位
3，調(diào)一下.login盒子的偏移
距右0
距頂部50%
向上偏移自己高度的一半
》設(shè)置鏈接
文字是白色
來一些間距，填充左右
換行了？a的父盒子空間不夠，不設(shè)空間
給a右邊框
白顏色
鼠標(biāo)移上去文字加粗
去掉a的父底色
修改一下內(nèi)容
》解決掉這里藏著的一根右邊框
利用last-child找到最后一個(gè)a
把它的邊框取消掉
》頭部全部完成
在線咨詢
