非常漂亮的Div+CSS布局入門教程
這一節(jié)里面,主要就是想告訴大家如何使用好border和clear這兩個(gè)屬性。
首先,如果你曾用過table制作網(wǎng)頁,你就應(yīng)該知道,如果要在表格中繪制一條虛線該如何做,那需要制作一個(gè)很小的圖片來填充,其實(shí)我們還有更簡單的辦法,只要在<td></td>中加入這么一段就可以了,你可以試試:
<div style="border-bottom:1px dashed #ccc"></div>
大家可以再次參考手冊(cè),然后你就能明白dashed、solid、dotted...等的作用,利用它們你可以制作出許多效果來,實(shí)線、虛線、雙線、陰影線等等。
<div id="banner"></div>
以上代碼便可以實(shí)現(xiàn)設(shè)計(jì)草圖中的banner,在css.css中加入以下樣式:
#banner {
background:url(banner.jpg) 0 30px no-repeat; /*加入背景圖片*/
width:730px; /*設(shè)定層的寬度*/
margin:auto; /*層居中*/
height:240px; /*設(shè)定高度*/
border-bottom:5px solid #EFEFEF; /*畫一條淺灰色實(shí)線*/
clear:both /*清除浮動(dòng)*/
}
通過border很容易就繪制出一條實(shí)線了,并且減少了圖片下載所占用的網(wǎng)絡(luò)資源,使得頁面載入速度變得更快。
另一個(gè)要說明的就是clear:both,表示清除左、右所有的浮動(dòng),在接下來的布局中我們還會(huì)用這個(gè)屬性:clear:left/right。在這里添加clear:both是由于之前的ul、li元素設(shè)置了浮動(dòng),如果不清除則會(huì)影響banner層位置的設(shè)定。
<div id="pagebody"><!--頁面主體-->
<div id="sidebar"><!--側(cè)邊欄-->
</div>
<div id="mainbody"><!--主體內(nèi)容-->
</div>
</div>
以上是頁面主體部分,我們?cè)赾ss.css中添加以下樣式:
#pagebody {
width:730px; /*設(shè)定寬度*/
margin:8px auto; /*居中*/
}
#sidebar {
width:160px; /*設(shè)定寬度*/
text-align:left; /*文字左對(duì)齊*/
float:left; /*浮動(dòng)居左*/
clear:left; /*不允許左側(cè)存在浮動(dòng)*/
overflow:hidden; /*超出寬度部分隱藏*/
}
#mainbody {
width:570px;
text-align:left;
float:right; /*浮動(dòng)居右*/
clear:right; /*不允許右側(cè)存在浮動(dòng)*/
overflow:hidden
}
為了可以查看到效果,建議在#sidebar和#mainbody中加入以下代碼,預(yù)覽完成后可以刪除這段代碼:
border:1px solid #E00;
height:200px
保存預(yù)覽效果,可以發(fā)現(xiàn)這兩個(gè)層完美的浮動(dòng),在達(dá)到了我們布局的要求,而兩個(gè)層的實(shí)際寬度應(yīng)該160+2(border)+570+2=734px,已經(jīng)超出了父層的寬度,由于clear的原因,這兩個(gè)層才不會(huì)出現(xiàn)錯(cuò)位的情況,這樣可以使我們布局的頁面不會(huì)因?yàn)閮?nèi)容太長(例如圖片)而導(dǎo)致錯(cuò)位。
而之后添加的overflow:hidden則可以使內(nèi)容太長(例如圖片)的部份自動(dòng)被隱藏。通常我們會(huì)看到一些網(wǎng)頁在載入時(shí),由于圖片太大,導(dǎo)致布局被撐開,直到頁面下載完成才恢復(fù)正常,通過添加overflow:hidden就可以解決這個(gè)問題。
CSS中每一個(gè)屬性運(yùn)用得當(dāng),就可以解決許多問題,或許它們與你在布局的頁并沒有太大的關(guān)系,但是你必須知道這些屬性的作用,在遇到難題的時(shí)候,可以嘗試使用這些屬性去解決問題。
相關(guān)文章
DIV+CSS作網(wǎng)頁容易犯的錯(cuò)誤小結(jié)
DIV+CSS作網(wǎng)頁容易犯的錯(cuò)誤小結(jié)...2007-11-11用<TABLE>語句來實(shí)現(xiàn)圓角表格可以省去制作圓角圖片之苦!
用<TABLE>語句來實(shí)現(xiàn)圓角表格可以省去制作圓角圖片之苦!...2007-04-04動(dòng)態(tài)更改網(wǎng)頁HTML元素(對(duì)象)內(nèi)容
動(dòng)態(tài)更改網(wǎng)頁HTML元素(對(duì)象)內(nèi)容...2006-11-11讓IE ff Opera同時(shí)支持Alpha透明的方法
圖片的透明效果是網(wǎng)頁中需要用到的一種特殊形式,雖然不是非常的常用,但是遇到這樣的需求往往有點(diǎn)措手不及。2008-09-09提高網(wǎng)頁的效率 Use YSlow to know why your web Slow
內(nèi)容再豐富的網(wǎng)站,如果慢到無法訪問也是毫無意義的; SEO做的再好的網(wǎng)站,如果搜索蜘蛛抓不到也是白搭(頁面效率和搜索蜘蛛之間的關(guān)系,需要進(jìn)一步的確認(rèn),此為和上篇保持統(tǒng)一); UE設(shè)計(jì)的再人性化的網(wǎng)站,如果用戶連看都看不到也是空談。2008-09-09