《Web前端开发技术》课件-3-3 帮助信息页面-默认样式

帮助信息页面制作—默认样式及清除

引入h1-h6标题列举出有默认样式的元素：P标签Ulli/olli/dldtdd

目录元素的默认CSS样式案例训练一：照片墙放大案例训练二：“练习”一、清除CSS默认样式

默认样式img标签基线的位置改变xyz字号为60px空隙变更大了解决方案：1、以bottom为对齐方式；2、将imgdisplay显示方式为块，不存在对齐基线问题清除样式Img{display:block;}//解决图片样式任务实施二、样式的继承

样式的继承

样式的继承可以理解为子标签的样式从父标签或祖先标签中继承过来。

与元素外观（文字颜色、字体等）相关的样式会被继承；与元素在网页上的布局相关的样式不会被继承。在样式中使用inherit这个特别设立的值可以强行继承，明确指示浏览器在该属性上使用父元素样式中的值。

三、块与内联

块与内联

“块”特点 1.独占一行 2.支持所有样式 3.不设置宽时，宽等于父标签宽

“内联”特点 1.在一行显示 2.不支持宽高，在margin和padding也有一些问题 3.宽度由内容撑开 4.代码换行会被解析

显示框类型：display block inline inline-block none

特殊的内联元素：img二、案例——照片墙放大

项目实训：照片墙制作

项目分析1：布局方式divtable√<divid="wrapper"> <h1>HoverImagesGallery!</h1> <ul> <li> <ahref="#"> <imgsrc="images/photo01.jpg"class="small"/> </a> </li> </ul></div>复制19次

项目分析2：ps测量标题： text-align:center; color:#933; font-size:16px; line-height:26px; border-bottom:1pxdashed#ccc;图片超链接： width:116px; height:91px; border:1pxsolid#ddd; background:#eee;图片： width:100px; height:75px; border:1pxsolid#aaaaaa; background::#fff; padding:2px;

项目分析3：css样式修饰1申明： *{margin:0px;padding:0px;} ul{list-style:none;} a{text-decoration:none;}Div选择器： #wrapper{width:620px;margin:20pxauto;}#wrapperh1{ text-align:center; color:#933; font-weight:100; font-size:16px; line-height:26px; border-bottom:1pxdashed#ccc; }

项目分析3：css样式修饰2图片墙与标题间距： #wrapperul{margin-top:13px;}图片与图片间距： #wrapperulli{float:left;margin:3px;}#wrapperullia{ display:block; width:116px; height:91px; border:1pxsolid#ddd; background:#eee; position:relative;}

项目分析3：css样式修饰3#wrapperullia.small{ width:100px; height:75px; border:1pxsolid#aaaaaa; background::#fff; padding:2px; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; }位置定位

项目分析3：css样式修饰（扩展）鼠标经过三、练习练习——布局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="t"