欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> DIVCSS5为大家实例讲解布局。绝对定位我们要用到样式和，同时需要top、bottom、left、right配合布局实现绝对定位。通过真实案例演示与介绍绝对定位布局方法技术。
Css div绝对定位案例截图
遇到以上的不规则案例布局，如果使用、等浮动实现比较麻烦，但使用绝对定位即可很好简单地实现。接下来DIVCSS5为大家介绍position绝对定位方法布局以上小的案例。
一、用到CSS样式和HTML标签及相应解释
1、要用到样式单词及解释
position：绝对定位样式实现DIV定位布局其设置值absolute和relative应用
：宽度，设置对象宽度
：高度，设置对象高度
：行高，设置文本行高
：设置div对象靠左距离
：设置div对象靠左距离
：设置div对象靠左距离
：设置div对象靠左距离
：背景，设置背景图片和颜色
：设置字体颜色
：设置字体大小
：设置字体加粗
2、用到及解释
：用于布局结构框架
：用于布局列表型数据列表
：用于布局栏目标题
二、绝对定位实际案例布局思维解释介绍
DIVCSS5将隐藏文字后整图作为最外层大盒子DIV的，命名为bg.jpg。
隐藏文字后的图片素材，可直接保存使用
这一个最外层DIV，设置好宽度高度、背景图片，同时设置position:relative。此盒子里分别布局3个小DIV盒子，分别设置好宽度高度，同时设置position:absolute绝对定位再使用left、right、top、bottom这几个样式定位好这3个盒子位置。
通过以上布局即可布局好三个，再分别布局栏目标题和内容即可实现。
同时此案例我们会在DIVCSS5提供的免费基础上进行布局，以便兼容各大浏览器。
三、绝对定位案例重要代码
以下是最外层DIV盒子及和内容3个小盒子布局代码。
&!DOCTYPE&html&&&&charset=&utf-8&&&绝对定位&实例在线演示&DIVCSS5&&href=&images/style.css&&rel=&stylesheet&&type=&text/css&&&&&&&id=&wrapper&&&class=&box1&&&class=&box2&&&class=&box3&&&&&
以上HTML布局一个大盒子使用ID，里面三个小DIV盒子使用CLASS。
2、CSS代码
#wrapper{&margin:0&position:width:610height:559background:url(bg.jpg)&no-repeat}&/*&position:relative是绝对定位关键，父级设置&*/&.box1{&position:&width:147&height:140&left:198&top:14px}&.box2{position:&width:141&height:186&left:31&bottom:17px}&.box3{position:&width:132&height:188&right:28&bottom:67px}&/*&三个小盒子使用position:relative同时设置宽度&高度&left&right&top&bottom实现布局与准确定位&*/&
特别说明：以上三个小盒子绝对定位宽度、高度、top、left、right、bottom的准确值必须通过PS软件获得，相信参加同学通过上课已经学会获取各属性和值的方法。（DIVCSS5课堂中介绍和视频操作演示过各值PS如何获得的技术技巧）这里就不再详细介绍与讲解。
3、大概效果截图
在DW软件中效果截图
从以上图看出布局结构初现。再以上基础上分别布局栏目标题和对应内容即可完成此布局。
四、完整案例代码
1、完整CSS代码
@charset&&utf-8&;&/*&DIVCSS5-CSS初始化模板-&*/&body,&div,&ul,&li,h3{margin:0;&padding:0;font-style:&font:12px/22px&&\5B8B\4F53&,Arial,&Helvetica,&sans-serif}&/*&\5B8B\4F53&代表&宋体，更多中文字体转&Unicode&/jiqiao/j325.shtml&*/&ol,&ul&,li{list-style:none}&img&{border:&0;&vertical-align:middle}&body{color:#FFF;background:#FFF;&text-align:center}&a{color:#FFF;text-decoration:none}&&a:hover{color:#BA2636;text-decoration:underline}&/*&根据本实例&设置超链接字体与没有超链接字体演示为白色&*/&&#wrapper{&margin:0&position:width:610height:559background:url(bg.jpg)&no-repeat}&/*&position:relative是绝对定位关键，父级设置&*/&&.box1{&position:&width:147&height:140&left:198&top:14px}&.box2{position:&width:141&height:186&left:31&bottom:17px}&.box3{position:&width:132&height:188&right:28&bottom:67px}&/*&position:absolute是绝对定位关键，子级设置同时lef&right&top&bottom配合使用&*/&&h3.title{&height:32&line-height:32&font-size:14&font-weight:&text-align:left}&/*&标题统一设置&*/&ul.list{&text-align:&width:100%;&padding-top:8px}&ul.list&li{&width:100%;&text-align:&height:22overflow:hidden}&/*&加了overflow:hidden防止内容过多后自动换行&隐藏超出内容&*/&
&!DOCTYPE&html&&&&charset=&utf-8&&&绝对定位&实例在线演示&DIVCSS5&&href=&images/style.css&&rel=&stylesheet&&type=&text/css&&&&&&&id=&wrapper&&&class=&box1&&&class=&title&新闻动态&&class=&list&&&href=&/wenji/w558.shtml&不会程序能学会CSS吗？&&href=&/wenji/w556.shtml&DIVCSS学习难吗？&&href=&/peixun/&我要参加DIVCSS5的培训&&href=&/css-tool/t720.shtml&jQuery所以版本集合整理&&&&class=&box2&&&class=&title&DIVCSS5栏目&&class=&list&&&href=&/html/&CSS基础教程&&href=&/htmlrumen/&HTML基础教程&&href=&/wenji/&CSS问题&&href=&/css-tool/&CSS制作工具&&href=&/jiqiao/&DIV&CSS技巧&&href=&/css-texiao/&DIV+CSS+JS特效&&&&class=&box3&&&class=&title&网站栏目&&class=&list&&&href=&/cssrumen/&DIV&CSS入门&&href=&/htmlrumen/&HTML入门教程&&href=&/shili/&CSS实例&&href=&/&DIVCSS5首页&&href=&/template/&DIV&CSS模块模板&&href=&/w3c/&DIV&CSS&WEB标准&&&&&&
3、效果截图
CSS实例最终浏览器效果截图
五、CSS实例演示与下载
1、在线演示
2、完整案例下载（包括HTML+CSS+PSD文件）
六、DIVCSS实例总结
以上实例主要使用position绝对定位样式使用，通过position实现绝对定位布局。同时此案例还用到了H3、UL LI标签进行布局。希望大家一定亲自实践，这样才算真正掌握。从自己实践中会体会到真正布局技巧方法。
查看另外一个如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 18:11
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台关于div+css布局的定位? - 知乎3被浏览279分享邀请回答7添加评论分享收藏感谢收起与世界分享知识、经验和见解111128人阅读
HTML&JS（3）
HTML CSS + DIV实现整体布局
1、技术目标：
开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局
2、什么是W3C标准？
&&& W3C：World Wide Web Consortium，万维网联盟
&&& W3C的职能：负责制定和维护Web行业标准
&&& W3C标准包括一系列的标准：
HTML内容方面：XHTML样式美化方面：CSS& 结构文档访问方面：DOM页面交互方面：ECMAScript……等等
3、W3C倡导的Web结构要符合以下要求：
XHTML负责内容组织CSS负责页面样式
4、符合W3C规范页面的结构：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN&&
&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&&&
xmlns=&http://www.w3.org/1999/xhtml&&&&& &&&&&&&& http-equiv=&Content-Type&content=&text/&&&&&&&&&&&&&&&& charset=gb2312&&&&&&&&& 无标题文档&&&& &&&& &&&&&&&&&&&& ......页面内容部分& &&& &&&& &
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN&
&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/
charset=gb2312& /&
&title&无标题文档&/title&
......页面内容部分
5、XHTML基本规范
标签名和属性名称必须小写 HTML标签必须关闭 属性值必须用引号括起来 标签必须正确嵌套 文档必须拥有一个根元素，所有的XHTML元素必须嵌套于&html&根元素中属性不能简写，如：
&&&&&&&&&&&&&&&&&&&&&& &input checked=&checked& /&
&&&&&&&&&&&&&&&&&&&&&& &input readonly=&readonly& /&
&&&&&&&&&&&&&&&&&&&&&& &option selected=&selected& /&
6、页面开发需要注意的地方：
不要使用淘汰的标签：&b&、&font&、&marquee&等，可参考官方文档(http://www.w3c.org)& img /&标签的alt属性：为图片增加alt属性样式和内容分离：将样式和结构分离，不使用行类样式表单的name和id：表单及表单元素要求设置name和id属性使用CSS + DIV布局页面的浏览器兼容性
7、为什么需要盒子模型？
&&& 网页可以看成由一个个&盒子&组成，如图：
&&& 由上图可以看出，页面分为上(网站导航)、中、下(版权声明)三个部分，
&&& 中间部分又分为左(商品分类)、中(主要部分)、右，这些版块就像一个个
&&& 的盒子，这些&盒子&中放置着各种内容，页面就是由这些&盒子&拼凑起来
8、盒子模型的相关属性
margin（外边距/边界） border（边框） padding（内边距/填充 ）
&&&& 我们看图理解一下各属性作用：
&&&& 以上属性又分为上、右、下、左四个方向
&&&& 问题：页面元素的宽度width、高度height如何计算？
&&&& 答案：元素的实际占位尺寸 = 元素尺寸 + padding + 边框宽度
&&&& 比如：元素实际占位高度 = height属性 + 上下padding + 上下边框宽度
9、盒模型的层次关系
&&& 我们通过一个经典的盒模型3D立体结构图来理解，如图：
&&&& 从上往下看，层次关系如下：
&&&& 第1层：盒子的边框(border)，
&&&& 第2层：元素的内容(content)、内边距(padding)
&&&& 第3层：背景图(background-image)
&&&& 第4层：背景色(background-color)
&&&& 第5层：盒子的外边距(margin)
&&&& 从这个层次关系中可以看出，当同时设置背景图和背景色时，背景
&&&& 图将在背景色的上方显示
10、margin外边距
&&& 可统一设置或四边分开设置，如图：
&&& 具体的设置可查看CSS帮助文档(页面下方提供下载)
11、水平居中和垂直居中
&&& 水平居中包含两种情况：
&&&&&&& 块级元素的水平居中：margin:0
&&&&&&& 文字内容的水平居中：text-align:
&&& 垂直居中：
&&&&&&& 常见的单行文字的垂直居中可设置文字所在行的height与
&&&&&&& 行高样式属性一致，比如：
&&&&&&& div{
&&&&&&&&&&& width: 400
&&&&&&&&&&& height: 400
&&&&&&&&&&& line-height: 400/*行高与div高度一致*/
12、案例的首页布局分析
&&&&&&&& 只保留DIV的布局分析：
13、首页布局CSS + DIV代码分析
&&& HTML结构代码：
&&& &div id=&container&&
&&&&&&&&&&& &div id=&header&&顶部（header）&/div&
&&&&&&&&&&& &div id=&main&&主体部分（main）&/div&
&&&&&&&&&&& &div id=&footer&&底部（footer）&/div&
&&& &/div&
&&& CSS样式代码：
&&& /*主面板样式*/
&&& #container {
&&&&&&& width:980
&&&&&&& margin:0/*主面板DIV居中*/
&& /*顶部面板样式*/
&&& #header {
&&&&&&& width:100%;
&&&&&&& height:150
&&&&&&& border:1px #F00
&&& /*中间部分面板样式*/
&&& #main {
&&&&&&& width:100%;
&&&&&&& height:400
&&&&&&& border:1px #F00
&&& /*底部面板样式*/
&&& #footer {
&&&&&&& width:100%;
&&&&&&& height:100
&&&&&&& border:1px #F00
14、为什么需要float浮动属性？
&&& 我们来看看下图：
&&& 问题：如何让商品分类DIV、内容DIV和右侧DIV并排放置？
&&& 答案：使用float(浮动)样式
15、浮动属性
&&& 理解浮动属性首先要搞清楚，什么是文档流？
&&& 文档流：浏览器根据元素在html文档中出现的顺序，
&&&&&&& 从左向右，从上到下依次排列
&&& 浮动属性是CSS中的定位属性，用法如下：
&&&&&&& float: 浮动方向(left、right、none);
&&& left为左浮动、right为右浮动、none是默认值表示不浮动
&&& ，设置元素的浮动，该元素将脱离文档流，向左或向右移动
&&& 直到它的外边距碰到父元素的边框或另一个浮动元素的边
&&& 框为止
&&& 浮动示例，没有使用浮动的3个DIV：
&&& HTML结构代码：
&&&&&&& &div id=&first&&第1块div&/div&
&&&&&&& &div id=&second&&第2块div&/div&
&&&&&&& &div id=&third&&第3块div&/div&
&&& CSS样式代码：
&&&&&&& #first, #second, #third{
&&&&&&&&&&&&&&& width:100
&&&&&&&&&&&&&&& height:50
&&&&&&&&&&&&&&& border:1px #333
&&&&&&&&&&&&&&& margin:5
&&& 执行效果如图：
&&& 样式中加入 float:
&&& 执行效果如图：
&&& 你再修改为 float: right试试右浮动是什么效果
16、让商品分类DIV、内容DIV和右侧DIV并排放置
&&& HTML结构代码：
&div id=&container&&&
&&& &div id=&header&&顶部（header）&/div&&&&& &div id=&main&&& &&&&&&& &div class=&cat&&商品分类(cat)&/div&&&&&&&&& &div class=&content&&内容(content)&/div&&&&&&&&& &div class=&sidebar&&右侧(sidebar)&/div&&&&& &/div&& &&& &div id=&footer&&底部（footer）&/div&&&/div&&
&div id=&container&&
&div id=&header&&顶部（header）&/div&
&div id=&main&&
&div class=&cat&&商品分类(cat)&/div&
&div class=&content&&内容(content)&/div&
&div class=&sidebar&&右侧(sidebar)&/div&
&div id=&footer&&底部（footer）&/div&
&& CSS样式代码(在第13节CSS代码基础上加入)：
&&& .cat, .sidebar {
&&&&&&& float:
&&&&&&& width:20%;
&&&&&&& height:100%;
&&& .content {
&&&&&&& float:
&&&&&&& width:60%;
&&&&&&& height:100%;
17、clear清除
&&& clear只对块级元素有效，表示如果前一个元素存在左浮动或右浮动，则换行
&&& clear属性的取值：rigth、left、both、none
盒子模型有哪些属性？各属性又分别包含哪些属性？float属性的应用场合？有哪些取值？&&& clear属性的应用场合？有哪些取值？
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：163112次
排名：千里之外
原创：22篇
转载：26篇
评论：58条
(3)(3)(4)(2)(1)(2)(1)(1)(2)(1)(6)(1)(5)(9)(1)一小时搞定DIV+CSS布局-固定页面开度布局 - 程序园
博文评论:6
资源评论:0
积分与排名
阅读排行榜
一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容，读完本文你讲会使用DIV+CSS进行简单的页面布局。
转载请标明：
关于DIV+CSS布局中用到的CSS必备知识请看：
DIV+CSS布局中主要CSS属性介绍：
&&&&&& Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道&div&标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。
&&&&&& Margin属性用于设置两个元素之间的距离。
&&&&&& Padding属性用于设置一个元素的边框与其内容的距离。
&&&&&& 使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使用Clear属性清楚一下浮动，否则上面的布局会影响到下面。
实例讲解：下面使用实例如果做一个简单又基本的布局，效果如下图：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&DIV+CSS布局教程&/title&
&style type=&text/css&&
#Container{
width:1000
margin:0/*设置整个容器在浏览器中水平居中*/
background:#CF3;
background:#093;
padding-left:50
padding-top:20
padding-bottom:50
height:600
/*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/
margin-top:20/*此处讲解margin的用法，设置content与上面header元素之间的距离*/
background:#0FF;
#Content-Left{
height:400
margin:20/*设置元素跟其他元素的距离为20像素*/
float:/*设置浮动，实现多列效果，div+Css布局中很重要的*/
background:#90C;
#Content-Main{
height:400
margin:20/*设置元素跟其他元素的距离为20像素*/
float:/*设置浮动，实现多列效果，div+Css布局中很重要的*/
background:#90C;
/*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/
background:#90C;
margin-top:20
&div id=&Container&&
&div id=&Header&&
&div id=&logo&&这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。&/div&
&div id=&Content&&
&div id=&Content-Left&&Content-Left&/div&
&div id=&Content-Main&&Content-Main&/div&
&div class=&Clear&&&!--如何你上面用到float,下面布局开始前最好清除一下。--&&/div&
&div id=&Footer&&Footer&/div&
注解：Container作为整个页面的容器，控制着整个页面在浏览器的位置，此处使用margin:0控制Container容器在浏览器中水平居中，一般固定宽度的布局都会用到这就代码。
本文只讲述最基本的布局，在具体开发实践中可能会遇到浏览器兼容性等其他问题，遇到细节问题请自行百度解决，解决的多了经验就积累起来了。
所属分类：
推荐成功关注成功
收藏成功消息已发发送
您可能还喜欢DIV CSS布局制作教程与CSS资源网-ThinkCSS
DIV CSS学习方法：DIV CSS布局制作（网页标准重构）在于实践，不在于您看了多少教程，多少本CSS书籍。当您跟随ThinkCSS内教程与技术文章亲自写代码实践，会对CSS学习有种全新学习认识。有时您看别人代码一眼能看懂，自己却无从下手写CSS；有时不能理解的技术知识与问题，怎么思考也想不明白等等 这些问题根本原因在于您没有实践，哪怕再简单的CSS基础其实您实践后或许与您未实践前是完全不同的认识。前期学习CSS，特别是实践时会遇到各种各样问题，但您逐个解决了自然就慢慢学会CSS，有时一个实践会让您CSS技术大幅进步，实践会让您对CSS DIV制作豁然开朗，会觉得突然会CSS制作，当然您不实践永远无法理解实践学会CSS布局快乐与进步。ThinkCSS网站学习指南：零基础首先进入与两个栏目，边看边实践边浏览器测试哪怕拷贝代码实践也行。了解与认识基础后（有一定基础），进入、栏目巩固基础，再到、、等其他栏目根据兴趣选择来实践测试学习CSS（一定亲自实践为主）。ThinkCSS上基础教程、CSS问题解决、CSS布局技巧等文章教程里知识均是千丝万缕（交叉联系）激进式以实践为主即可掌握学会。各式各样网页千变万化漂亮版式是不同变化的，但不变是CSS就是由最基础演变组合根据项目需求而写CSS代码。DIV CSS制作HTML项目中根据美工图、根据需求架构HTML，设置对应CSS样式，边开发边浏览器中测试，逐渐成长从而熟练掌握CSS技术。 遇到各种CSS问题（大部分）均可以在ThinkCSS找到相关问题原因与解决方法（或ThinkCSS上搜索自己遇到DIV CSS技术问题与答案）。
CSS2 CSS3均需要掌握最基本CSS样式属性 设置对象高度行高、垂直高度最小高度最大高度设置对象宽度最小宽度最大宽度边框样式背景颜色 背景图片样式浮动 布局靠左靠右常设置both值清除浮动文本样式字体加粗css代码注释内边距外边距文字字体设置文字字体大小设置字体颜色设置隐藏显示滚动条省略号绝对定位层叠顺序 重叠顺序 绝对定位具体位置绝对定位具体位置超链接样式设置以.开头命名以#开头命名星号什么意思列表设置CSS样式对象圆角样式长度宽度单位针对IE7浏览器隐藏、显示、块设置设置内容靠左 靠右 居中开头内容的缩进字体下划线字母大写字与字间距空格间距对图片设置css鼠标指针 引入外部CSS文件方式css代码的优化简化常用CSS选择器命名大全 网页布局常用普通标签与功能标签 网页布局主要标签布局小局部小细节标签引入外部文件标签网页头部标签脚本标签网页标题标签设置关键字、描述等标签链接锚文本标签换行标签段落标签区别与应用字体加粗标签字体加粗标签两个加粗区别
各种标题标签 html长度单位图片标签元素水平线网页内容标签字体斜体倾斜标签强调标签元素网页打开方式标签下划线标签 \ 字体删除线标签表单内使用标签元素表单文本输入 按钮等文本输入框下拉菜单多选控件按钮单选控件按钮font标签设置颜色内嵌框架表格组合标签类似列表组合标签文本有序列表无序列表上标下标style标签元素标签内style属性强制不换行标签html代码注释条件判断注释网页常用标签大全认识HTML5网页HTML代码查看网页基本结构多个空格实现不可少声明HTML文件扩展名编码类型网页编码三种网页扩展名三者区别 网页常用小局部模块代码（包括HTML与CSS）
常用网页制作与应用工具软件 -
- 网页代码标准验证多版本浏览器测试软件谷歌浏览器火狐浏览器傲游浏览器拆分正在浏览网页网页美工设计与切图网页开发软件网页文件上传下载软件用于截图、测量Favicon图标制作工具html5知识博客网站系统织梦网站系统中文字体转码表常用id class命名css 在线手册css3 在线手册背景字体颜色值代码新旧版本JQ文件下载 div css网页模板提供在线演示与打包免费下载
常见网页中使用特效下载
友情链接：