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

附加三 DIV+CSS网页标准化布局;回顾;预习检查;本章任务;1. DIV+CSS对页面布局的优势;2.“无意义”的HTML元素div和span;3. W3C盒子模型;声明盒子模型的CSS属性;html head title盒子模型/title style #box { /* ID为box的盒子模型 */ width:200px; /* 盒子的宽度为200px */ height:200px; /* 盒子的高度为200px */ border:5px solid #ccc; /* 盒子边框实线各边宽5px */ padding:10px; /* 盒子的4个内填充为10px */ margin:20px; /* 盒子的4个外边距为10px */ } /style /head body div id=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; /* 顶部开始位置再退回盒子高度的一半 */