《Web前端开发技术》课件——1-3 项目CSS修饰——盒子属性.pptxVIP

江西卧龙公司静态首页CSS修饰——盒子属性

引入横向布局纵向布局解决办法：要么不用P标签，改变元素类型；要么浮动起来P标签是块元素，独占一整行

目录盒子属性解读练习项目训练1：江西卧龙项目堆色块2项目训练2：江西卧龙项目头部的制作项目训练3：江西卧龙项目导航条的制作

练习

一、盒子属性

1、盒子属性任务说明：任务实施1、DIV内容：高宽300px；边框为1px；背景灰色

1、盒子属性任务说明：任务实施2、padding内容：Padding上下左右各50px50问题：控制台上内容区域的高宽各撑大了100px？？高宽300px高宽402px解决：若要保留盒子的宽高300px，要各减100px

1、padding属性任务说明：任务实施2、margin内容：margin上下左右各50px50高宽300px*{margin:0px;padding:0;}取消默认边距

2、padding属性任务实施Padding:1个参数代表上下左右Padding:2个参数代表上下左右Padding:3个参数代表上左右下Padding:4个参数代表上右下左padding:50px复合写法，代表上下左右填充值； padding-top:50px; padding-right:50px; padding-bottom:50px; padding-left:50px;Margin:20pxauto;

2、margin属性注意事项Margin叠加当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题Margin传递margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的解决方法：只给一个盒子加margin边距，另一个不加！左右是不会叠加解决方法：1、用padding-top（加给谁？）2、父级加overflow:hidden;3、父级display:inline-block;（内联块）4、父级浮动float:left;

练习——布局1、大盒子wrap（背景色为红色）里面装了个小的盒子main（背景色为白色）2、白色的盒子里，有文字：1个标题h2,1个段落p标签形成代码（html部分）：

练习——测量

练习——加基础CSS（宽高背景）父级盒子 width:551px; /*height:137px;*//*高度自适应*/ 背景色：红色 子级盒子 width:528px; height:66px; 背景色：白色

练习——加CSS边距、填充子级盒子 padding:23px10px3px0; margin:8px9px37px4px;

练习——CSS文字属性标题h2：字号14px，行高，字体颜色：段落P：字号12px，行高，字体颜色：，首行缩进2个字符

练习h3class=tahref=#target=_blankHTMLemlt;insgt;/em标签,emins/em的英文全称是??_百度知道/a/h3Span节点标签

项目CSS修饰——堆色块2

堆色块训练2100px59px463px254px292px250px82px

堆色块训练2——头部制作分析：1、大盒子id=header（高100，宽1000）里面装了2个小的盒子class=logoclass=search2、logo盒子里放了个h1,h1里放了个超链接；search里放表单，表单放文本输入框与提交按钮形成代码（html部分）：

堆色块训练2——头部制作分析：1、大盒子id=header（高100，宽1000）里面装了2个小的盒子class=logoclass=search2、logo盒子里放了个h1,h1里放了个超链接；search里放表单，表单放文本输入框与提交按钮形成代码（CSS部分）：/*页面开始*/#wrapper{width:1000px;margin:0pxauto;}#header{width:1000px;height:100px;/*background:#999;*/overflow:hidden;}#header.logo{height:21px;width:243px;float:left;mar