网页简单布局之结构与表现原则（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 ...
随机推荐
- 关于Vue中main.js，App.vue，index.html之间关系进行总结
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...
- 自定义 mapper
1. 定义一个接口 public interface ItemMapper { List<Item> getItemList(); } 2. 编写 xml 文件 , 将sql 语句填 ...
- Sql语句里的递归查询 SqlServer2005和Oracle 两个版本
以前使用Oracle,觉得它的递归查询很好用,就研究了一下SqlServer,发现它也支持在Sql里递归查询举例说明:SqlServer2005版本的Sql如下:比如一个表,有id和pId字段,id是 ...
- 【Eclipse】编译使用Makefile的C工程
创建MakeFile project新建src文件夹,将文件复制到里面.右击makefile,make targets->create->名称填上allmake targets->b ...
- 安装php readline扩展报错 Please reinstall libedit
现象:configure: error: Please reinstall libedit – I cannot find readline.h解决办法:安装 Editline Library (li ...
- canvas猜数游戏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- redis系统和通用函数
construct函数: 用来创建一个redis客户端. redis = new Redis(); connect函数:连接到一个redis实例. 参数如下: host:字符串类型 可以使一个HO ...
- Compiler Principle
1.Einleitung 1.1 Der Überblick über Compiler 1.1.1 Lexikalische Analyse Die lexikalische Analyse zer ...
- shell 10个好习惯
The Linux Cookbook 一书的作者 Michael Stutz 凭借自己多年使用 UNIX 的经验,总结了 10 个良好习惯,个人认为真的很受用,现摘要如下与大家分享. 1.建立层级目录 ...
- Redis 【keys】 一句话说明
DEL----------------------------------删除给定的一个或多个key DUMP--------------------------------序列化给定key,并返回被 ...