




版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
1、第6章 CSS樣式高級(jí)應(yīng)用本章目標(biāo)熟悉頁面布局概念掌握盒子模型和盒子的浮動(dòng)與定位掌握使用CSS+DIV布局2CSS盒子模型CSS盒子模型概述盒模型,又稱框模型(Box Model)。顧名思義,就是一個(gè)盒子。在盒子模型中,頁面中所有的HTML元素都被看作成一個(gè)個(gè)盒子。元素的外邊距(margin)、邊框(border)、內(nèi)邊距(padding)、內(nèi)容(content)就構(gòu)成了CSS盒模型。3盒子模型屬性border邊框?qū)傩裕涸O(shè)置邊框的顏色(border-color)、寬度(border-width)以及樣式(border-style)。4屬性描述border-color規(guī)定邊框的顏色border-
2、width規(guī)定邊框的寬度border-style規(guī)定邊框的樣式盒子模型屬性border-color:邊框顏色。語法:邊框也可以設(shè)置單邊顏色,CSS提供了4個(gè)單邊邊框顏色屬性,分別用來設(shè)置上、右、下、左邊框的顏色:border-top-color:顏色值border-right-color:顏色值border-bottom-color:顏色值border-left-color:顏色值5border-color:color盒子模型屬性border-width:邊框?qū)挾?。語法:與border-color相似,同樣提供了4個(gè)單邊邊框?qū)挾葘傩裕篵order-top-width:寬度值border-rig
3、ht-width:寬度值border-bottom-width:寬度值border-left-width:寬度值6border-width:medium | thin| thick | length盒子模型屬性border-style:邊框樣式。語法:與border-color相似,同樣提供了4個(gè)單邊邊框?qū)挾葘傩裕篵order-top-style:樣式值;border-bottom-style:樣式值;border-left-style:樣式值;border-right-style: 樣式值;7border-style:none | hidden | dotted | dashed | sol
4、id |double;盒子模型屬性border-style屬性取值8取值含義none默認(rèn)值,無邊框hidden與“none”相同。應(yīng)用于表時(shí)例外,用于解決邊框沖突dotted點(diǎn)線邊框dashed虛線邊框solid實(shí)線邊框double雙實(shí)線邊框groove邊框具有立體感的溝槽ridge邊框成脊形Inset使整個(gè)邊框凹陷,即在邊框內(nèi)嵌入一個(gè)立體邊框。效果顯示取決于border-color的值outset使整個(gè)邊框凸起,即在邊框內(nèi)嵌入一個(gè)立體邊框。效果顯示取決于border-color的值盒子模型屬性border邊框?qū)傩允纠? h4 text-align:center; background:#CF
5、F; #p1 background:#9CF; border:5px double #333; #p2 border-style:dashed solid; #p3 border-style:dotted; border-width:10px 15px; #p4 border-width:20px; border-style:groove; border-color:#0F0; 設(shè)置邊框 人生若只如初見,何事秋風(fēng)悲畫扇。 等閑變卻故人心,卻道故人心易變。 驪山語罷清宵半,淚雨霖鈴終不怨。 何如薄幸錦衣郎,比翼連枝當(dāng)日愿。盒子模型屬性padding屬性:是盒子的內(nèi)邊距,也稱為內(nèi)邊界,表示邊框和內(nèi)
6、容之間的距離。語法:說明與屬性border類似padding,也可以設(shè)置1、2、3、4個(gè)屬性值。 如果需要單獨(dú)設(shè)置某一個(gè)方向的內(nèi)邊距,使用padding-top、padding-right、padding-bottom、padding-left來設(shè)置。10padding :長(zhǎng)度| 百分比padding-top: 10px; /*設(shè)置上內(nèi)邊界*/padding-right: 1em; /*設(shè)置右內(nèi)邊界*/padding-bottom:50px; /*設(shè)置下內(nèi)邊界*/padding-left: 20%; /*設(shè)置左內(nèi)邊界*/padding:10px 20px 30px 40px; /*設(shè)置上下左右
7、內(nèi)邊界*/盒子模型屬性margin屬性:盒子的外邊距。外邊距的屬性有五種,即margin-top、margin-right、margin-bottom、margin-left以及綜合了以上四種方法的快捷外邊距屬性margin。語法:11margin-(top|right| bottom | left:長(zhǎng)度單位|百分比單位|automargin:5px 10px 15px 20px;/*分別設(shè)置上下左右四個(gè)邊界為5、10、15、20px */margin:5px; /*四個(gè)邊界均設(shè)置為5px*/margin:5px 10px;/*上下邊界設(shè)置為5px,左右邊界設(shè)置為10px*/margin:5p
8、x 10px 15px /*上邊界設(shè)置為5px,左右邊界設(shè)置為10px, 下邊界設(shè)置為15px*/盒子之間的關(guān)系標(biāo)準(zhǔn)文檔流“標(biāo)準(zhǔn)文檔流”(Normal Document Stream),簡(jiǎn)稱“標(biāo)準(zhǔn)流”,是指在不使用其他與排列和定位相關(guān)的特殊CSS規(guī)則時(shí),各種元素默認(rèn)的排列規(guī)則。HTML元素基本分為兩類:塊級(jí)元素(block level):每個(gè)塊級(jí)元素都是獨(dú)自占一行,其后的元素也只能另起一行,并不能兩個(gè)元素共用一行。行內(nèi)元素(inline):行內(nèi)元素可以和其他元素處于一行,不用必須另起一行。12盒子之間的關(guān)系定位CSS 提供了三種基本的定位機(jī)制:標(biāo)準(zhǔn)文檔流(標(biāo)準(zhǔn)流)浮動(dòng)定位絕對(duì)定位除非專門指定,
9、否則所有框都在普通流中定位。標(biāo)準(zhǔn)流中的元素的位置由元素在 (X)HTML 中的位置決定。13盒子之間的關(guān)系定位position 屬性:定位的方式基本語法屬性值14position:static | absolute | fixed | relative取值 說明 參照物static 靜態(tài)定位默認(rèn)值。元素出現(xiàn)在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。relative 相對(duì)定位 自己原來的位置absolute 絕對(duì)定位 已定位的祖先元素 / 瀏覽器視口fixed 固定定位 瀏覽器視口(并不是所有的瀏覽器都支持)盒子之間的關(guān)系定位static
10、:靜態(tài)定位,默認(rèn)值,沒有定位。語法:元素的位置由元素在 (X)HTML 中的位置決定。元素框正常生成。塊級(jí)元素生成一個(gè)矩形框,作為文檔流的一部分,行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框,置于其父元素中。15position:static;盒子之間的關(guān)系定位relative:相對(duì)定位,是指相對(duì)于它原來的位置進(jìn)行定位。語法:相對(duì)定位的元素沒有脫離文檔流,只是按照 left、right、top、bottom 值進(jìn)行了位置的偏移。 元素相對(duì)定位后,仍然在文檔流中占據(jù)原來的空間。16position:relative;盒子之間的關(guān)系定位absolute:絕對(duì)定位。相對(duì)于最近的已定位的祖先元素進(jìn)行定位。語法:如果
11、不存在已定位的祖先元素,則相對(duì)于瀏覽器窗口進(jìn)行定位。元素絕對(duì)定位后,將脫離文檔流,不再占據(jù)原來的空間。17position:absolute;盒子之間的關(guān)系定位fixed:固定定位。語法:類似于absolute(絕對(duì)定位),不同的是其定位相對(duì)于視窗。18position:fixed;p.oneposition:fixed;left:5px;top:5px;p.twoposition:fixed;top:30px;right:5px;一些文本。更多的文本。盒子之間的關(guān)系浮動(dòng)把一個(gè)網(wǎng)頁元素移動(dòng)到網(wǎng)頁(或者其他包含塊)的一邊,脫離常規(guī)文檔流而表現(xiàn)為向右或向左浮動(dòng)。在 CSS 中,任何元素都可以浮動(dòng)。
12、浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框,而不論它本身是何種元素;且要指明一個(gè)寬度,否則它會(huì)盡可能地窄。另外當(dāng)可供浮動(dòng)的空間小于浮動(dòng)元素時(shí),它會(huì)跑到下一行,直到擁有足夠放下它的空間。19盒子之間的關(guān)系浮動(dòng)float語法:說明:浮動(dòng)的框可以向左或向右移動(dòng),直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂S捎诟?dòng)框不在文檔的普通流中,所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。20float:right | left | none盒子之間的關(guān)系浮動(dòng)右浮動(dòng)示例:21盒子之間的關(guān)系浮動(dòng)左浮動(dòng)示例:22盒子之間的關(guān)系浮動(dòng)多個(gè)框左浮動(dòng)示例:23盒子之間的關(guān)系浮動(dòng)多個(gè)框左浮動(dòng)示例(容納不下框3):24盒子之間的關(guān)
13、系浮動(dòng)多個(gè)框左浮動(dòng)示例(高度不一,卡住框3):25盒子之間的關(guān)系浮動(dòng)清除浮動(dòng):使用clear屬性可以讓元素邊上不出現(xiàn)其它浮動(dòng)元素。語法:屬性值:left 不允許元素左邊有浮動(dòng)的元素right 不允許元素的右邊有浮動(dòng)的元素both 元素的兩邊都不允許有浮動(dòng)的元素none 允許元素兩邊都有浮動(dòng)的元素26clear:right | left |both| none盒子之間的關(guān)系浮動(dòng)示例27清理浮動(dòng)案例#fruit float: left;#coat float: right; 這是一個(gè)例子 一個(gè)服裝圖片 一個(gè)水果圖片 這是一個(gè)例子 一個(gè)服裝圖片 一個(gè)水果圖片 DIV+CSS布局DIV+CSS布局的步
14、驟大致4步:第一步:在整體上對(duì)頁面進(jìn)行分塊。第二步:使用標(biāo)記進(jìn)行分塊設(shè)計(jì),清理標(biāo)記的嵌套以及層疊關(guān)系。第三步:對(duì)標(biāo)記進(jìn)行CSS定位。第四步:在各個(gè)塊中填充相應(yīng)的內(nèi)容。28DIV+CSS布局常用的布局效果:29DIV+CSS布局常用頁面布局三行(列)模式:是把整個(gè)頁面水平(垂直)分成三個(gè)區(qū)域,三行模式包含頁面頭部、主題、頁腳三部分,三列模式包含左、中、右三部分。30三行模式 #header, #footer height: 100px; background:#9FF; #content height: 200px; background:#FCF; 頁面頭部 主體 頁腳DIV+CSS布局常用頁面布局三行二列、三行三列模式:將整個(gè)頁面水平分成三個(gè)區(qū)域即將頁面分成三行,然后將中間區(qū)域分成兩列或三列。31三行兩列模式 #header, #footer height: 50px; width:100%; background:#FCF; #content height: 100px; width:100%; #left height: 99px; width:30%; float:left; background:#CCC; #main height: 99px; width:70%; float:left; backgr
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025廣東云浮市“粵聚英才·粵見未來”招聘市級(jí)機(jī)關(guān)事業(yè)單位緊缺人才20人筆試模擬試題及答案解析
- 義務(wù)教育基本均衡發(fā)展國家督導(dǎo)檢查反饋問題整改臺(tái)賬
- 領(lǐng)導(dǎo)在婚宴上的致辭合集13篇
- 小學(xué)三年級(jí)數(shù)學(xué)三位數(shù)乘以一位數(shù)單元測(cè)驗(yàn)訓(xùn)練題大全附答案
- 年產(chǎn)3000噸螺栓生產(chǎn)線新建項(xiàng)目環(huán)評(píng)表
- 聚焦315消費(fèi)者有哪些維權(quán)渠道
- 酒店經(jīng)理培訓(xùn)收獲
- 進(jìn)校園食品安全
- 金融行業(yè)文化培訓(xùn)
- 中華法文化的制度解讀知到課后答案智慧樹章節(jié)測(cè)試答案2025年春西華大學(xué)
- 化工產(chǎn)品代加工協(xié)議模板
- DB11T 3034-2023 建筑消防設(shè)施檢測(cè)服務(wù)規(guī)范
- 美術(shù)作品著作權(quán)轉(zhuǎn)讓合同(2篇)
- 2024分布式電源接入電網(wǎng)技術(shù)規(guī)定
- 專注力訓(xùn)練對(duì)學(xué)習(xí)成績(jī)的提升
- 幼兒園中班社會(huì)《猜猜這是誰的包》課件
- 2024CSCO胰腺癌診療指南解讀
- GB/T 10069.3-2024旋轉(zhuǎn)電機(jī)噪聲測(cè)定方法及限值第3部分:噪聲限值
- 2023年甘肅省蘭州市中考地理真題(原卷版)
- 2024年焊工(初級(jí))證考試題庫及答案(500題)
- 風(fēng)水服務(wù)合同
評(píng)論
0/150
提交評(píng)論