1、通過使用簡潔的、語義化的HTML和CSS代碼，可以提高網站的易讀性和可用性。 巢狀表格格會增加相當多的冗餘HTML代碼。
2、增加文字大小始終是測試設計靈活度的好方法，它不僅可以讓您直觀的感受到如何在大字型的情況下保持頁面的可讀性，還能支出設計方案是否能夠良好的適應任何字型大小，以及任何數量的常值內容。
3、在構建代碼時，我們首先要看它所包含的內容資訊，採用哪些HTML對象來表示才能最好的體現其意義，然後選擇出最合適的HTML結構。
4、 推薦字型使用Helvetica，絕大多數蘋果系統的使用者都安裝了Helvetica字型，這給他們帶來了很好的使用體驗，因此應將Helvetiva字型列在最前面，Arial字型作為備用。
如 body{font-family:Helvetica,Arial,sans-serif;}大多數使用者很難發現兩種字型的差別。
5、加上了clear：both;規則，使得它上面的行中所加的浮動規則對它不造成影響。
6、當<li>元素浮動之後，我們注意到ul的背景消失了，是因為當浮動某個對象內的對象時，我們使它們脫離了正常的文檔內容布局流，因此，對於包圍<li>的對象<ul>來說，就好像列表實際不存在。結果是，<ul>無法得知它應該按照多高和多寬的尺寸來顯示出它的背景色。
解決辦法：必須讓ul和它的兩個列表一起浮動，此外，需要給它賦予一個width屬性，以確保這個行能夠按照我們的本意佔據整個頁寬。大多數瀏覽器是嚴格按照字面意思來處理css2.0規範的：“一個被浮動的框式組件必須要具有明確的寬度值”。如果這裡不指定，那麼這一行的寬度將會僅僅和其內容所要求的寬度一樣。
7、對於一些提示性的小表徵圖，可以直接將圖片加在HTML代碼中，但是為了方便以後的修改，並且不在文檔結構中加上不必要的圖片，我們可以通過在CSS中設定背景圖片的方式來加上它們。
以下代碼使得表徵圖能夠置中顯示在預留的padding處。
background: url(search.gif) no-repeat 0 50%;
8、針對IE7的修改：網頁的第二行在IE7中瀏覽，會發現文字的上方有一條莫名其妙的縫隙，這是IE7自動加上去的，其他的主流瀏覽器包括IE6並不是這樣。
正常顯示如下：
IE7的顯示如下：
解決辦法： 在div的css中加上 float:left;width:100%; 這樣就發現在IE7中顯示也正常了。
最後總結：
書中代碼實現如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>無標題文檔</title> 6 7 <style type="text/css"> 8 body,div,ul,li,p,a{ 9 margin:0;10 padding:0;11 }12 body{13 font-family:微軟雅黑,"Microsoft YaHei",Helvetica,Arial;14 font-size:1em;15 16 }17 18 #register{19 float:left;20 width:100%;21 color:#690;22 list-style: none;23 background-color: #8CCA12;24 }25 26 a{27 text-decoration: none;28 color:#360;29 }30 #msg{31 float:left;32 width:100%;33 text-align: center;34 clear:both;35 color:#fff;36 font-size:110%;37 font-weight: bold;38 background: #66A300 url(./bottom.gif) no-repeat bottom left;39 }40 41 #msg p{42 padding:8px 14px;43 background: url(top.gif) no-repeat top left;44 }45 #reg{46 float:left;47 padding: 8px 14px;48 }49 50 #find{51 float:right;52 padding: 8px 14px; 53 background: url(search.gif) no-repeat 0 50%; 54 }55 </style>56 </head>57 <body>58 <ul id="register">59 <li id="reg">還沒註冊？現在就<a href="#">註冊</a> </li>60 <li id="find"><a href="#">搜尋</a></li>61 </ul>62 <div id="msg">63 <p>我只是試一試這種<a href="#">方法</a></p>64 </div>65 66 </body>67 </html>
書中還介紹了一種圓角邊框的實現方法，但是我不推薦使用，對於不同解析度的電腦，這種方法相容性不好，所以就不在這裡詳細記錄了。
一般情況下如果需要行可以擴充，則把背景分成上下兩部分，中間過渡到同一種背景色，這樣的話就可以達到效果。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
