CSS样式表2调研报告.pptVIP

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布局 ;练习——修饰表单 ;共性问题集中讲解;;;;;;;;练习——实现中间布局 ;练习——头部局部布局 ;总结