參考說明成果day

1、day10一.背景1.背景顏色2.背景3.背景的平鋪4.背景圖的定位5.背景圖的尺寸6.背景圖的固定background-attaent:將背景圖固定在網(wǎng)頁某個(gè)位置，一直在可視的區(qū)域中顯示，不會隨著網(wǎng)頁滾動條改變位置取值：1.scroll 默認(rèn)值，會隨著網(wǎng)頁滾動條改變位置2.fixed 固定，不會隨著網(wǎng)頁滾動條改變位置background-size: width height取值：1.以 px 為的數(shù)字2.%cover，填滿容器，的寬高比不變，鋪滿整個(gè)容器的寬高，溢出的部分會被裁減掉將背景圖同比縮放，直到背景圖完容器，不留一絲空白，溢出的部分會被裁減掉可能會顯示不完整，但是容器完全被背景圖充滿

2、contain自身寬高比不變，但是，要縮放到能夠完全展示出來，所以會有空白區(qū)域background-ition：x y取值以 px 為的數(shù)字指的是，在水平和垂直方向的偏移量x% y%50% 50%中間0% 0% 左上100% 100% 右下關(guān)鍵字 x：left/center/right y: top/center/bottombackground-repeat:取值1.repeat 默認(rèn)值，平鋪 2.repeat-x 水平方向平鋪 3.repeat-y 垂直方向平鋪4.no-repeat 不平鋪，只顯示一張background-image:url(資源路徑)background-color:取

3、值合法的顏色值transparent;透明注意：背景色的填充，默認(rèn)從邊框位置處開始7.背景的簡寫方式練習(xí)二.漸變gradient1.漸變2.漸變的主要-色標(biāo)3.漸變的分類4.線性漸變background-image取值：新版本：linear-gradient(方向，色標(biāo) 1，色標(biāo) 2)色標(biāo)的寫法：顏色的合法值 位置的百分比方向取值：to top/right/bottom/left角度 按順時(shí)針計(jì)算0degto top 90deg to right 180deg to bottom 270deg to left線性漸變，以直線的方向來填充漸變色徑向漸變，以圓形的方式實(shí)現(xiàn)漸變色3.重復(fù)漸變，將線性

4、漸變，或徑向漸變 重復(fù)幾次色標(biāo)，一種顏色以及他出現(xiàn)的位置一個(gè)漸變至少有兩個(gè)色標(biāo)多種顏色平緩變化的一種顯示效果先寫結(jié)構(gòu)布局定義寬高，大體的位置背景顏，邊框所有文字的所有微調(diào)從外往里寫，從左往右，從上往下寫在一個(gè)屬性中，指定背景多個(gè)值屬性：background取值：color url repeataentition background:#faa url(08.png) no-repeat center center;5.徑向漸變6.重復(fù)線性漸變7.重復(fù)的徑向漸變8.瀏覽器兼容性三.文本格式化（重點(diǎn)*）1.字體屬性1.指定字體的類型font-family:類型 1,類型 2.2.字體大小 font

5、-size以 px、pt 為的數(shù)字em rem3.字體加粗 font-weight:bold/normal/lighter/bolder無的數(shù)字 100-1000 整百數(shù) 常用 400-9004.字體樣式 font-style normal italic5.小型大寫字母 font-variant: normalsmall-caps;6.字體屬性的簡寫方式各個(gè)瀏覽器新版本都漸變對于不支持的舊版本，可以添加瀏覽器內(nèi)核前綴的方式，做兼容，讓瀏覽器支持chrome&safari: -webkit- firefox:-moz-ie:-ms-opera: -o-background:-webkit-lin

6、ear-gradient(left,#0066990%,#f0025%,#99006650%,#ff075%,#996600 100%);repeating-radial-gradient(50px at center center,#060606 0px,#af8bd8 20px,#292727 35px);repeating-linear-gradient(to right,#faa 0px,#50px);注意在重復(fù)漸變中，色標(biāo)的位置，要給絕對值數(shù)字，不要用%background-image:radial-gradient(半徑 at 圓心,色標(biāo) 1,色標(biāo) 2);半徑：以 px 為的數(shù)字圓

7、心：x y，以 px 為的具體數(shù)值x% y% 元素的寬高占比關(guān)鍵字 x:left/center/righty:top/center/bottom舊版本寫法：-瀏覽器內(nèi)核-linear-gradient(方向,色標(biāo) 1,色標(biāo) 2)方向 top/right/bottom/left練習(xí)：2.文本格式化5.首行縮進(jìn)6.文本的陰影練習(xí)作業(yè)：transition: 1s;在 04_ex 中，創(chuàng)建div#d2,內(nèi)容隨意，添加以下樣式 1.文本水平兩端對齊有下劃線行高是字體大小的 1.5 倍首行縮進(jìn) 50pxtext-shadow:h-shadow v-shadow blur color;text-inden

8、t:以 px 為的數(shù)字1.文本顏色color:合法的顏色值2.文本的水平對齊方式 text-alignleft/center/right/justify(兩端對齊)3.行高定義一行數(shù)據(jù)的高度如果行高大于字體本身的大小，該行文本在行高內(nèi)成垂直居中的顯示效果line-height:以 px 為的數(shù)字，一般與容器的高相同無數(shù)字，line-height:2; 是字體大小的倍數(shù)4.線條的修飾 text-decorationnone 沒有線條，去掉a的下劃線overline 上劃線 3.underline 下劃線 4.line-through 刪除線創(chuàng)建 04_ex，一個(gè)div 內(nèi)容隨意，最好中英結(jié)合，設(shè)置以下樣式字體為