頁面製做-用好border和clear

這一節裏面，主要就是想告訴你們如何使用好 border和 clear這兩個屬性。
首先，若是你曾用過table製做網頁，你就應該知道，若是要在表格中繪製一條虛線該如何作，那須要製做一個很小的圖片來填充，其實咱們還有更簡單的辦法，只要在中加入這麼一段就能夠了，你能夠試試：
你們能夠再次參考手冊，而後你就能明白dashed、solid、dotted...等的做用，利用它們你能夠製做出許多效果來，實線、虛線、雙線、陰影線等等。
以上代碼即可以實現設計草圖中的banner，在css.css中加入如下樣式：

1. #banner {
   
2. background:url(banner.jpg) 0 30px no-repeat; /*加入背景圖片*/
   
3. width:730px; /*設定層的寬度*/
   
4. margin:auto; /*層居中*/
   
5. height:240px; /*設定高度*/
   
6. border-bottom:5px solid #EFEFEF; /*畫一條淺灰色實線*/
   
7. clear:both /*清除浮動*/
   
8. }

複製代碼

經過border很容易就繪製出一條實線了，而且減小了圖片下載所佔用的網絡資源，使得頁面載入速度變得更快。
另外一個要說明的就是clear:both，表示清除左、右全部的浮動，在接下來的佈局中咱們還會用這個屬性：clear:left/right。在這裏添加clear:both是因爲以前的ul、li元素設置了浮動，若是不清除則會影響banner層位置的設定。




以上是頁面主體部分，咱們在css.css中添加如下樣式：

1. #pagebody {
   
2. width:730px; /*設定寬度*/
   
3. margin:8px auto; /*居中*/
   
4. }
   
5. #sidebar {
   
6. width:160px; /*設定寬度*/
   
7. text-align:left; /*文字左對齊*/
   
8. float:left; /*浮動居左*/
   
9. clear:left; /*不容許左側存在浮動*/
   
10. overflow:hidden; /*超出寬度部分隱藏*/
    
11. }
    
12. #mainbody {
    
13. width:570px;
    
14. text-align:left;
    
15. float:right; /*浮動居右*/
    
16. clear:right; /*不容許右側存在浮動*/
    
17. overflow:hidden
    
18. }

複製代碼

爲了能夠查看到效果，建議在#sidebar和#mainbody中加入如下代碼，預覽完成後能夠刪除這段代碼：
border:1px solid #E00;
height:200px
保存預覽效果，能夠發現這兩個層完美的浮動，在達到了咱們佈局的要求，而兩個層的實際寬度應該160+2(border)+570+2=734px，已經 超出了父層的寬度，因爲clear的緣由，這兩個層纔不會出現錯位的狀況，這樣可使咱們佈局的頁面不會由於內容太長而致使錯位。
而以後添加的overflow:hidden則能夠 使內容太長（例如圖片）的部份自動被隱藏。一般咱們會看到一些網頁在載入時，因爲圖片太大，致使佈局被撐開，直到頁面下載完成才恢復正常，經過添加overflow:hidden就能夠解決這個問題。 CSS中每個屬性運用得當，就能夠解決許多問題，或許它們與你在佈局的頁並無太大的關係，可是你必須知道這些屬性的做用，在遇到難題的時候，能夠嘗試使用這些屬性去解決問題。