第4章：CSS的盒子模型、浮動和定位分析課件_第1頁
第4章：CSS的盒子模型、浮動和定位分析課件_第2頁
第4章：CSS的盒子模型、浮動和定位分析課件_第3頁
第4章：CSS的盒子模型、浮動和定位分析課件_第4頁
第4章：CSS的盒子模型、浮動和定位分析課件_第5頁
已閱讀5頁，還剩19頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

第四章CSS盒子模型、浮動和定位本章內(nèi)容塊元素和行內(nèi)元素CSS的盒子模型概念主要屬性CSS的浮動左浮動右浮動CSS的定位絕對定位相對定位應(yīng)用CSS相關(guān)知識做極目商城首頁面行內(nèi)元素和塊元素行內(nèi)元素（inlineelement）特點(diǎn)是只占內(nèi)容的寬度，默認(rèn)不會換行，行內(nèi)元素一般放文本或者其它的行內(nèi)元素。常見內(nèi)聯(lián)元素<span><a>塊元素(blockelement)特點(diǎn)不管內(nèi)容有多少，它要換行，同時(shí)沾滿整行，塊元素可以放文本，行內(nèi)元素，塊元素。常見塊元素：<div>，<p>。<div><p><spanclass="s1">span1hello,world</span></p><divclass="s2">div1</div></div>行內(nèi)元素和塊元素區(qū)別行內(nèi)元素只占內(nèi)容的寬度，塊元素內(nèi)容不管內(nèi)容多少要占全行。行內(nèi)元素只能容納文本和其它行內(nèi)元素，塊元素可以容納文本，行內(nèi)元素和塊元素。（與瀏覽器類版本和類型有關(guān)）一些CSS屬性對行內(nèi)元素不生效，比如margin,left,right,width,height。建議盡可能使用塊元素定位。（與瀏覽器版本和類型有關(guān)）行內(nèi)元素和塊元素轉(zhuǎn)換行內(nèi)元素和塊元素轉(zhuǎn)換如果我們希望一個(gè)元素按照塊元素方式顯示

則：display：block；如果我們希望一個(gè)元素按照行內(nèi)元素方式顯示

則：display：inline；盒子模型盒子模型所有的頁面中的元素都可以看成是一個(gè)盒子，占據(jù)著一定的頁面空間。盒子模型的主要屬性在網(wǎng)頁設(shè)計(jì)中常用的屬性名：內(nèi)容（content）、填充（padding）、邊框（border）、邊界（margin）盒子模型幾個(gè)屬性值解釋：幾個(gè)屬性值解釋：border:1pxsolidred;

這里我們給body指定了border的寬度，樣式，顏色（順序可以隨意）margin:0auto;

0表示上下，auto表示左右居中CSS的浮動左浮動是指讓該元素，盡量向左邊移動，讓出自己右邊空間，給下一個(gè)元素顯示。右浮動是指讓該元素，盡量向右移動，直到碰到他的父元素的右邊界。（特別強(qiáng)調(diào)：浮動對塊元素和行內(nèi)元素都生效！）CSS浮動注意事項(xiàng)如果我們的div框很多，外面的框無法容納水平排列的浮動div元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當(dāng)它們向下移動時(shí)可能被其它浮動元素“卡住”，如下圖：CSS的定位CSS定位（positioning）屬性允許你對元素進(jìn)行定位。Position屬性值：static(默認(rèn)值)：元素框正常生成。塊級元素生成一個(gè)矩形框，作為文檔流/標(biāo)準(zhǔn)流的一部分，行內(nèi)元素則會創(chuàng)建一個(gè)或者多個(gè)行框，置于其父元素中。（對定位left，right不生效。）relative：元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀，他原來所占的空間仍保留，從這一角度看，好像改元素仍然在文檔流/標(biāo)準(zhǔn)流中一樣。

absolute：元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個(gè)塊級框，而不論原來它在正常流中生成何種類型的框。fixed：元素框的表現(xiàn)類似于將position設(shè)置為absolute，不過其包含塊是視窗本身。（以body本身來定位）CSS的相對定位相對定位（relative）Relative.html源代碼：

<divclass="s1">div1</div> <divid="special"class="s1">div2</div> <divclass="s1">div3</div> <divclass="s1">div4</div>Relative.css源代碼.s1{width:100px;height:60px; background-color:yellow;

margin-left:10px;float:left;}#special{position:relative;/*這里我們使用了相對定位*/

