對導(dǎo)航欄、列表進(jìn)行細(xì)節(jié)優(yōu)化

1.導(dǎo)航欄

初稿我們的樣式中，導(dǎo)航欄的顯示效果并不完美，logo 位置正常，但是顯然后側(cè)的文字效果并未實(shí)現(xiàn)精準(zhǔn)定位，首先給出實(shí)現(xiàn)后的樣式效果，清除需要優(yōu)化的位置

圖像位置定位

分析源碼可知，初稿中將 img-logo 和 container 合并布局，造成無法留出間隔距離的情況

這次我們單獨(dú)布局并設(shè)置浮動效果，留出間隔

index-nav.html

在原來單獨(dú)的 img 標(biāo)簽嵌套格式中，為 img 標(biāo)簽添加 h1 標(biāo)簽，并一定注意顯示模式的轉(zhuǎn)換，否則后側(cè)文字會靠下顯示（如圖）

css-nav.css

注釋掉的顏色方便我們實(shí)現(xiàn)精準(zhǔn)定位，清除標(biāo)簽的位置，定位完成后注釋掉即可，可以當(dāng)做小技巧來用

/* 導(dǎo)航 */ .nav { float: left; width: 1680px; height: 40px; background-color: #2b303b; /* background-color: orange; */ } .nav h1 { /* 不轉(zhuǎn)換 h1 顯示模式 后面 container 會換行顯示 */ display: inline-block; padding-left: 240px; } .nav .container { float: right; display: inline-block; margin-right: 250px; width: 638px; height: 40px; /* background-color: red; */ }

優(yōu)化位置示意

2.列表裝飾元素

不知道大家有沒有發(fā)現(xiàn)，Tencent-logo 下方列表對應(yīng)字體后方有個裝飾性的小標(biāo)簽，英文狀態(tài)下的 > 符號，初稿使用偽元素實(shí)現(xiàn)，但是裝飾元素和字體間的距離并沒有控制

今天換一種思路解決該問題

在字體后添加裝飾元素：英文狀態(tài)下的 > 符號，添加浮動效果，設(shè)置 margin-right 尺寸即可

top-list.html

不再使用偽元素控制，更新為添加 float:right 浮動

top-list.css

控制浮動、邊距尺寸

量取邊距像素值

.top .list span { float: right; margin-right: 21px; }

css 更新位置

實(shí)現(xiàn)效果

兩處細(xì)節(jié)優(yōu)化完成 ing~

CSS HTML

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。