《网页设计与作》第6章.ppt

第六章 CSS样式表（二） ;完成贵美 网站 “登录页”的布局 实现“登录页”顶部的局部布局;使用盒模型相关属性实现页面布局 掌握普通文档流、浮动与清除属性的含义 ;如何控制CSS样式2-1;如何控制CSS样式2-2;盒子模型是网页布局的基础 盒子属性是盒子模型的关键属性 ;盒子属性： margin（外边距/边界） border（边框） padding（内边距/填充 ） 各属性又分为 四个方向;可统一设置或四边分开设置 margin属性 margin margin-top margin-right margin-bottom margin-left ;border属性 border-color border-width border-style ;style type=text/css .textBorder { border-width:1px; border-style:solid; } /style /head body form action= method=post p名字： input name=fname type=text class=textBorder //p p密码： input name=pass type=password class=textBorder size=21 /p;padding属性 padding padding-top padding-right padding-bottom padding-left ;元素的实际占位（实际宽、高） 盒子高度 = height属性 + 上下填充高度 + 上下边框高度 盒子宽度 = width属性 + 左右填充宽度 + 左右边框宽度 ;使用盒子属性布局元素2-1 ;style type=text/css body { margin:0px;padding:0px; background:#ccc; } #logo { width:380px; border:5px solid #666; padding:10px 20px 40px 80px; background:#ff7300; margin:30px auto; //水平居中 } /style body div id=logoimg src=images/logo.jpg alt=logo/ /div /body;如何实现注册页面的布局？;实现步骤 1、分析页面的分块结构，形成HTML组织结构;实现步骤 2、编写每个DIV块的CSS控制定位;需求说明： 重新实现DIV+CSS布局 ;需求说明： 根据提供的素材，实现表单的细边框样式 ;;;;;;;;需求说明： 在前面上机练习基础上，实现页面中间布局 ;需求说明： 在前面上机练习完成的页面中，实现header块的局部布局 ;盒子属性有哪些 ？各包含哪些属性？ float属性的应用场合？有哪些取值？ clear属性的应用场合？有哪些取值？