预览加载中，请您耐心等待几秒...

(附加三)DIV+CSS网页标准化布局.ppt

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共29页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

附加三DIV+CSS网页标准化布局回顾预习检查本章任务1.DIV+CSS对页面布局的优势2.“无意义”的HTML元素div和span3.W3C盒子模型声明盒子模型的CSS属性<html> <head> <title>盒子模型</title> <style> #box{ /*ID为box的盒子模型*/ width:200px;/*盒子的宽度为200px*/ height:200px;/*盒子的高度为200px*/ border:5pxsolid#ccc;/*盒子边框实线各边宽5px*/ padding:10px;/*盒子的4个内填充为10px*/ margin:20px;/*盒子的4个外边距为10px*/ } </style> </head> <body> <divid="box"><!--使用DIV声明一个盒子--> 内容区<!--盒子内容可再嵌套个盒子--> </div> </body> </html>4.和页面布局有关的CSS属性属性属性#box{/*声明ID选择器，名称为box*/ position:absolute;/*设置层的定位为绝对定位*/ top:30px;/*层距离顶点纵向坐标的距离为30个像素*/ left:100px;/*层距离左点横向坐标的距离为100个像素*/ width:300px;/*设置层的宽度为300个像素*/ height:150px;/*设置层的高度为150个像素*/ overflow:auto;/*当内容超出层的范围时显示滚动条*/ z-index:1;/*设置层的先后顺序为覆盖关系*/ visibility:visible;/*无论父层是否可见，子层都可见*/ }5.盒子区块框的定位<html> <head> <title>登录框的盒子模型定位</title> <style> #login{ /*定义一个ID选择器*/ width:300px; /*定义盒子宽度为300px*/ height:200px; /*定义盒子高度为200px*/ position:absolute; /*使用绝对位置进行定位*/ left:50%; /*左部盒子开始位置是页面宽度的50%*/ top:50%; /*顶部盒子开始位置是页面高度的50%*/ margin-left:-150px; /*左部开始位置再退回盒子宽度的一半*/ margin-top:-100px; /*顶部开始位置再退回盒子高度的一半*/ background:#BABABA; /*定义盒子的背景颜色为灰色*/ } </style> </head> <body> <divid="login">登录框的盒子模型</div> </body> </html>6、使用盒子模型的浮动布局6.1设置浮动6.2行框和清理<html><head> <style> .left{/*声明一个css类选择器，名子为left*/ width:200px;/*盒子模型宽度为200px*/ height:200px;/*盒子模型高度为200px*/ margin:10px;/*盒子模型外边距为10px*/ border:solid1px;/*盒子1像素的实线边框*/ float:left;/*设置盒子向左浮动，脱离了文档流*/ } .noleft{/*声明另一个css类选择器，名子为noleft*/ width:200px;/*设置盒子模型的宽度为200px*/ height:200px;/*设置盒子模型的高度为200px*/ border:solid1px;/*设置盒子有一个像素的实线边框*/ background:#ccc;/*设置盒子模型背景为灰色*/ } </style> </head> <body> <divclass="left">框（一）</div><!--使用类left,设置左浮动，脱离了文档流--> <divclass="left">框（二）</div><!--也用类left,也设置左浮动，和第一个盒子同一行--> <divclass="noleft">框（三）</div><!--使用类noleft,没有设置浮动，在文档流中--> </body></html><html><head> <style> .left{/*声明一个css类选择器，名子为left*/ width:200px;/*盒子模型的宽度为200px*/ height:200px;/*盒子模型的高度也为200px*/ margin:10px;/*盒子模型的外边距为10px*/ border:solid1px;/*盒子有1像素实线边框*/ float:left;/*盒子向左浮动，脱离了文档流*/ } .noleft{/*声明另1个css类选择器，名子为noleft*/ width