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

附加三DIVCSS网页标准化布局.pptx

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

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

下载提示 文本预览

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

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

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

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

回顾预习检查本章任务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:200px;/*盒子模型宽度为200px*/height:200px;/*盒子模型的高度为200px*/border:solid1px;/*盒子有1像素实线边框*/background:#ccc;/*设置盒子模型