HTML5+CSS3+JavaScript+Bootstrap網(wǎng)站開發(fā)技術（第3版）課件 第4章 規(guī)劃頁面 使用CSS實現(xiàn)精美布局

第4章規(guī)劃頁面使用CSS實現(xiàn)精美布局CSS布局常用屬性2CSS網(wǎng)頁布局3應用案例4CSS盒模型1小結54.1CSS盒模型盒模型用于CSS控制頁面.頁面上的所有元素，文本、圖像、超級鏈接、DIV塊等，都可以被看作盒子。盒子將頁面元素包含在一個矩形區(qū)域內(nèi)，這個矩形區(qū)域也稱為“盒模型”。網(wǎng)頁頁面布局的過程，可以看作在頁面空間中擺放盒子的過程。4.1CSS盒模型盒模型由內(nèi)到外依次分為內(nèi)容(content)，填充(padding)，邊框(border)和邊界(margin)四部分。4.1CSS盒模型4.1.1內(nèi)容(content)內(nèi)容是盒模型中必須有的部分。內(nèi)容的大小由屬性寬度和高度定義。width:auto|length;height:auto|length;示例：

demo0401.htmldemo0402.html4.1CSS盒模型4.1.2邊界(margin)邊界是盒子與其他盒子之間的距離，使用margin屬性定義。margin:auto|length;length是長度值或百分比值，百分比值是基于父對象的值。長度值可以為負值，實現(xiàn)盒子間的重疊效果。margin有四個子屬性margin-top、margin-bottom、margin-left、margin-right。demo0403.html4.1CSS盒模型4.1.3填充(padding)填充用來設置內(nèi)容和盒子邊框之間的距離，使用padding屬性。padding:length;length可以是長度值或百分比值。Padding有四個子屬性padding-top、padding-bottom、padding-left、padding-right。demo0404.html4.1CSS盒模型4.1.4邊框(border)邊框是盒模型中介于填充(padding)和邊界(margin)之間的分界線用border-width、border-style、border-color屬性定義邊框的寬度、樣式、顏色。4.1CSS盒模型1．邊框樣式用border-style屬性描述，取值如下?！one：無邊框，默認值

·hidden：隱藏邊框·dashed：點劃線構成的虛線邊框·dotted：點構成的虛線邊框·solid：實線邊框

·double：雙實線邊框·groove：根據(jù)color值，顯示3D凹槽邊框·ridge：根據(jù)color值，顯示3D凸槽邊框·inset：根據(jù)color值，顯示3D凹邊邊框·outset：根據(jù)color值，顯示3D凸邊邊框4.1CSS盒模型2．邊框?qū)挾扔胋order-width屬性描述，值可以是關鍵字medium、thin、thick或長度值或百分比。3．邊框顏色用border-color屬性描述，值同color屬性，可以是RGB值，顏色名等。demo0405.htmldemo0406.html4.2CSS布局常用屬性CSS布局完全區(qū)別于傳統(tǒng)的表格布局。用<div>元素進行將頁面整體分為若干個盒子，而后對各個盒子進行定位。布局方式主要有定位式和浮動式兩種，布局屬性為定位屬性(position)和浮動屬性(float)。4.2CSS布局常用屬性4.2.1定位屬性(position)盒子可以分為塊內(nèi)元素和行內(nèi)元素兩種.CSS通過display屬性來定義盒子是塊內(nèi)元素還是行內(nèi)元素。默認情況下，作為塊元素的盒子，例如，<div>、<p>，HTML規(guī)則約定上下排列；行內(nèi)元素，例如<span>、<a>，HTML規(guī)則約定盒子左右排列。4.2CSS布局常用屬性使用position屬性可以精確控制盒子的位置.position:static|relative|absolute|fixed;static：靜態(tài)定位，默認。absolute絕對定位relative相對定位fixed固定定位4.2CSS布局常用屬性1.static：靜態(tài)定位.默認定位值，盒子按照HTML規(guī)則定位，定義top、left、bottom、right無意義；示例：demo0407.html2.relative：相對定位。通過top、left、bottom、right等屬性值定位元素相對其原本應顯示位置的偏移位置，占用原位置空間；示例：demo0408.html4.2CSS布局常用屬性3.absolute：絕對定位通過top、left、bottom、right等屬性值定位盒子相對其具有position設置的父對象的偏移位置，不占用原頁面空間.兩種情況父對象具有position屬性設置demo0409.html父對象無position屬性設置demo0409.html的改進4.2CSS布局常用屬性4．層疊定位屬性(z-index)層疊定位屬性(z-index)定義頁面元素的層疊次序。z-index的取值為可以為負的數(shù)，表示各元素間層次關系，值大者在上，當為負數(shù)時表示該元素位于頁面之下。示例demo0410.html4.2CSS布局常用屬性4.2.2浮動屬性(float)float屬性可以控制盒子左右浮動，直到邊界碰到父對象或另一個浮動對象。float:none|left|right;none：默認值，元素不浮動；left：元素向父對象的左側(cè)浮動；right：元素向父對象的右側(cè)浮動；4.2CSS布局常用屬性1．基本浮動定位向左或向右浮動的盒子，不再占用原本在文檔中的位置，其后續(xù)元素會自動向前填充，若遇到浮動對象邊界則停止。示例demo0411.html2．清除浮動屬性demo0412.htmlclear:none|left|right|both;none：默認值，允許浮動；left：清除左側(cè)浮動；right：清除右側(cè)浮動；both：清除兩側(cè)浮動；4.3CSS的網(wǎng)頁布局

