css技術(shù)概述webppt課件(參考版)
2025-01-22 19:17本頁(yè)面
【正文】 Marginleft: auto。 Marginright:auto。 Border:10px solid CCFF00。 Height:250px。 Width:80%。 } 清除環(huán)繞元素屬性 Clear: left | right | both 固定 高度 寬度 與 自適應(yīng) 高度 寬度 Width:200px。 Width:350px。 Backgroundcolor:FFCC00 Float:left。 } 浮動(dòng)屬性 Float: none | left | right 該屬性的值指出了對(duì)象浮動(dòng)以及如何浮動(dòng)， None : 不浮動(dòng) Left: 對(duì)象將向左浮動(dòng) Right: 對(duì)象將向右浮動(dòng) div1 { Heigth:200px。 Left:200px。 Height:250px。 } div2{ Backgroundcolor:9999FF。 Left:40px。 Position:relative。 div1{ Height:200px。 Left:40px。 Position:absolute。通過(guò)設(shè)置 top, right, bottom, left 的值， 可以使絕對(duì)定位的元素放到任何 地方。 Left:40px。 div1{ Position:relative。 二、 CSS的布局基礎(chǔ) 定位屬性 position: static | absolute | fixed | relative Static 靜態(tài) （默認(rèn)） 它會(huì)按照普通順序生成，就如它們?cè)?html中的出現(xiàn)順序一樣。 CSS 背景屬性指的是 content 和 padding 區(qū)域。 CSS 邊框?qū)傩? (border) 用來(lái)設(shè)定一個(gè)元素的邊線。 上面的代碼表示，上間隙為 1cm，右間隙為 2cm，下間隙為 3cm，左間隙為4cm。示例如下： 這個(gè)屬性用來(lái)設(shè)定上間隙的寬度。 你可以為上下左右間隙設(shè)置相同的寬度。示例如下： .d1 {paddingtop:1cm} 下間隙屬性 (marginbottom) 間隙屬性 (padding). 這個(gè)屬性用來(lái)設(shè)定下間隙的寬度。 這個(gè)屬性用來(lái)設(shè)定右間隙的寬度。示例如下： .d1{paddingleft:1cm} 演示示例 右間隙屬性 (paddingright) 左間隙為 4cm。 演示示例： 上下左右邊距寬度相同 演示示例： 上下左右邊距寬度各不相同 CSS 間隙屬性 (Padding) 間隙屬性 (padding)是用來(lái)設(shè)置元素內(nèi)容到元素邊界的距離。示例入下： .d1 {margin:1cm} 你也可以分別設(shè)置邊距，順序是上，右，下，左。示例如下： .d1{marginbottom:1cm} 邊距屬性 (margin) 這個(gè)屬性是設(shè)定邊距寬度的一個(gè)快捷的綜合寫(xiě)法，用這個(gè)屬性可以同時(shí)設(shè)定上下左右邊距屬性。示例如下： .d1 {marginright:1cm} 上邊距屬性 (margintop) 這個(gè)屬性用來(lái)設(shè)定上邊距的寬度。示例如下： .d1{marginleft:1cm} 演示示例 右邊距屬性 (marginright) 上下左右邊距寬度相同：上下左右邊距寬度相同。 演示示例： 設(shè)置單邊邊框?qū)傩缘氖纠? CSS 邊距屬性 (Margin) 邊距屬性是用來(lái)設(shè)置頁(yè)面中一個(gè)元素所占空間的邊緣到相鄰元素之間的距離。 設(shè)定左邊框?qū)傩裕憧梢允褂?borderleft, borderleftwidth, borderleftstyle, borderleftcolor。 設(shè)定下邊框?qū)傩?，你可以使?borderbottom, borderbottomwidth, borderbottomstyle, borderbottomcolor。 設(shè)定上邊框?qū)傩?，你可以使?bordertop, bordertopwidth, bordertopstyle, bordertopcolor。} 上下左右四個(gè)邊框不但可以統(tǒng)一設(shè)定，也可以分開(kāi)設(shè)定。} 邊框?qū)傩?(border) 這個(gè)屬性是邊框?qū)傩缘囊粋€(gè)快捷的綜合寫(xiě)法，它包含 borderwidth, borderstyle和bordercolor。例句如下： .d5 {bordercolor:gray?？梢杂媒^對(duì)長(zhǎng)度單位 (cm, mm, in, pt, pc)或者用相對(duì)長(zhǎng)度單位 (em, ex, px)。 body {background:99FF00 url(../images/css_tutorials/) norepeat fixed 40px 100px} 上面的代碼表示，網(wǎng)頁(yè)的背景顏色是翠綠色，背景圖片是 ，背景圖片不重復(fù)顯示，背景圖片不隨內(nèi)容滾動(dòng)而動(dòng)，背景圖片距離網(wǎng)頁(yè)最左面 40px，距離網(wǎng)頁(yè)最上面 100px。 backgroundposition:20px 60px} 上面的代碼表示背景圖片的初始位置距離網(wǎng)頁(yè)最左面 20px，距離網(wǎng)頁(yè)最上面 60px。 body {backgroundimage:url(../images/css_tutorials/)。 backgroundattachment:fixed} 上面的代碼表示圖片固定不動(dòng)，不隨內(nèi)容滾動(dòng)而動(dòng)。 body {backgroundimage:url(../images/css_tutorials/)。這個(gè)屬性有兩個(gè)值，一個(gè)是 scroll，一個(gè)是 fixed。 backgroundrepeat:repeaty} 上面的代碼表示圖片豎向
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1