网页结构与表现原则

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

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

相关文章

来自专栏更流畅、简洁的软件开发方式

设计上的8/2原则,您实现了吗?实现后会是什么样子的呢?

最近做项目感觉很累很累,先自我分析一下吧。(但愿不要给大家一个“阴天”的感觉) 先明确一下我理解的“设计”的范围。一定要先说明一下,否则容易混淆。 一般做...

1819
来自专栏Crossin的编程教室

21天精通编程

各位愚人节快乐! 在目前的科技条件下,21天精通一门编程语言是不可能滴。 不过21天入门 Python,了解编程,学会写几个小程序,倒是不断在我们的教室中发生着...

2776
来自专栏企鹅号快讯

三年后,人工智能将彻底改变前端开发?

关键时刻,第一时间送达! 近几天,因为阮一峰老师的一条微博,我们看到了这样一个项目:https://weibo.com/1400854834/FE1Tz8TIB...

2086
来自专栏技术总结

有没有一个最好的方法来成为一个iOS开发人员?

1697
来自专栏九彩拼盘的叨叨叨

前端共同成长小组 学习流程

如果你对前端有些了解,进入 知识点列表页(待做),自主选择要学习的知识点。点这里。

704
来自专栏数说工作室

特征选择怎么选? | 讨论

想构建一个模型,几十万行数据、400多变量,怎么选? (1)全部塞进去 模型运行慢,一不小心跑一个月能受得了?更关键塞进了那么多无效变量,效果肯定也不好啊。...

3456
来自专栏phodal

荐书《遗留系统:重建实战》:当你面对一坨代码时,你应该这么做

大多数开发人员的主要时间都是花费在与现有的软件打交道上,而不是编写全新的应用程序。 这就意味着,我经常要遇到很多我写的 shit 一样的代码,你经常要遇到很多你...

3384
来自专栏云时之间

什么是自编码?

各位小伙伴们,大家好,今天让我们来如何用神经网络来处理非监督的学习,也就是AutoEncoder,自编码。 首先,我们听到自编码,一定会想到,AutoEncod...

33810
来自专栏汇智网教程

vue教程推荐

2152
来自专栏JAVA高级架构

阿里面试题总结

771

扫描关注云+社区