首页 > > 网页制作 > css >

网页结构与表现原则

2018-06-24 01:37:39来源：未知阅读 ()

网页的结构与表现原则总的来说为：

先按结构和语义编写代码
然后进行CSS样式设置
减少HTML与CSS契合度（精简页面结构）

我们可以通过一个微博用户发言信息列表的制作案例来分析该原则。以下是该案例的整体实现效果：

从初学者的角度来看：

初学者往往会将这个结构分成多个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>