《Web前端開發(fā)技術(shù)》課件-3-3 幫助信息頁面-默認(rèn)樣式

幫助信息頁面制作—默認(rèn)樣式及清除

引入h1-h6標(biāo)題列舉出有默認(rèn)樣式的元素：P標(biāo)簽Ulli/olli/dldtdd

目錄元素的默認(rèn)CSS樣式案例訓(xùn)練一：照片墻放大案例訓(xùn)練二：“練習(xí)”一、清除CSS默認(rèn)樣式

默認(rèn)樣式img標(biāo)簽基線的位置改變xyz字號為60px空隙變更大了解決方案：1、以bottom為對齊方式；2、將imgdisplay顯示方式為塊，不存在對齊基線問題清除樣式Img{display:block;}//解決圖片樣式任務(wù)實(shí)施二、樣式的繼承

樣式的繼承

樣式的繼承可以理解為子標(biāo)簽的樣式從父標(biāo)簽或祖先標(biāo)簽中繼承過來。

與元素外觀（文字顏色、字體等）相關(guān)的樣式會被繼承；與元素在網(wǎng)頁上的布局相關(guān)的樣式不會被繼承。在樣式中使用inherit這個特別設(shè)立的值可以強(qiáng)行繼承，明確指示瀏覽器在該屬性上使用父元素樣式中的值。

三、塊與內(nèi)聯(lián)

塊與內(nèi)聯(lián)

“塊”特點(diǎn) 1.獨(dú)占一行 2.支持所有樣式 3.不設(shè)置寬時，寬等于父標(biāo)簽寬

“內(nèi)聯(lián)”特點(diǎn) 1.在一行顯示 2.不支持寬高，在margin和padding也有一些問題 3.寬度由內(nèi)容撐開 4.代碼換行會被解析

顯示框類型：display block inline inline-block none

特殊的內(nèi)聯(lián)元素：img二、案例——照片墻放大

項(xiàng)目實(shí)訓(xùn)：照片墻制作

項(xiàng)目分析1：布局方式divtable√<divid="wrapper"> <h1>HoverImagesGallery!</h1> <ul> <li> <ahref="#"> <imgsrc="images/photo01.jpg"class="small"/> </a> </li> </ul></div>復(fù)制19次

項(xiàng)目分析2：ps測量標(biāo)題： 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;

項(xiàng)目分析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; }

項(xiàng)目分析3：css樣式修飾2圖片墻與標(biāo)題間距： #wrapperul{margin-top:13px;}圖片與圖片間距： #wrapperulli{float:left;margin:3px;}#wrapperullia{ display:block; width:116px; height:91px; border:1pxsolid#ddd; background:#eee; position:relative;}

項(xiàng)目分析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; }位置定位

項(xiàng)目分析3：css樣式修飾（擴(kuò)展）鼠標(biāo)經(jīng)過三、練習(xí)練習(xí)——布局1、大盒子wrap（背景色為紅色）

里面裝了個小的盒子main（背景色為白色）2、白色的盒子里，有文字：1個標(biāo)題h2,1個段落p標(biāo)簽形成代碼（html部分）：練習(xí)——測量練習(xí)——加基礎(chǔ)CSS（寬高背景）父級盒子 width:551px; /*height:137px;*//*高度自適應(yīng)*/ 背景色：紅色 子級盒子 width:528px; height:66px; 背景色：白色練習(xí)——加CSS邊距、填充子級盒子

padding:23px10px3px0; margin:8px9px37px4px;練習(xí)——CSS文字屬性標(biāo)題h2：字號14px，行高，字體顏色：段落P：字號12px，行高，字體顏色：，首行縮進(jìn)2個字符練習(xí)<h3class="t"