網(wǎng)頁布局結構，按照列數(shù)劃分可分為單列、兩列和三列布局。多數(shù)網(wǎng)站的網(wǎng)頁設計采用多種布局結構混合嵌套。4.3.1單列布局示例4-13是常見的單列三塊布局。利用<div>標記劃分三個盒子；在各自CSS中定義各盒子的大小邊界等屬性，實現(xiàn)三塊居中自適應布局。4.3CSS的網(wǎng)頁布局4.3.2兩列布局1.傳統(tǒng)的兩列布局

使用兩個盒子，第一個盒子（第一列）列位置應在左側(cè)，第二個盒子（第二列）應在右側(cè)，可fixed或float設定；寬度可用像素值、百分比設定或用相對于字號設置。demo0414.html4.3CSS的網(wǎng)頁布局如果左右兩個盒子沒有設置統(tǒng)一的高度，頁面效果存在問題；設置盒子的padding屬性，也將影響顯示效果示例存在的問題4.3CSS的網(wǎng)頁布局2.改進的盒布局使用盒布局，設置左右兩個盒子的外層容器的樣式box屬性，不再使用float屬性。為外層的id為container的div元素樣式中應用了box屬性。在Firefox瀏覽器中需要寫成 display:-moz-box;在Chrome瀏覽器中需要寫成 display:-webkit-box;4.3CSS的網(wǎng)頁布局3.嵌套的2列布局頂部固定，一列固定、一列變寬的布局是常見的布局形式。通常，側(cè)邊的導航欄寬度固定，而主體的內(nèi)容欄寬度是可變的。使用CSS3的盒布局實現(xiàn)。盒布局及相關屬性可以很好的解決寬度可變布局及布局順序問題。4.3CSS的網(wǎng)頁布局盒布局及相關屬性屬性功能box-flex設置彈性盒布局box-ordinal-group設置盒元素的顯示順序box-orient設置盒元素的顯示方向box-sizing指定使用width、heignt屬性時，指定的值是否包括元素的pading值與border值。4.3CSS的網(wǎng)頁布局4.3CSS的網(wǎng)頁布局4.3.3三列布局傳統(tǒng)三列布局可以使用float屬性實現(xiàn)使用CSS3實現(xiàn)，重點以下三個屬性display:box;box-ordinal-groupbox-flex4.3CSS的網(wǎng)頁布局嵌套的三列布局頂部是一個div盒子，中部是并排2個或3個div盒子，下面還有1個div盒子。示例4-184.4應用案例4.4.1用DIV+CSS實現(xiàn)圖文混排案例demo0419.html4.4應用案例2.對示例4-19的改進demo0420.html4.4應用案例4.4.2二級導航菜單制作案例DIV+CSS布局中多通過控制列表樣式制作導航菜單，主要用到<ul>、<li>、<a>三組標記。1．建立一級菜單2.定義CSS樣式3.創(chuàng)建二級菜單4.4應用案例4．橫向二級導航菜單小結本章主要內(nèi)容如下。盒模型。盒模型是CSS控制頁面的最基本、最重要的概念之一，讀者必須充分理解其概念和屬性設置。常用布局屬性，主要包括定位屬性和浮動屬性。通過不同屬性值的設置實現(xiàn)對頁面各元素的絕對和相對位置及層疊次序的布局，使頁面布局靈活美觀。頁面整體布局。