原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
DIVCSS讲义二
第二讲 DIV+CSS教学（二） 课次 授课学期 授课班级 授课地点 授课时间 2010-2011-2 10341、2 8517、504 3-2、5-2 课程目标 备注 本节课主要讲解DIV与CSS结合布局的基础知识，DIV的定义与定位，盒子模型，利用CSS进行页面控制 课程导语 授课素材 《摄影师》网页制作 使用案例 拟留讨论 第二讲 使用DIV+CSS布局页面
2.1 DIV概述
1.定义DIV
DIV是HTML中指定的专门用于布局设计的容器对象。
DIV对象除了可以直接放入文本和其他标签之外，还可以多个DIV标签进行嵌套使用，其最终目的是合理地标识出页面的区域。
DIV的常用形式：
div id=”id名称”内容/div
div class=”class 名称“内容/div
2．DIV的嵌套和固定格式
div id=”top”顶部/div
div id=”main”
div id=”left”左/div
div id=”right”右/div
/div
div id=”bottom”底/div
Div自身并不能实行排版功能，CSS才是真正的排版方式。
2.2 CSS布局定位
首先将页面在整体上进行DIV标签的分块，然后对各个块进行CSS定位，最后在各个块中添加相应的内容。
1.浮动定位
浮动定位是CSS排版中非常重要的手段。浮动的框可以左右移动，直到其外边缘碰到包含框或另一个浮动框的边缘。
float的参数包括：none;left;right
#box{
width:650
}
#left{
background-color:#fff;
height:150px;
width:150px;
margin:10px;
}
#main{
background-color:#fff;
height:150px;
width:150px;
margin:10px;
}
#right{
background-color:#fff;
height:150px;
width:150px;
margin:10px;
}
我们先做一个简单的网页：
html
head
titlemy css/title
link href=1.css type=text/css rel=stylesheet
/head
body
div id=box
div id=left123/div
div id=main123/div
div id=right123/div
/div
/body
2.position定位
static(静态，是一个默认定位方式，无特殊定位)
relative（相对，对象不可层叠，但将依据left、right、top、bottom等属性在正常文档流中偏移位置）
absolute（绝对，将对象从文档流中拖出，通过width、height、right、top、bottom等属性与margin、padding、border进行绝对定位，绝对定位的元素可以有边界，但这些边界不压缩。而其层叠通过z-index属性来定义）。
#main{
position:relative;
background-color:#fff;
left:150px;
top:150px;
float:left;
height:200px;
width:200px
}
（1）相对定位（相对这个原素的起点）
（2）绝对定位（相对于父元素的定位）
2.3 可视化盒模型
所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说，这些被占据的空间往往都比单纯的内容要大。
一个盒模型是由content（内容）、border（边框）、padding（填充）和margin（间隔）的4个部分组成的。
如果需要精确地排版，有的时候一个像素都不能差。
实际使用CSS的用法：
padding:1px 上下左右padding都是1像素宽
margin:1px 2px 上下margin是1像素，左右是2像素
padding:1px 2px 3px 上padding是1像素，左右padding是2像素，下padding是3像素
margin:1px 2px 3px 4px 上右下左margin的宽度依次是1、2、3、4像素
一个元素的实际宽度=左边界+左边框+左填充+内容宽度+右填充
文档评论（0）