网页简单布局之结构与表现原则（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 ...
随机推荐
- Mac服务管理-Launchd（转）
背景: 在Mac下没有像Linux那样有很多的关于init方面的工具,从init的发展历史https://en.wikipedia.org/wiki/Init上可以知道,Mac使用的是Launchd作 ...
- android中画弧函数canvas.drawArc()之理解
在学习android中图形图像处理技术这部分内容时,对绘制圆弧函数canvas.drawArc()的用法.参数含义及画图原理很是不理解,在网上搜索了一些,加上自己的理解,在此做个小总结,作为学习过程中 ...
- CentOS7编译curl
1.下载curl源代码 https://curl.haxx.se/download.html 2.进入curl目录 ./configure --prefix=/usr/local/curl make ...
- 设置获取用户登录信息的Seeion类
/** * * 保存用户上下文信息 * 还可以获取session * */ public class UserContext { public static final String USER_IN_ ...
- zend studio 连PHP自带系统函数 常量都不提示
如果是新建项目,所有PHP文件里面函数都是可以自带提示的. 但是,打开已经建立好的项目时候,貌似无法识别是PHP项目或者其他什么. 此时,在项目上点击: configure->add php s ...
- 微服务Kong（六）——配置参考
1. 配置加载 如果您通过其中一个官方软件包安装了Kong,Kong会附带默认配置文件,该文件可以在/etc/kong/kong.conf.default中找到.要开始配置Kong,您可以复制此文件: ...
- 使用Rectangle+ImageBrush来代替Image，解决图片模糊的问题
<Rectangle Margin="0" Stroke="Black" HorizontalAlignment="Right" Wi ...
- 我们的GAME-TECH沙龙北京站完美收官了，都讨论了些啥？
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由 腾讯游戏云 团队首发与云+社区 摘要:4月13日,腾讯游戏云GAME-TECH游戏开发者技术沙龙于北京举办.此次活动是腾讯游戏云游戏 ...
- 前端自动化Gulp工具常用插件
npm init命令初始化当前文件夹后,在当前文件夹新建gulpfile.js文件.当前目录下的所有操作流都在gulpfile.js文件中定义. gulp自动化 gulp-uglify (JS压缩) ...
- 吴恩达《深度学习》第四门课（3）目标检测（Object detection）
3.1目标定位 (1)案例1:在构建自动驾驶时,需要定位出照片中的行人.汽车.摩托车和背景,即四个类别.可以设置这样的输出,首先第一个元素pc=1表示有要定位的物体,那么用另外四个输出元素表示定位框的 ...