關(guān)于 dis play:block;line -height:28px 大家可以去參閱一下手冊,我就不多講了。
效果基本上已經(jīng)實現(xiàn)了,剩下的就是修改菜單的超鏈接樣式,在 css.css 中添加以下代碼:
#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
#menu ul li a:hover{}
這個也不多說了,沒什么好說的了,最后的效果如下:
這一節(jié)到這里就完畢了
這一節(jié)里面,主要就是想告訴大家如何使用好 borde r 和 cle ar 這兩個屬性。
首先,如果你曾用過 table 制作網(wǎng)頁,你就應(yīng)該知道,如果要在表格中繪制一條虛線該如何做,那需要 制作一個很小的圖片來填充,其實我們還有更簡單的辦法,只要在
大家可以再次參考手冊,然后你就能明白 dashed、solid、dotted...等的作用,利用它們你可以制作出許 多效果來,實線、虛線、雙線、陰影線等等。
以上代碼便可以實現(xiàn)設(shè)計草圖中的 banner,在 css.css 中加入以下樣式:
#banner {
background:url(banner.jpg) 0 30px no-repeat; /*加入背景圖片*/
w idth:730px; /*設(shè)定層的寬度*/
margin:auto; /*層居中*/
height:240px; /*設(shè)定高度*/
border-bottom:5px solid #EFEFEF; /*畫一條淺灰色實線*/
clear:both /*清除浮動*/
}
通過 border 很容易就繪制出一條實線了,并且減少了圖片下載所占用的網(wǎng)絡(luò)資源,使得頁面載入速度
變得更快。
另一個要說明的就是 clear:both,表示清除左、右所有的浮動,在接下來的布局中我們還會用這個屬性: clear:left/right。在這里添加 clear:both 是由于之前的 ul、li 元素設(shè)置了浮動,如果不清除則會影響 banner 層位置的設(shè)定。
![]() | ![]() .. 定價:¥45 優(yōu)惠價:¥42 更多書籍 |
![]() | ![]() .. 定價:¥225 優(yōu)惠價:¥213 更多書籍 |