關於前端頁面佈局的幾點解說

網頁的結構與表現原則總的來說為：

• 先以結構與語意寫程式碼

• 然後再進行CSS樣式設定

• 減少HTML與CSS契合度（精簡頁面結構）

我們可以透過一個微博使用者發言資訊清單的製作案例來分析該原則。以下是此案例的整體實作效果：

 

#從初學者的角度來看：

#初學者往往會將這個結構分成多個DIV，看起來基本上就是以下幾塊：

#實作程式碼：

 1 nbsp;html> 2  3  4     <meta> 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 16 17     <div>18         <div>19             <img  src="/static/imghwm/default1.png" data-src="http://v1.qzone.cc/avatar/201311/12/02/54/528127ffc047e093.jpg%21200x200.jpg" class="lazy" alt="關於前端頁面佈局的幾點解說" >20         </div>21         <div>22             <span>10分钟之前</span>23             <h6 id="歪嘴的肖恩">歪嘴的肖恩</h6>24             <p>老师一直强调的是代码的简洁，减少代码的冗余，理论上确实应该如此，但是过于简洁的代码有可能对后期的优化维护造成一定难度，这是一个相互矛盾的方向，我觉得重要的是宝把握好这个度</p>25         </div>26     </div>27 28 

#從中階前端的角度來看：

左邊的圖片所在的DIV是可以省略的，就變成這樣幾塊：

實作程式碼：

 1 nbsp;html> 2  3  4     <meta> 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 16 17     <div>18         <img  src="/static/imghwm/default1.png" data-src="http://v1.qzone.cc/avatar/201311/12/02/54/528127ffc047e093.jpg%21200x200.jpg" class="lazy" alt="關於前端頁面佈局的幾點解說" >19         <div>20             <span>10分钟之前</span>21             <h6 id="歪嘴的肖恩">歪嘴的肖恩</h6>22             <p>老师一直强调的是代码的简洁，减少代码的冗余，理论上确实应该如此，但是过于简洁的代码有可能对后期的优化维护造成一定难度，这是一个相互矛盾的方向，我觉得重要的是宝把握好这个度</p>23         </div>24     </div>25 26 

從高階前端的角度來看：

 所有的元素放在一個DIV中，結構更簡單了，單純的將圖片移出來：

 實作程式碼：

 1 nbsp;html> 2  3  4     <meta> 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 16 17     <div>18         <img  src="/static/imghwm/default1.png" data-src="http://v1.qzone.cc/avatar/201311/12/02/54/528127ffc047e093.jpg%21200x200.jpg" class="lazy" alt="關於前端頁面佈局的幾點解說" >19         <span>10分钟之前</span>20         <h6 id="歪嘴的肖恩">歪嘴的肖恩</h6>21         <p>老师一直强调的是代码的简洁，减少代码的冗余，理论上确实应该如此，但是过于简洁的代码有可能对后期的优化维护造成一定难度，这是一个相互矛盾的方向，我觉得重要的是宝把握好这个度</p>22     </div>23 24 

# 

以上是關於前端頁面佈局的幾點解說的詳細內容。更多資訊請關注PHP中文網其他相關文章！