网页布局基础 第四次
绝对定位布局：
使用position属性实现的网页布局
CSS中规定的第三种定位机制
能够实现横向多列布局以及较为复杂的定位：比如:带有遮罩层效果的提示框；固定层效果；全屏广告
position拥有三种形式四种值：
1、静态定位 static
2、相对定位 relative
3、绝对定位 absolute
固定定位 fixed
3和4都属于绝对定位，静态定位是元素默认状态，处于标准文档流中
相对定位特点：
1、相对于自身原有位置进行偏移
2、仍旧处于标准文档流中
3、随即拥有偏移属性和z-index属性
z-index：空间的层堆叠
设置
底层：距离观察者最远
……
-3 层
-2 层
-1 层
0 层 （默认）
1 层
2 层
3 层
……
顶层：最接近观察者
绝对定位特点：
建立了以包含块为基准的定位
完全脱离了标准文档流（块级元素不再独占一行）
设置绝对定位之后，如果没有设置固定宽度，宽度随内容变化而变化
随即拥有偏移属性和z-index属性
绝对定位特点：
建立了以包含块为基准的定位
完全脱离了标准文档流（块级元素不再独占一行）
设置绝对定位之后，如果没有设置固定宽度，宽度随内容变化而变化
随即拥有偏移属性和z-index属性
未设置偏移量
：无论是否存在已定位上级元素，都保持在元素初始位置。
：脱离标准文档流
设置参照基准：
无已定位上级元素：以<html>为偏移参照基准
有已定位上级元素（绝对或者相对）：以距其最近的已定位上级元素为偏移参照基准
使用absolute(绝对定位)实现横向两列布局——常用于一列固定宽度，另一列宽度自适应的情况。
主要技能：relative——父元素相对定位
absolute——自适应宽度元素绝对定位。（绝对定位的元素在相对定位元素的里面 ）
注意：固定宽度列的高度>自适应宽度的列。
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>绝对定位实现布局</title> <style type="text/css"> * { margin:0; padding:0; font-size:12px; color:#333; font-family:Verdana, Geneva, sans-serif, "宋体"; list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; color:#ff0000; } p { line-height:24px; } #wrap { width:780px; margin:0 auto; padding:0 10px 10px; border-left:1px solid #e7e7e7; border-right:1px solid #e7e7e7; } #header { width:100%; overflow:hidden; } .logo { width:100%; height:80px; line-height:80px; font-size:30px; font-family:"微软雅黑"; background:#3399cc; color:#fff; text-indent:30px; } .nav { width:100%; margin-top:10px; } .nav li { margin:0 32px; float:left; } .nav li a { color:#7f7f7f; font-size:16px; display:block; padding-bottom:2px; } .nav li a:hover { border-bottom:3px solid #cc0000; text-decoration:none; } .nav li.current { border-bottom:3px solid #cc0000; } .nav li.current a:hover { border-bottom:none; } #mainbody { width:100%; position:relative; margin-top:20px; } #sidebar { width:180px; padding-bottom:10px; } #sidebar dl { padding:0 0 5px; } #sidebar dt { font-weight:bold; line-height:22px; font-family:"微软雅黑"; font-size:14px; color:#fff; background:#3399cc; padding:5px 0 5px 15px; font-weight:normal; margin-bottom:10px; } #sidebar dd { line-height:20px; padding-left:15px; } #sidebar dd.current a { color:#f00; } #content { position:absolute; margin-left:200px; top:0px; } #content h1 { color:#000; font-size:24px; font-family:"微软雅黑"; font-weight:normal; } #content h3 { margin-top:10px; line-height:26px; } #content dl { margin-bottom:10px; } #content dt { font-weight:bold; line-height:26px; } #content dd { line-height:22px; } .learn a { color:#900b09; text-decoration:underline; padding-bottom:2px; } .learn a:hover { text-decoration:none; } .tips { color:#999; margin-top:20px; } .pageto { border-top:1px solid #aaa; border-bottom:3px solid #aaa; margin-top:5px; padding:15px 0; } .pageto a { margin:0 10px; background:#f3f3f3; padding:5px 20px; border:1px solid #dfdfdf; color:#555; } .pageto a:hover { color:#000; text-decoration:none; } .disline { border-bottom:1px dashed #ccc; margin-top:10px; } #footer { width:100%; margin-top:15px; padding:15px 0; text-align:center; color:#999; background:#ddd; } </style> </head> <body> <div id="wrap"> <div id="header"> <div class="logo">前端开发教程</div> <div class="nav"> <ul> <li class="current"><a href="#">CSS</a></li> <li><a href="#">HTML</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Ajax</a></li> </ul> </div> </div> <div id="mainbody"> <div id="sidebar"> <dl> <dt>CSS 基础教程</dt> <dd class="current"><a href="#">CSS 简介</a></dd> <dd><a href="#">CSS 基础语法</a></dd> <dd><a href="#">CSS 高级语法</a></dd> <dd><a href="#">CSS 派生选择器</a></dd> <dd><a href="#">CSS id 选择器</a></dd> <dd><a href="#">CSS 类选择器</a></dd> <dd><a href="#">CSS 属性选择器</a></dd> <dd><a href="#">CSS 创建</a></dd> </dl> <dl> <dt>CSS 样式</dt> <dd><a href="#">CSS 背景</a></dd> <dd><a href="#">CSS 文本</a></dd> <dd><a href="#">CSS 字体</a></dd> <dd><a href="#">CSS 链接</a></dd> <dd><a href="#">CSS 列表</a></dd> <dd><a href="#">CSS 表格</a></dd> <dd><a href="#">CSS 轮廓</a></dd> </dl> <dl> <dt>CSS 盒子模型</dt> <dd><a href="#">CSS 盒子模型概述</a></dd> <dd><a href="#">CSS 内边距</a></dd> <dd><a href="#">CSS 边框</a></dd> <dd><a href="#">CSS 外边距</a></dd> <dd><a href="#">CSS 外边距合并</a></dd> </dl> <dl> <dt>CSS 定位</dt> <dd><a href="#">CSS 定位概述</a></dd> <dd><a href="#">CSS 相对定位</a></dd> <dd><a href="#">CSS 绝对定位</a></dd> <dd><a href="#">CSS 浮动</a></dd> </dl> <dl> <dt>CSS 选择器</dt> <dd><a href="#">CSS 元素选择器</a></dd> <dd><a href="#">CSS 选择器分组</a></dd> <dd><a href="#">CSS 类选择器详解</a></dd> <dd><a href="#">CSS ID 选择器详解</a></dd> <dd><a href="#">CSS 属性选择器详解</a></dd> <dd><a href="#">CSS 后代选择器</a></dd> <dd><a href="#">CSS 子元素选择器</a></dd> <dd><a href="#">CSS 相邻兄弟选择器</a></dd> <dd><a href="#">CSS 伪类</a></dd> <dd><a href="#">CSS 伪元素</a></dd> </dl> <dl> <dt>CSS 高级</dt> <dd><a href="#">CSS 对齐</a></dd> <dd><a href="#">CSS 尺寸</a></dd> <dd><a href="#">CSS 分类</a></dd> <dd><a href="#">CSS 导航栏</a></dd> <dd><a href="#">CSS 图片库</a></dd> <dd><a href="#">CSS 图片透明</a></dd> <dd><a href="#">CSS 媒介类型</a></dd> <dd><a href="#">CSS 注意事项</a></dd> <dd><a href="#">CSS 总结</a></dd> </dl> </div> <div id="content"> <h1>CSS 简介</h1> <div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div> <h3>你应该知道这些知识</h3> <p>在继续之前，你应该有一个以下基本认识：</p> <p>· HTML / XHTML</p> <p class="learn">如果您希望首先学习这些项目，我们的<a href="#">主页</a>上可以找到教程。</p> <div class="disline"></div> <h3>什么是CSS？</h3> <p>CSS即级联样式表。 它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p> <div class="disline"></div> <h3>基本信息</h3> <p>CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。</p> <div class="disline"></div> <h3>发展历史</h3> <dl> <dt>CSS1</dt> <dd>作为一项W3C推荐，CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。</dd> </dl> <dl> <dt>CSS2</dt> <dd>作为一项 W3C 推荐，CSS2发布于 1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。</dd> </dl> <h3>CSS3</h3> <dl> <dt>CSS3 计划将 CSS 划分为更小的模块。</dt> <dd class="learn"><a href="#">亲自体验一下</a>！</dd> </dl> <div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div> <p class="tips">本站提供的内容仅用于学习培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。</p> </div> </div> <div id="footer">慕课©版权所有</div> </div> </body> </html>
编程实践
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{margin:0; padding:0;} #wrap{width:970px; margin:0 auto;} #mainbody{position:relative; margin-top:15px;} #left{float:left;width:110px; } #mid{float:left;margin-left:13px;width:650px;border:1px solid #999;} #right{position:absolute;border:1px solid #999;margin-left:790px;} </style> </head> <body> <div id="wrap"> <div id="header"><img src="http://img.mukewang.com/5369cd6e0001a15b09700088.jpg" width="970" height="88" /></div> <div id="mainbody"> <div id="left"><img src="http://img.mukewang.com/5369cd0e00011e3901090487.jpg" width="109" height="487" /></div> <div id="mid"><img src="http://img.mukewang.com/5369cd3c00013e9e06490439.jpg" width="649" height="439" /></div> <div id="right"><p>欢迎使用金山软件出品的爱词霸，在线查询你英语词汇、句子释义</p><img src="http://img.mukewang.com/5369cd540001d8e101770329.jpg" width="177" height="329" /></div> </div> </div> </body> </html>
来源：http://www.imooc.com/code/1426
