久久免费视频91,青青草原影院伊人,国产剧情在线播放一区二区,亚欧日韩欧美一区

<menu id="meme2"><acronym id="meme2"></acronym></menu>
  • <dfn id="meme2"><code id="meme2"></code></dfn>
    <tbody id="meme2"><td id="meme2"></td></tbody>
  • <menu id="meme2"><acronym id="meme2"></acronym></menu>
  • 首頁(yè) 考試吧論壇 Exam8視線 考試商城 網(wǎng)絡(luò)課程 模擬考試 考友錄 實(shí)用文檔 求職招聘 論文下載
    2011中考 | 2011高考 | 2012考研 | 考研培訓(xùn) | 在職研 | 自學(xué)考試 | 成人高考 | 法律碩士 | MBA考試
    MPA考試 | 中科院
    四六級(jí) | 職稱英語(yǔ) | 商務(wù)英語(yǔ) | 公共英語(yǔ) | 托福 | 雅思 | 專四專八 | 口譯筆譯 | 博思 | GRE GMAT
    新概念英語(yǔ) | 成人英語(yǔ)三級(jí) | 申碩英語(yǔ) | 攻碩英語(yǔ) | 職稱日語(yǔ) | 日語(yǔ)學(xué)習(xí) | 法語(yǔ) | 德語(yǔ) | 韓語(yǔ)
    計(jì)算機(jī)等級(jí)考試 | 軟件水平考試 | 職稱計(jì)算機(jī) | 微軟認(rèn)證 | 思科認(rèn)證 | Oracle認(rèn)證 | Linux認(rèn)證
    華為認(rèn)證 | Java認(rèn)證
    公務(wù)員 | 報(bào)關(guān)員 | 銀行從業(yè)資格 | 證券從業(yè)資格 | 期貨從業(yè)資格 | 司法考試 | 法律顧問(wèn) | 導(dǎo)游資格
    報(bào)檢員 | 教師資格 | 社會(huì)工作者 | 外銷員 | 國(guó)際商務(wù)師 | 跟單員 | 單證員 | 物流師 | 價(jià)格鑒證師
    人力資源 | 管理咨詢師考試 | 秘書(shū)資格 | 心理咨詢師考試 | 出版專業(yè)資格 | 廣告師職業(yè)水平
    駕駛員 | 網(wǎng)絡(luò)編輯
    衛(wèi)生資格 | 執(zhí)業(yè)醫(yī)師 | 執(zhí)業(yè)藥師 | 執(zhí)業(yè)護(hù)士
    會(huì)計(jì)從業(yè)資格考試會(huì)計(jì)證) | 經(jīng)濟(jì)師 | 會(huì)計(jì)職稱 | 注冊(cè)會(huì)計(jì)師 | 審計(jì)師 | 注冊(cè)稅務(wù)師
    注冊(cè)資產(chǎn)評(píng)估師 | 高級(jí)會(huì)計(jì)師 | ACCA | 統(tǒng)計(jì)師 | 精算師 | 理財(cái)規(guī)劃師 | 國(guó)際內(nèi)審師
    一級(jí)建造師 | 二級(jí)建造師 | 造價(jià)工程師 | 造價(jià)員 | 咨詢工程師 | 監(jiān)理工程師 | 安全工程師
    質(zhì)量工程師 | 物業(yè)管理師 | 招標(biāo)師 | 結(jié)構(gòu)工程師 | 建筑師 | 房地產(chǎn)估價(jià)師 | 土地估價(jià)師 | 巖土師
    設(shè)備監(jiān)理師 | 房地產(chǎn)經(jīng)紀(jì)人 | 投資項(xiàng)目管理師 | 土地登記代理人 | 環(huán)境影響評(píng)價(jià)師 | 環(huán)保工程師
    城市規(guī)劃師 | 公路監(jiān)理師 | 公路造價(jià)師 | 安全評(píng)價(jià)師 | 電氣工程師 | 注冊(cè)測(cè)繪師 | 注冊(cè)計(jì)量師
    繽紛校園 | 實(shí)用文檔 | 英語(yǔ)學(xué)習(xí) | 作文大全 | 求職招聘 | 論文下載 | 訪談 | 游戲
    您現(xiàn)在的位置: 考試吧(Exam8.com) > 軟件水平考試 > 復(fù)習(xí)資料 > 網(wǎng)頁(yè)制作 > 正文

    CSS分欄布局的方法:絕對(duì)定位和浮動(dòng)

      在CSS中,實(shí)現(xiàn)分欄布局有兩種方法。第一種方法是使用四種CSS定位選項(xiàng)(absolute 、static、relative和fixed)中的絕對(duì)定位(absolute positioning),它可以將文檔中的某個(gè)元素從其原本位置上移除,并重新定位在期望的任何地點(diǎn)之上。第二種則是使用CSS中的浮動(dòng)(float)概念。
      絕對(duì)定位或浮動(dòng)都能夠用來(lái)實(shí)現(xiàn)分欄效果。二者可以獨(dú)立使用,也可以結(jié)合在一起,相輔相成。
      1、絕對(duì)定位
      絕對(duì)定位的優(yōu)勢(shì)在于,我們可以絲毫不差地精確控制任何元素的位置—這里面沒(méi)有什么需要猜測(cè)或者運(yùn)氣的成分。由于應(yīng)用了絕對(duì)定位的元素被不留痕跡地從常規(guī)文檔流中完全移除,所以它也不會(huì)為其他元素帶來(lái)任何的影響。
      那么讓我們?cè)囈辉囉媒^對(duì)定位如何實(shí)現(xiàn)下面的布局。

      這是一個(gè)三欄的布局,并且是居中顯示的。其中,A欄是主體內(nèi)容欄,B欄和C欄都是側(cè)邊欄。首先,我們不可能直接用絕對(duì)定位將A、B、C三欄定位到居中的位置,因?yàn)槊總(gè)人顯示器的分辨率是不同的,在1024X768分辨率的顯示器上定位的居中效果,在別的分辨率的顯示器上看到的效果肯定不會(huì)是居中顯示的,那么,該如何解決這個(gè)問(wèn)題呢?
      幸好,在絕對(duì)定位模型中有個(gè)極為有用的特性,那就是:若某個(gè)絕對(duì)定位元素的容器也被定位過(guò),那么該元素指定的top和left值將不會(huì)基于文檔的根元素html(也就是瀏覽器窗口的左上角)計(jì)算,而是會(huì)基于其容器的左上角計(jì)算這個(gè)偏移量。換句話說(shuō),也就是:被定位過(guò)的容器將扮演其中所有元素絕對(duì)定位起始點(diǎn)的角色。
      所以,利用這個(gè)特性,我們給A、B、C欄的外部加上一個(gè)容器D,如下

      然后,我們讓容器D居中,并給它加上一個(gè)屬性:position:relative,這樣,再用絕對(duì)定位定位A、B、C的top和left值,A、B、C的位置就會(huì)基于容器D的左上角的位置來(lái)計(jì)算了,這樣就可以實(shí)現(xiàn)我們期望的三欄居中的效果了。
      但是,我們常用的布局并沒(méi)有這么簡(jiǎn)單,除了三欄之外,我們還需要一個(gè)頁(yè)頭和一個(gè)頁(yè)腳,如下

      這時(shí)候,再用絕對(duì)定位布局就行不通了,因?yàn)榻^對(duì)定位的元素會(huì)從文檔流中完全移除,這時(shí),頁(yè)腳會(huì)緊挨著頁(yè)頭,顯示在頁(yè)頭的下方。
      如果我們一定要采用絕對(duì)定位的話,那么必須預(yù)先知道這三欄中每一欄的高度,然后再根據(jù)其中最高的一欄定位頁(yè)腳。若是任意一欄中的文本長(zhǎng)度無(wú)法確定的話,除了使用JavaScript,我們也只能放棄絕對(duì)定位的念頭,轉(zhuǎn)而投入到浮動(dòng)布局的懷抱。
      2、浮動(dòng)
      浮動(dòng)的本意是要將插入到文章中的圖片向左或者向右浮動(dòng),使圖片下方的文字自動(dòng)環(huán)繞在它的周圍,使圖片的左邊或者右邊不會(huì)出現(xiàn)一大塊的留白。
      浮動(dòng)的語(yǔ)法雖然簡(jiǎn)單,但卻不那么容易掌握,下面讓我們舉例說(shuō)明如何用浮動(dòng)來(lái)進(jìn)行布局。同樣,我們要實(shí)現(xiàn)一個(gè)帶頁(yè)腳的三欄布局。如下

      如何用浮動(dòng)實(shí)現(xiàn)這樣的效果呢?其實(shí)很簡(jiǎn)單:
      1、設(shè)定E的寬度,讓E居中
      2、設(shè)定A、B、C的寬度,將A、B、C分別向左浮動(dòng)
      3、給頁(yè)腳設(shè)置clear屬性
      需要說(shuō)明的是,浮動(dòng)布局依然遵循常規(guī)文檔流,所以與絕對(duì)定位相比,浮動(dòng)定位時(shí)HTML源文件中元素聲明的位置顯得格外重要。 當(dāng)然,解決這個(gè)問(wèn)題的最簡(jiǎn)單的方法就是在源文件中交換左欄和右欄的聲明次序,也有方法不用交換各欄的次序也可以實(shí)現(xiàn)同樣的布局,但是,這就要用到一種比較晦澀的使用負(fù)邊距值的方法。一般情況下,人們十有八九會(huì)選擇交換源文件中左中兩欄的聲明次序。

    文章搜索
    軟件水平考試欄目導(dǎo)航
    版權(quán)聲明:如果軟件水平考試網(wǎng)所轉(zhuǎn)載內(nèi)容不慎侵犯了您的權(quán)益,請(qǐng)與我們聯(lián)系800@exam8.com,我們將會(huì)及時(shí)處理。如轉(zhuǎn)載本軟件水平考試網(wǎng)內(nèi)容,請(qǐng)注明出處。