网页结构与表现原则
时间:2022-05-03
本文章向大家介绍网页结构与表现原则,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
网页的结构与表现原则总的来说为:
- 先按结构和语义编写代码
- 然后进行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>
- 深入探讨ASP.NET MVC的筛选器
- pytorch自然语言处理之Pooling层的句子分类
- su命令cannot set groups: Operation not permitted的解决方法
- 利用腾讯云 COS 云对象存储定时远程备份网站
- 腾讯云技术公开课:零基础入门高可用云端架构设计
- 包学会之浅入浅出Vue.js:开学篇
- 包学会之浅入浅出Vue.js:升学篇
- 一个只有99行代码的JS流程框架 (一)
- 【腾讯云的1001种玩法】试用腾讯云 Windows Server 2012 R2 镜像的几点经验分享
- 一个只有99行代码的JS流程框架(二)
- 看书的时候如何调试书中简单的C+代码?
- gcForest 集成学习方法的 Python 实现
- 云端架构师养成系列之一:高性能云硬盘入门与实战(视频)
- 云端架构师养成系列之二:云端负载均衡上手与实践
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何入门使用腾讯云物联网开发平台 IoT Explorer,开发一盏智慧城市的智能灯?
- 知道吗?容器镜像也可以延迟拉取!
- ansible超详细讲解,值得收藏
- 实战渗透 - 一个怎么够?我全都要!
- 详解 Numpy 中的视图和副本
- 详解 matplotlib 中的两种标注方法
- 混搭 TypeScript + GraphQL + DI + Decorator 风格写 Node.js 应用
- 彻底搞懂闭包,柯里化,手写代码,金九银十不再丢分!
- Kubernetes控制器--副本集ReplicaSet
- Awesome Kubernetes 系列:第一期
- Mongodb多键索引之数组文档
- 在 Cocos Creator 里画个炫酷的雷达图
- 用shader做一个柿子颜色的过场动画
- mysql 找出最新时间的一条数据
- 【NPM库】- 0x05 - 文件、路径操作