フロントエンドページレイアウトに関するいくつかの説明

Web ページの構造とパフォーマンスの原則は一般に次のとおりです:

• 最初に構造とセマンティクスに従ってコードを記述します

• 次に CSS スタイルを設定します

• HTML と CSS の間の適合性を減らします (単純化します)ページ構造)

この原理は、Weibo ユーザーの音声情報のリストを作成するケースを通じて分析できます。このケースの全体的な実装効果は次のとおりです:

初心者の観点から:

初心者は多くの場合、この構造を複数の 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 中国語 Web サイトの他の関連記事を参照してください。