十天web頁面布局應用課件六

web標準頁面布局應用

第六課主講：劉靜

郵箱：目標CSS盒子模型塊狀元素與內(nèi)聯(lián)元素CSS盒子模型CSS盒子模型CSS盒子模型W3C組織建議把所有網(wǎng)頁上的對像都放在一個盒(box)中，-----盒子模型設計師可以通過創(chuàng)建定義來控制這個盒子的屬性，這些對像包括段落、列表、標題、圖片以及層<div>。盒模型主要定義四個區(qū)域：內(nèi)容(content)、填充(padding)、邊框(border)和邊界(margin)。這里的邊界我們也稱之為：外邊距、外補丁；填充也叫：內(nèi)邊距、內(nèi)補丁整個盒模型在頁面中所占的寬度是由左邊界+左邊框+左填充+內(nèi)容+右填充+右邊框+右邊界組成CSS盒子模型CSS盒子模型由“盒子”堆出來的網(wǎng)頁版面功能語法設置元素的寬度width:100px;設置元素高度height:100px;設置元素的某一個方向外邊距margin-top/right/bottom/left:10px;通知參數(shù)個數(shù)不同來設置元素的外邊距margin:10px;上下左右4個方向margin:10px20px;上下左右margin:10px20px30px;上左右下margin:10px20px30px40px;上右下左設置元素的內(nèi)邊距padding:上右下左CSS控制元素的尺寸外邊距合并外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者CSS控制邊框?qū)傩怨δ苷Z法設置邊框粗細border-top-width:12px；設置邊框樣式border-top-style:solid[實線]、dashed[虛線]設置邊框顏色border-top-color:#000000設置某一邊框?qū)傩缘暮喗莘绞?/p>

border-邊框位置:線寬線型顏色;

設置某一元素四條邊框?qū)傩缘暮喗莘绞絒僅限于四條邊框?qū)傩酝耆嗤琞

border:線寬線型顏色;CSS中元素的分類我們在布局頁面的時候，會將HTML標簽（元素）分成兩種，塊狀元素和內(nèi)聯(lián)元素（我們平時用到的標簽div和p就是塊狀元素，鏈接標簽a就是內(nèi)聯(lián)元素），可以通過CSS修改元素的類型。1、塊狀元素：{display:block}一般是其他元素的容器，可容納內(nèi)聯(lián)元素和其他塊狀元素，塊狀元素排斥其他元素與其位于同一行，寬度(width)和高度(height)起作用。常見塊狀元素為div、p、body、h1~h6等塊狀元素很霸道：能設寬和高！，獨占一行！CSS中元素的分類2、內(nèi)聯(lián)元素{display:inline}內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素，它允許其他內(nèi)聯(lián)元素與其位于同一行，但寬度(width)和高度(height)不起作用。常見內(nèi)聯(lián)元素為a、em、span等。內(nèi)聯(lián)元素很溫柔：不能設寬和高！不影響換行！（就像橡皮筋包住字）思考如何使內(nèi)聯(lián)元素的寬高起作用？CSS控制背景功能語法背景background:顏色圖片平鋪方式固定方式位置背景顏色background-color:#ccc;背景圖像background-image:url(背景圖像的位置及全稱)背景圖像的重復方式background-repeat:[repeat、no-repeat、repeat-x、repeat-y]背景圖像的位置background-position:top[leftcenterright]center[leftcenterright]bottom[leftcenterright],x坐標y坐標[第一個值是水平位置，第二個值是垂直位置。左上角是00。單位是像素(0px0px)]背景圖像的依附方式background-attachment:[scroll、fixed]CSSSprites(CSS精靈)制作翻轉(zhuǎn)按鈕效果的兩種方法：第一種：我們需要兩張圖片，一張正常狀態(tài)的圖片，一張鼠標經(jīng)過圖片，做這種