Home > Article > Web Front-end > Some explanations about front-end page layout
Some explanations about front-end page layout
- 巴扎黑Original
- 2017-07-19 16:43:261385browse
The structure and performance principles of web pages are generally as follows:
First write the code according to the structure and semantics
Then perform CSS styling Settings
Reduce the fit between HTML and CSS (simplify the page structure)
We can use a case of making a list of Weibo user speech information Analyze this principle. The following is the overall implementation effect of this case:
From a beginner’s perspective:
Beginners often divide this structure into multiple DIVs, which basically look like the following blocks:
Implementation code:
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>From the perspective of the intermediate front-end:
The DIV where the picture on the left is located can be omitted, and it becomes like this:
Implementation code:
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>From an advanced front-end perspective:
All elements are placed in a DIV. The structure is simpler, just move the picture out:
Implementation code:
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>
The above is the detailed content of Some explanations about front-end page layout. For more information, please follow other related articles on the PHP Chinese website!