网页简单布局之结构与表现原则（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 ...
随机推荐
- destoon调用方法汇总 ---转载
根目录.模板目录和样式目录:{DT_PATH}{DT_SKIN}导入头脚:{template 'header'}{template 'footer'}对应模块首页:{$MODULE[$moduleid ...
- excel 正则表达式用法
Private Sub RegEx_Replace() Dim myRegExp As Object Dim Myrange As Range, C As Range ...
- C# string 特殊的引用类型
.Net 框架程序设计(修订版)中有这样一段描述:String类型直接继承自Object,这使得它成为一个引用类型,也就是说线程上的堆栈上不会驻留有任何字符串.(译注:注意这里的“直接继承”.直接继承 ...
- 角色用户权限RBAC
关于角色.用户.权限的表设计,已经成为经典中的经典,到处都在用,这里只是收录一下: 角色表:{role_id,role_name} 用户表:{user_id,user_name} 权限表:{permi ...
- Java异常机制关键字总结，及throws 和 throw 的区别
在Java的异常机制中,时常出现五个关键字:try , catch , throw , throws , finally. 下面将总结各个关键字的用法,以及throw和throws的区别: (1) t ...
- 【文档】三、Mysql Binlog事件类文件和类型
在内部,服务器使用C++类文件来表示binlog事件.标准在log_event.h文件中,这些类的方法代码在log_event.cc中. log_event是基础类.其他的详细的事件子类都是来源于他. ...
- Mac版sublime text右键open in browser 不能识别中文名解决办法
问题描述: Mac下sublime text下打开中文命名的html文件,右键open in browser,浏览器无反应. 解决思路: 要么适应软件,要么改进软件来适应. 1. 将中文名的html ...
- 虹软人脸识别在 linux中so文件加载不到的问题
其实是可以加载到的,不过是so文件放的位置不一对,最简单的方式是放在 /usr/lib64 目录下,也可自己设置. so文件加载不到会报这个错误: .lang.UnsatisfiedLinkEr ...
- 有关查询和执行计划的DMV
转自:http://www.cnblogs.com/CareySon/archive/2012/05/17/2506035.html 查看被缓存的查询计划 SET TRANSACTION ISOLAT ...
- Abschlussarbeit:Konstruktion und Implementierung von Dota2 Datenbank Intelligent Verwaltungsplatfom
1.Die Hintergrund und Bedeutung des Themas Dank nicht ausreichendes Erkenntnisse der Spielplanner un ...