网页结构与表现原则

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

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

相关文章

来自专栏从零开始学 Web 前端

简述C和C++的学习历程

总是被问到,如何学习C和C++才不茫然,才不是乱学,想了一下,这里给出一个总的回复。  一家之言,欢迎拍砖哈。 1、可以考虑先学习C. 大多数时候,我们...

1002
来自专栏CDA数据分析师

Python编程语言发展简史

Python是我喜欢的语言,简洁、优美、易用。前两天,我很激昂地向朋友宣传Python的好处。 “好吧,我承认Python不错,但它为什么叫Python呢?” ...

2786
来自专栏何俊林

FFmpeg音视频同步原理与实现

2894
来自专栏函数式编程语言及工具

scala泛函编程是怎样被选中的

      现在计算机技术发展现象是:无论硬件技术如何发展都满足不了软件需求;无论处理器变得能跑多快,都无法满足软件对计算能力的需要。按照摩尔定律(Moore...

2047
来自专栏云时之间

智能体结构

智能体的结构 迄今为止我们通过描述行为—在任何给定的感知序列下采取的行动—讨论了智能体,现在我们不得不将知难而进,去讨论智能体内部是如何工作的,AI的任务是设...

3367
来自专栏Sorrower的专栏

算法怎么玩(一): 从直男到渣男

1482
来自专栏blackheart的专栏

[程序设计语言]-00:目录

1. 开篇概览  前一周写了一篇博文“记-码农的“启蒙”之《程序设计语言-实践之路》和《面向对象分析和设计》两书”,其中说打算总结下这两本书中有哪些收获,就是关...

1925
来自专栏PPV课数据科学社区

数据科学中应该学习哪些语言?

? 简评:原始的数据科学是劳动密集型活动,但当你会用适合的语言进行工作时,数据科学应该是非常智能有趣的工作,会让你得到一些不容易看到的结论。 一般来说,数据科...

2966
来自专栏Python web开发

5本必读Python入门书籍,你都看过吗?(附福利)

今天技术学派为大家准备了5本Python入门书籍,除了书籍小编还整理了3个常用的资源网站分享给大家。

1560
来自专栏PPV课数据科学社区

您知道 ”学习 Python 的三种境界“是什么吗?看~这里有答案!

前言 王国维在《人间词话》中将读书分为了三种境界:“古今之成大事业、大学问者,必经过三种之境界:‘昨夜西风凋碧树,独上高楼,望尽天涯路’。此第一境也。‘衣带渐宽...

2858

扫码关注云+社区