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

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

引入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 h1HoverImagesGallery!/h1 ul li ahref=# imgsrc=images/photo01.jpgclass=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（背景色为