left:40px;/*在原來的位置，向右移動大?。ㄈ绻蜃笠苿?，則值是負(fù)數(shù)）*/top:70px;/*在原來的位置，向下移動大?。ㄈ绻蛏弦苿樱瑒t值是負(fù)數(shù)）*/}

把上例中relative換成absolute即為絕對定位特別說明relative的參照點(diǎn)是它原來的位置.進(jìn)行一定排列absolute定位是對離自己最近的那個(gè)非標(biāo)準(zhǔn)流盒子而言的CSS的絕對定位流:網(wǎng)頁設(shè)計(jì)中就是指元素(標(biāo)簽)的排列方式。標(biāo)準(zhǔn)流:元素在網(wǎng)頁中就像流水,排在前面的元素(標(biāo)簽)內(nèi)容前面出

現(xiàn),排在后面的元素(標(biāo)簽)內(nèi)容后面出現(xiàn)。非標(biāo)準(zhǔn)流:當(dāng)某個(gè)元素(標(biāo)簽)脫離了標(biāo)準(zhǔn)流(比如因?yàn)橄鄬Χㄎ?排列,我們統(tǒng)稱為非標(biāo)準(zhǔn)排列。極目商城首頁布局實(shí)現(xiàn)第一步：根據(jù)商城首頁規(guī)劃網(wǎng)站極目商城首頁布局實(shí)現(xiàn)完成后基本布局如下圖，我們將其分為六個(gè)部分1.Header

網(wǎng)站頭部

width:

760px

height:

50px

2.search搜索全站的功能，包含網(wǎng)站的logo3.Main

Navigation

導(dǎo)航條，具有按鈕特效。4.左側(cè)分類

height:

根據(jù)類型變化

5.幻燈片放映效果的廣告（暫以靜態(tài)圖片代替）6.廣告極目商城首頁布局實(shí)現(xiàn)第二步：創(chuàng)建html模板及文件目錄等1、創(chuàng)建html模板，將其保存為index.html,并創(chuàng)建文件夾css，images2、創(chuàng)建網(wǎng)站的大框：建立一個(gè)寬100%的盒子，它將包含網(wǎng)站的所有元素。在html文件的<body>和</body>之間寫入 <div

id="container">

Hello

world.

</div>

在css中設(shè)置

background-color:yellow;width:100%; margin:0

auto;

現(xiàn)在你可以看到盒子和瀏覽器的頂端有8px寬的空隙。這是由于瀏覽器的默認(rèn)的填充和邊界造成的。消除這個(gè)空隙，就需要在css文件中寫入：

body{margin:0;padding:0;}極目商城首頁布局實(shí)現(xiàn)第三步：將網(wǎng)站分為六個(gè)div，網(wǎng)頁基本布局的基礎(chǔ)：1.將“第一步”提到的六個(gè)部分都放入盒子中，在html文件中寫入極目商城首頁布局實(shí)現(xiàn)2.為了將六個(gè)部分區(qū)分開來，我們將這六個(gè)部分用不同的背景顏色標(biāo)示出來，在css文件寫入： #page_container{width:100%; margin:0

auto;} #header{height:30px;background-color:aqua;} #searcher{height:88px;background-color:black;} #navi{height:40px;background-color:fuchsia;} #left_menu{background-color:lime;} #adv{background-color:maroon;} #right_view{background-color:navy;} #left_menu,#adv,#right_view{ height:280px; }極目商城首頁布局實(shí)現(xiàn)3、效果如圖（省略了adv，right的截圖）極目商城首頁布局實(shí)現(xiàn)第四步：設(shè)置left、adv、right的寬度，及浮動方式為#left_menu{background-color:lime;width:25%;float:left;}#adv{background-color:maroon;width:50%;float:left;}#right_view{background-color:navy;width:25%;float:left;}效果如圖：極目商城首頁布局實(shí)現(xiàn)第五步：創(chuàng)建一個(gè)存放內(nèi)容的div，用來存放除header以外的部分，用來控制頁面邊距1、頁面代碼如下：<body> <divid="page_container"> <divid="header">Header</div> <divid="div_content"> <divid="searcher">Searcher</div> <divid="navi">Navi</div> <divid="left_menu">LeftMenu</div> <divid="adv">Advice</div> <divid="right_view">RightView</div> </div> </di

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論