网页结构与表现原则

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

  • 先按结构和语义编写代码
  • 然后进行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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css3实现圆角边框渐变

    <button class="border">112233</button>   创建button .border{ position: relative; ...

    就只是小茗
  • CSS深入理解学习笔记之absolute

    1、absolute和float   拥有相同的特性表现:     ①包裹性(容器应用之后,可以包裹里面的内容); 1 <!doctype html> 2 ...

    就只是小茗
  • Canvas 图片绕边旋转的小动画

    /** * 图片绕边旋转的小动画 */ function initDemo10() { var canvas = document.getEleme...

    就只是小茗
  • 详解:42 background-position 记住,是左右上下的顺序的哈

    用户7873631
  • 18.CSS

    选择器 1.标签上直接设置style属性 <p style="color: red">直接标签里面写</p> 2.id选择器 <style> ...

    zhang_derek
  • 14. css3 media响应式样式示例

    在日常的样式编写中,对于浏览器宽度变化的时候,我们为了增加体验,总是需要根据变化进行响应式的样式设置。

    Devops海洋的渔夫
  • CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档。 一、阴影 1....

    张果
  • 【博客美化】08.添加"扩大/缩小浏览区域大小" 按钮

    悟空聊架构
  • border、margin、padding属性的区别

    可以先看下这个视频教程:http://my.tv.sohu.com/us/97014746/64226777.shtml

    跟着阿笨一起玩NET
  • CSS简笔画:纯CSS绘制一艘邮轮

    这里用到了元素水平垂直居中的另外一种方式,让元素绝对定位,然后left/top=50%,然后margin-left/top=负元素宽度的一半,就可以居中了。

    Javanx

扫码关注云+社区

领取腾讯云代金券