開心網(wǎng)案例 游戲菜單導(dǎo)航制作 html 1003

時(shí)間：2023-07-24 21:03:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-24 21:03:01 來源：網(wǎng)站運(yùn)營(yíng)

開心網(wǎng)案例 游戲菜單導(dǎo)航制作 html 1003：

11 游戲?qū)Ш阶笥液凶又谱?演練 開心網(wǎng)首頁(yè)的布局與制作 1003

開始這個(gè)的制作










先量出左右盒子的寬度







190寬，左浮動(dòng)







520寬，右浮動(dòng)

220高







》做一個(gè)盒子放游戲的目錄

.first_line

我們?cè)诤凶永锓帕俗筮吪c右邊的容器







》讓first_line盒子底色可見

目的是查看它的狀態(tài)變化




給了一個(gè)灰色







》讓目錄與輪播浮動(dòng)

一個(gè)左浮，一個(gè)右浮










》清除浮動(dòng)

父盒子底色，灰色不見了

原因？




子容器全浮動(dòng)了

父容器感知不到子的存在

需要清除浮動(dòng)




辦法：

寫一個(gè)清除浮動(dòng)的樣式

clearfix







樣式寫好后給父級(jí)添加上就好




這樣父的盒子會(huì)被浮動(dòng)的子級(jí)撐開高度







》給浮動(dòng)的子級(jí)設(shè)置寬度

width: 190px;

12 左游戲菜單制作 演練 開心網(wǎng)首頁(yè)的布局與制作 1003

目標(biāo)










》做一個(gè)有七列的列表










》讓單元格具有漸變色

先給高度

再給淺變色

行高 26




顏色淺變

#fcfcfc410.

#eaeaea

#f0eeef







》li里面的布局










》先來一個(gè)右浮的>

來點(diǎn)右邊距







結(jié)果










》讓文字在li中垂直居中







》箭頭的顏色

別人的按鈕是個(gè)圖片

我們的按鈕自己做出來的

效果差不多即可

顏色




#dadadb

13 列表文字與圖片 演練 開心網(wǎng)首頁(yè)的布局與制作 1003

》先上背景圖片

在li里添加背景

經(jīng)測(cè)試，發(fā)現(xiàn)

背景圖片與淺變顏色不兼容








》改變策略，插入圖片







讓圖片垂直居中







》左邊來一點(diǎn)間距

可考慮給li一點(diǎn)左填充










我們的左填充并不會(huì)影響li盒子的大小

因?yàn)閘i沒有給寬度

所以不會(huì)影響布局




》讓圖片與文字間距離再大一些

給img一個(gè)右邊距










》給鼠標(biāo)劃過li一個(gè)樣式

水平向右的漸變色




#ed9774




#cf4916










》其它內(nèi)容進(jìn)行替代







》左側(cè)游戲列表結(jié)構(gòu)完成

空余的時(shí)間

把圖片，把文字占位的內(nèi)容進(jìn)行一個(gè)替代即可

14 列表的邊框與圓角 演練 開心網(wǎng)首頁(yè)的布局與制作 1003

》列表的邊框

給哪個(gè)加？

ul包的li

給ul加邊框




邊框色

#cccccc










》圓角




給ul一個(gè)圓角的效果




四面都是圓角













》超出ul的全部隱藏

overflow

hidden










》把看效果的底色可去掉

15 輪播圖盒子制作 演練 開心網(wǎng)首頁(yè)的布局與制作 1003

》寬度

520 * 195

大約是這樣的




》布局











》完成ul li img的布局










》調(diào)圖片大小

寬給100%




》給圖一個(gè)高

發(fā)現(xiàn)不用給高也可以

原因

如果只給了圖片一個(gè)寬度

那么高度會(huì)等比縮放







》下一個(gè)目標(biāo)，制作

16 懸浮的圓形按鈕 演練 開心網(wǎng)首頁(yè)的布局與制作 1003 HTML

》先做一個(gè)無序列表







》讓這個(gè)ul定位，相對(duì)于父盒子定個(gè)位

ul絕對(duì)定位

div相對(duì)定位










》讓li浮動(dòng)起來













》讓他們有底色

設(shè)置為正方形

變成圓形

讓文字有顏色










》文字位置 間距

文字白色

文本居中







》讓這些小圓形到右下角去

利用定位，相對(duì)于父級(jí)

向右，向下

控制偏移







這些數(shù)據(jù)是通過調(diào)試階段獲取的

17 選中的數(shù)字樣式 演練 開心網(wǎng)首頁(yè)的布局與制作 1003 HTML

》做一個(gè)選中狀態(tài)的樣式

.active




》假設(shè)第一個(gè)li具有active樣式




具有的背景色

#b51c16










》去掉底色