第5章css的盒子模型浮動和定位_第1頁
第5章css的盒子模型浮動和定位_第2頁
第5章css的盒子模型浮動和定位_第3頁
第5章css的盒子模型浮動和定位_第4頁
第5章css的盒子模型浮動和定位_第5頁
已閱讀5頁，還剩30頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

第五章CSS盒子模型、浮動和定位本章內(nèi)容塊元素和行內(nèi)元素CSS的盒子模型概念主要屬性CSS的浮動左浮動右浮動CSS的定位絕對定位相對定位應用CSS相關知識做極目商城首頁面行內(nèi)元素和塊元素行內(nèi)元素（inlineelement）特點是只占內(nèi)容的寬度，默認不會換行，行內(nèi)元素一般放文本或者其它的行內(nèi)元素。常見內(nèi)聯(lián)元素<span><a>塊元素(blockelement)特點不管內(nèi)容有多少，它要換行，同時沾滿整行，塊元素可以放文本，行內(nèi)元素，塊元素。常見塊元素<div><p><spanclass="s1">span1hello,world</span><spanclass="s1">span1hello,world</span><spanclass="s1">span1hello,world</span><divclass="s2">div1</div><divclass=”s2”>div2</div>行內(nèi)元素和塊元素轉換行內(nèi)元素和塊元素轉換如果我們希望一個元素按照塊元素方式顯示

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

則：display：inline；行內(nèi)元素和塊元素區(qū)別行內(nèi)元素只占內(nèi)容的寬度，塊元素內(nèi)容不管內(nèi)容多少要占全行。行內(nèi)元素只能容納文本和其它行內(nèi)元素，塊元素可以容納文本，行內(nèi)元素和塊元素。（與瀏覽器類版本和類型有關）一些CSS屬性對行內(nèi)元素不生效，比如margin,left,right,width,height。建議盡可能使用塊元素定位。（與瀏覽器版本和類型有關）盒子模型盒子模型所有的頁面中的元素都可以看成是一個盒子，占據(jù)著一定的頁面空間。盒子模型的主要屬性在網(wǎng)頁設計中常用的屬性名：內(nèi)容（content）、填充（padding）、邊框（border）、邊界（margin）盒子模型的主要屬性舉例可統(tǒng)一設置或四邊分開設置margin屬性marginmargin-topmargin-rightmargin-bottommargin-leftmargin-right右邊界margin-left左邊界margin-top上邊界margin-bottom下邊界margin：1px，2px，3px，4px;margin：1px，2px;margin：0pxauto;margin-left:1px;分別代表什么含義？盒子模型的主要屬性舉例border屬性border-colorborder-widthborder-styleborder-style:none;border:1pxsolidred;border-right:5pxdottedblue;分別代表什么含義？每個邊都有style、color、with屬性，四個邊可以一次設置，也可以分別設置盒子模型的主要屬性舉例padding屬性paddingpadding-toppadding-rightpadding-bottompadding-leftpadding-left:5px;padding:5px10px20px40pxpadding:5px10px分別代表什么含義？四個邊可以一次設置，也可以分別設置盒子模型的主要屬性舉例<styletype="text/css">.textBorder{border-width:1px;border-style:solid;}</style></head><body><formaction=""method="post"><p>名字：<inputname="fname"type="text"class="textBorder"/></p><p>密碼：<inputname="pass"type="password"class="textBorder"size="21"></p>細邊框的樣式盒子模型綜合屬性舉例<styletype="text/css">

body

{

margin:0px;padding:0px;

background:#ccc;

}

#logo

