网页简单布局之结构与表现原则（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 ...
随机推荐
- 博客主题皮肤探索-添加新功能和fiddler的css/js替换
还有前言 使用了主题之后,发现还差了一点功能.最新评论没有了,导致读者回复需要一点时间去找到底回复了哪条博客.于是就有了添加功能的想法. 如何调试CSS/JS 打开f12,可以看见加载的js资源都是混 ...
- LTE:EPC
User Identifiers - IMSI and GUTI IMSI A globle id that unique identifies a subscribe.It composed t ...
- 转 在子线程中new Handler报错--Can't create handler inside thread that has not called Looper.prepare()
在子线程中new一个Handler为什么会报以下错误? java.lang.RuntimeException: Can't create handler inside thread that has ...
- Java 并发编程——Callable+Future+FutureTask
Java 并发编程系列文章 Java 并发基础——线程安全性 Java 并发编程——Callable+Future+FutureTask java 并发编程——Thread 源码重新学习 java并发 ...
- Git学习系列之Git基本操作提交项目（图文详解）
前面博客 Git学习系列之Git基本操作克隆项目(图文详解) 然后可以 cd 切换到 LispGentleIntro 目录, 新增或者修改某些文件.这里只是模拟一下操作, 实际情况可能是 使用 Ecl ...
- oracle获得日期与向oracle表中插入Date字符串原理解析
工作中要用到 Oracle 9i,经常要向其中的某张表插入事件发生的日期及时间.专门就 Oracle 的日期及时间显示方式和插入方式记一笔. 像 Number,varchar2 等内置的数据类型一样, ...
- 我们的GAME-TECH沙龙北京站完美收官了，都讨论了些啥？
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由 腾讯游戏云 团队首发与云+社区 摘要:4月13日,腾讯游戏云GAME-TECH游戏开发者技术沙龙于北京举办.此次活动是腾讯游戏云游戏 ...
- [SQL Server] 无法连接到本地数据库
打开SQL Server配置管理器 启用下图两个协议 打开SQL Server服务 这一步可能出现这种情况: 故障原因是,安装Visual Studio 2012的时候,自动安装“Microsoft ...
- MongoDB 从入门到精通
1,安装并启动数据库 从官网(www.mongodb.org/downloads)下载一个适合你平台的版本,我的系统是win7 64位的,下载文件也就10几M,将下载的文件解压放到任何目录 ...
- DES c#加密后java解密
public static String byteArr2HexStr(byte[] bytIn) { StringBuilder builder = new StringBuilder(); for ...