首頁 > 開發者 > JavaScript
網頁結構與表現原則，網頁結構表現原則
網頁的結構與表現原則總的來說為：
我們可以通過一個微博使用者發言資訊列表的製作案例來分析該原則。以下是該案例的整體實現效果：
從初學者的角度來看：
初學者往往會將這個結構分成多個DIV，看起來基本上就是以下幾塊：
實現代碼：
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <title>test</title> 6 <style> 7 *{margin:0; padding:0;} 8 img{width: 80px; height: auto;} 9 span{color: #ccc;float: right;font-size: 12px;}10 p{overflow: hidden;}11 12 #demo1 .left{float: left; width: 160px; text-align: center;}13 #demo1 .right{width: 440px; padding: 20px; margin-left: 160px;background-color: #dafffb; border: 1px solid #ccc;}14 </style>15 </head>16 <body>17 <div id="demo1">18 <div class="left">19 <img src="http://v1.qzone.cc/avatar/201311/12/02/54/528127ffc047e093.jpg%21200x200.jpg" alt="頭像">20 </div>21 <div class="right">22 <span>10分鐘之前</span>23 <h6>歪嘴的肖恩</h6>24 <p>老師一直強調的是代碼的簡潔，減少代碼的冗餘，理論上確實應該如此，但是過於簡潔的代碼有可能對後期的最佳化維護造成一定難度，這是一個相互矛盾的方向，我覺得重要的是寶把握好這個度</p>25 </div>26 </div>27 </body>28 </html>
從中級前端的角度來看：
左邊的圖片所在的DIV是可以省略的，就變成這樣幾塊：
實現代碼：
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <title>test</title> 6 <style> 7 *{margin:0; padding:0;} 8 img{width: 80px; height: auto;} 9 span{color: #ccc;float: right;font-size: 12px;}10 p{overflow: hidden;}11 12 #demo2 img{float: left;margin-left: 40px;}13 #demo2 .right{width: 440px; padding: 20px; margin-left: 160px;background-color: #dafffb; border: 1px solid #ccc;}14 </style>15 </head>16 <body>17 <div id="demo2">18 <img src="http://v1.qzone.cc/avatar/201311/12/02/54/528127ffc047e093.jpg%21200x200.jpg" alt="頭像">19 <div class="right">20 <span>10分鐘之前</span>21 <h6>歪嘴的肖恩</h6>22 <p>老師一直強調的是代碼的簡潔，減少代碼的冗餘，理論上確實應該如此，但是過於簡潔的代碼有可能對後期的最佳化維護造成一定難度，這是一個相互矛盾的方向，我覺得重要的是寶把握好這個度</p>23 </div>24 </div>25 </body>26 </html>
從進階前端的角度來看：
所有的元素放在一個DIV中，結構更簡單了，單純的將圖片移出來：
實現代碼：
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <title>test</title> 6 <style> 7 *{margin:0; padding:0;} 8 img{width: 80px; height: auto;} 9 span{color: #ccc;float: right;font-size: 12px;}10 p{overflow: hidden;}11 12 #demo3{width: 440px; padding: 20px; margin-left: 160px;background-color: #dafffb; border: 1px solid #ccc;}13 #demo3 img{float: left;margin: -20px 0 0 -140px;}14 </style>15 </head>16 <body>17 <div id="demo3">18 <img src="http://v1.qzone.cc/avatar/201311/12/02/54/528127ffc047e093.jpg%21200x200.jpg" alt="頭像">19 <span>10分鐘之前</span>20 <h6>歪嘴的肖恩</h6>21 <p>老師一直強調的是代碼的簡潔，減少代碼的冗餘，理論上確實應該如此，但是過於簡潔的代碼有可能對後期的最佳化維護造成一定難度，這是一個相互矛盾的方向，我覺得重要的是寶把握好這個度</p>22 </div>23 </body>24 </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
