网页结构与表现原则

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

  • 先按结构和语义编写代码
  • 然后进行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 条评论
登录 后参与评论

相关文章

来自专栏小狼的世界

Firefox 3.5发布

 介绍:Firefox 3.5基于Gecko 1.9.1渲染平台,提供了许多新的技术、改进了易用性、增强了表现,显著的特点包括

723
来自专栏理论坞

【教程】C4D文字线立体体现

762
来自专栏逸鹏说道

基于HTML的PDF展示 pdf.js

很不错的一个插件,推荐给大家 pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持。 ? 在线演示:http://...

3368
来自专栏重庆的技术分享区

前端学习之路(从入门到...)

互联网的快速发展和激烈竞争,用户体验成为一个重要的关注点,导致专业前端工程师成为热门职业,各大公司对前端工程师的需求量都很大,要求也越来越高,优秀的前端工程师更...

49317
来自专栏程序人生 阅读快乐

HTML5实战

作为Web开发领域里发展最快的技术之一,HTML5凭借其动态特性及跨平台特性日益成为程序设计领域备受推崇的语言。作为一门新兴语言,HTML5的应用范畴远远不止移...

642
来自专栏phodal

关于前端你应该知道的几件事

文章来源于我对知乎的一个相关问题的回答。 JavaScript是最流行的编程语言,除此还有Java。 ? 如Tiobe所说: ? JavaScript...

1819
来自专栏草根博客站长有话说

Typecho 下谷歌 AdSense 文章内嵌广告体验

昨天明月将本博客“文章页脚广告位”的广告更换为了谷歌 AdSense “文章内嵌广告”,本来是想用“匹配内容”的,可惜iMydl.tech目前还没有达到“匹配内...

1464
来自专栏Sign

动作游戏中的碰撞系统

对于熟悉动作游戏系统制作的玩家来说,这个应该算是常识了,不过还是写一下吧。 毕竟,可能有些同学还没看过。 在动作游戏里,角色的『图』与实际产生的效果是不完全对等...

35716
来自专栏灯塔大数据

四款JavaScript库,助您搞定数据分析与可视化

无论来自哪个行业,世界各地的企业都开始越来越多地意识到数据驱动型决策的重要意义。数据分析目前已经成为各行各业最为关注的议题之一,企业亦开始专注于从数据中获取有...

3016
来自专栏张善友的专栏

Balder 3D Engine for Silverlight

Silverlight在微软的产品特性中是没有3D功能的,但是开源社区的力量是强大的,现在有一个开源项目来实现这个功能,项目名称叫做Balder,网址是:htt...

1868

扫码关注云+社区