网页简单布局之结构与表现原则（HTML/CSS）
结构 样式 行为真正的分离
- 前端初级人员会在页面上单纯的用各个div把相关内容独立开；
- 前端中级人员明白相关属性的设置会给元素带来什么改变，从而减少div的书写；
- 前端高级人员会以及其简单的和稳定的方式实现相应的效果。
代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.demo1 {
height: 300px;
width: 500px;
padding: 5px;
}
.demo1 .left {
float: left;
height: 280px;
width: 180px;
}
.demo1 .left img {
background: blue;
height: 50px;
width: 50px;
}
.demo1 .right {
float: right;
height: 280px;
width: 256px;
border: 1px solid green;
} .demo2 {
height: 300px;
width: 500px;
padding: 5px;
}
.demo2 img {
float: left;
background: blue;
height: 50px;
width: 50px;
}
.demo2 .right {
float: right;
height: 280px;
width: 256px;
border: 1px solid green;
} .demo3 {
height: 300px;
width: 450px;
padding: 5px;
margin-left: 50px;
}
.demo3 img {
float: left;
margin: 10px 0 0 -50px;
background: blue;
height: 50px;
width: 50px;
}
.demo3 p {
float: right;
height: 280px;
width: 256px;
border: 1px solid green;
}
</style>
</head>
<body>
<!--初级-->
<div class="demo1">
<div class="left">
<img src="" alt="" />
</div>
<div class="right">
<p>内容</p>
</div>
</div>
<br />
<!--中级-->
<div class="demo2">
<img src="" alt="" />
<div class="right">
<p>内容</p>
</div>
</div>
<br />
<!--高级-->
<div class="demo3">
<img src="" alt="" />
<p>内容</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*公共样式*/ body {
padding-top: 50px;
line-height: 20px
}
.userPic {
padding: 5px;
border: 1px #ccc solid
}
.demo01,
.demo02 {
margin-bottom: 20px
}
p {
text-indent: 2em
}
/*初级*/ .demo01 {
width: 600px;
overflow: hidden
}
.demo01 .left {
width: 100px;
float: left
}
.demo01 .left .userPic {
margin-left: 20px
}
.demo01 .right {
width: 458px;
float: right;
padding: 20px;
background-color: #EEF7FF;
border: 1px solid #CCC
}
.demo01 .right h6 {
margin-bottom: 5px
}
.demo01 .right .pubTime {
float: right;
color: #999;
margin-top: -8px
}
/*中级*/ .demo02 {
width: 600px;
overflow: hidden
}
.demo02 .userPic {
float: left;
margin-left: 20px
}
.demo02 .right {
width: 458px;
float: right;
padding: 20px;
background-color: #EEF7FF;
border: 1px solid #CCC
}
.demo02 .right h6 {
margin-bottom: 5px
}
.demo02 .right .pubTime {
float: right;
color: #999;
margin-top: -8px
}
/*高级*/ .demo03 {
width: 460px;
padding: 20px;
position: relative;
background-color: #EEF7FF;
border: 1px solid #CCC;
margin-left: 100px
}
.demo03 h6 {
margin-bottom: 5px
}
.demo03 .dialog p {
text-indent: 2em;
line-height: 20px
}
.demo03 .userPic {
float: left;
margin: -20px 0 0 -100px
}
.demo03 .pubTime {
position: absolute;
top: 10px;
right: 20px;
color: #999;
}
</style>
</head> <body>
<!---demo01----------------------------------->
<div class="demo01">
<div class="left">
<img class="userPic" src="data:images/head01.jpg" width="50" height="50" />
</div> <div class="right">
<span class="pubTime">10分钟前</span>
<h6>樱桃小丸子</h6>
<p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
</div>
</div> <!---demo02----------------------------------->
<div class="demo02">
<img class="userPic" src="data:images/head01.jpg" width="50" height="50" />
<div class="right">
<span class="pubTime">10分钟前</span>
<h6>樱桃小丸子</h6>
<p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
</div>
</div> <!---demo03----------------------------------->
<div class="demo03">
<img class="userPic" src="data:images/head01.jpg" width="50" height="50" />
<h5>樱桃小丸子</h5>
<p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>
<span class="pubTime">10分钟前</span>
</div> </body>
</html>
在网页制作中，面对设计图，网页制作人员一般要遵循的原则是什么？
先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，然后考虑布局和表现形式。
网页简单布局之结构与表现原则（HTML/CSS）的更多相关文章
- 一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则
结构.表现和行为分离,不仅是一项技术,更主要的是一种思想,当我们拿到一个网页时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式.,减少HTML与 ...
- HTML+CSS结构与表现原则
CSS网页布局即版式布局,是网页设计师将有限的视觉元素进行有机的排列组合.主要通过CSS的浮动.定位功能来实现UI设计的布局要求. 常见的布局有:一列布局,两列布局,三列布局和混合布局. HTML清除 ...
- IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势
标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...
- WPF简单布局 浅尝辄止
WPF的窗口只能包含一个元素,为了在WPF窗口中放置多个元素并创建更实用的用户界面,需要在窗口上放置一个容器,然后在容器中放置其它元素. 注意:造成这一限制的原因是window类继承自 ...
- 如何优化你的布局层级结构之RelativeLayout和LinearLayout及FrameLayout性能分析
转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/51159419 如何优化你的布局层级结构之RelativeLayout和LinearLa ...
- aspx网页相对布局
网页的布局 <body bgcolor="#b6b7bc"> <form id="form1" runat="server" ...
- C# 网络编程之网页简单下载实现
这是根据<C#网络编程实例教程>中学到的知识实现的一个C#网页简单下载器,其中涉及到的知识主要是HTTP协议编程中相关类:HttpWebRequest类.HttpWebResponse类. ...
- 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航
html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...
- FFmpeg源代码简单分析：结构体成员管理系统-AVOption
===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结构图 - 解码 F ...
随机推荐
- MongoDB ver 4 几个常用命令
1. 为某个数据库创建用户: use db_test1; db.createUser({ user:"test_user_1", pwd:"test_user_1_pwd ...
- Linux - iptables firewalld
目录 iptables firewalld iptables 1.iptables 的基本使用 启动: service start iptabls 关闭: service stopiptabls 查看 ...
- 浏览器缓存如何控制？ && 在url框中回车、F5 和 Ctrl + F5的区别是什么？
第一部分: 浏览器缓存如何控制? 最近在做网站,但是不知道缓存是什么东西怎么能行! 如何实现HTTP缓存呢? 下面我们来一步一步的探寻实现机制把. 方案一: 无缓存 说明: 浏览器向服务器请求 ...
- Elastic-Job源码分析之AbstractElasticJobExecutor分析
还记得我们在JobScheduler中,在创建任务详情时,会调用一个建造器JobBuilder来创建一个Job,类型是LiteJob. LiteJob.java /** * Lite调度作业. * * ...
- HUE配置文件hue.ini 的sqoop模块详解（图文详解）（分HA集群和非HA集群）
不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...
- ActionController::UnfilteredParameters: unable to convert unpermitted parameters to hash
rails 开发中 5.1版本使用binding.pry会报 ActionController::UnfilteredParameters: unable to convert unpermitted ...
- MySQL之mysql命令使用详解
MySQL Name mysql - the MySQL command-line tool Synopsis mysql [options] db_name Description mysql is ...
- C#(winform)为button添加背景图片,并去掉各种边框
1.既然是添加背景图片 所以这里应该使用 Button.BackgroudImage = "" ;来设置图片 而不应该使用 Button.Image = "" ...
- [心平气和读经典]The TCP/IP Guide(000)
The TCP/IP Guide [Page 39] The TCP/IP Guide: Introduction and "Guide to The Guide" | 第1章 概 ...
- redis数据类型（五）set类型
一. set类型 set是无序集合,最大可以包含(2 的 32 次方-1)个元素. set 的是通过 hash table 实现的,所以添加,删除,查找的复杂度都是 O(1). hash table ...