{

width:380px;

border:5pxsolid#666;

padding:10px20px40px80px;

background:#ff7300;

margin:30pxauto;//水平居中}</style><body>

<divid="logo"><imgsrc="images/logo.jpg"alt="logo"/>

</div></body>

設置頁面內(nèi)容（body）的背景和居中效果

logo圖片的布局

首先組織HTML結構，再寫CSS進行布局或美化盒子模型幾個屬性值解釋：幾個屬性值解釋：border:1pxsolidred;

這里我們給body指定了border的寬度，樣式，顏色（順序可以隨意）margin:0auto; 0表示上下，auto表示左右居中CSS的浮動左浮動是指讓該元素，盡量向左邊移動，讓出自己右邊空間，給下一個元素顯示。右浮動是指讓該元素，盡量向右移動，直到碰到他的父元素的右邊界。（特別強調(diào)：浮動對塊元素和行內(nèi)元素都生效?。┗仡櫨毩曃淖汁h(huán)繞圖片CSS浮動注意事項如果我們的div框很多，外面的框無法容納水平排列的浮動div元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”，如下圖：CSS的定位CSS定位（positioning）屬性允許你對元素進行定位。Position屬性值：static(默認值)：元素框正常生成?？旒壴厣梢粋€矩形框，作為文檔流/標準流的一部分，行內(nèi)元素則會創(chuàng)建一個或者多個行框，置于其父元素中。（對定位left，right不生效。）relative：元素框偏移某個距離。元素仍保持其未定位前的形狀，他原來所占的空間仍保留，從這一角度看，好像改元素仍然在文檔流/標準流中一樣。

absolute：元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。fixed：元素框的表現(xiàn)類似于將position設置為absolute，不過其包含塊是視窗本身。（以body本身來定位）CSS的相對定位舉例相對定位（relative）如下圖所示：如果將top設置為20px，那么框將在原位置頂部下面20像素的地方。如果left設置為30像素，那么會在元素左邊創(chuàng)建30像素的空間，也就是將元素向右移動。#box_relative{position:relative;left:30px;top:20px;}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;/*在原來的位置，向右移動大?。ㄈ绻蜃笠苿?，則值是負數(shù)）*/top:70px;/*在原來的位置，向下移動大?。ㄈ绻蛏弦苿?，則值是負數(shù)）*/}

CSS的絕對定位把上例中relative換成absolute即為絕對定位！特別說明偏移relative的參照點是它原來的位置.進行一定偏移absolute定位是對離自己最近的那個非標準流盒子而言的絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。CSS的絕對定位舉例案例：<html><head><styletype="text/css">h2.pos_abs{position:absolute;left:100px;top:150px}</style></head><body><h2class="pos_abs">這是帶有絕對定位的標題</h2><p>通過絕對定位，元素可以放置到頁面上的任何位置。下面的標題距離頁面左側100px，距離頁面頂部150px。</p></body></html>課程練習請同學們思考，如何在一張圖片上加上一些描述的信息極目商城首頁布局實現(xiàn)第一步：根據(jù)商城首頁規(guī)劃網(wǎng)站極目商城首頁布局實現(xiàn)完成后基本布局如下圖，我們將其分為六個部分1.Header

網(wǎng)站頭部

width:

760px

height:

50px

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

Navigation

導航條，具有按鈕特效。4.左側分類

height:

根據(jù)類型變化

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

id="container">

Hello

world.

</div>

在css中設置 background-color:yellow;width:100%; margin:0

auto;

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

body{margin:0;padding:0;}極目商城首頁布局實現(xiàn)第三步：將網(wǎng)站分為六個div，網(wǎng)頁基本布局的基礎：1.將“第一步”提到的六個部分都放入盒子中，在html文件中寫入<body><divid="page_container"><divid="header">Header</div><divid="searcher">Searcher</div><divid="navi">Navi</div><divid="left_menu">LeftMenu</div><divid="adv">Advice</div><divid="right_view">RightView</div></div></body>極目商城首頁布局實現(xiàn)2.為了將六個部分區(qū)分開來，我們將這六個部分用不同的背景顏色標示出來，在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; }極目商城首頁布局實現(xiàn)3、效果如圖（省略了adv，right的截圖）極目商城首頁布局實現(xiàn)第四步：設置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;}效果如圖：極目商城首頁布局實現(xiàn)第五步：創(chuàng)建一個存放內(nèi)容的div，用來存放除h

溫馨提示

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

評論

0/150

提交評論