您現在的位置是:電腦技術吧?>? 基礎知識 ??>??網頁的布局,網頁布局方式??>??正文詳情

網頁的布局,網頁布局方式

丙沛春2019-11-11 11:40:37 人圍觀
簡介網頁布局是什么CSS的布局非常重要。CSS設計的初衷不同于幾年前的表格設計。在結構化語義HTML文檔之后,CSS對文檔的呈現效果進行格式化,并使用表達式語言對結構化文檔進行描網頁頁

布局  CSS至關重要的作用, CSS的設計初衷.  CSS布局和幾年前table橫行時的布局又不太一樣, 在結構化語義化的HTML文檔后面, CSS在格式化文檔的渲染效果, 把結構化文檔用表現化語言來描述. 簡而言之, 就是CSS不需要表現性標簽!  CSS布局技術依賴于三個基本概念: 定位, 浮動, margin操縱. 布局技術之間沒有本質的區別, 相同一種布局讓100個前端開發工程師來做, 可能就有100種方法.  居中  在table時代, align和Valign相當的好用, 而在CSS中卻沒有簡單實現的方法,所以在標準化剛剛開始推廣的時候, 很多重構項目中居中問題變成了阻礙標準化進步的絆腳石.  1. 自動外補丁水平居中  一般情況下水平居中比較容易實現, 只需要給要居中的容器設定寬度, 以及自動水平外補丁就可以了.網頁教學網  比如HTML如下:  CSS如下: 網頁教學網  body{}  .wrapper{width:760px;margin:0 auto;}  很簡單不是嗎? 但是有點小問題... 我們親愛的IE家族里, IE5.x和IE 6不支持自動外補丁, 但是同樣幸運的是, IE將 text-align:center 理解為所有東西居中, 而不只是文本. 哈哈, 可以利用這個Bug.  將CSS改為:  body{text-align:center;}  .wrapper{width:760px;margin:0 auto;text-align:left;}  這里就用到了一種Hack,不過不會影響其他瀏覽器的Hack就是好Hack,呵呵, 就先這么用著吧~  等等, 好像Netscape那邊也出問題了, 用Netscape 6將窗口縮小到小于容器寬度時, 容器的左邊就會跑到屏幕外邊去了, 而且還不會有滾動條...萬惡的瀏覽器大戰啊...  再來改改我們的CSS:  body{min-width:760px;text-align:center;}  .wrapper{width:760px;margin:0 auto;text-align:left;}  這樣就基本上ok了. 網頁教學網  2. 定位法水平居中  我們也可以稍稍復雜的用定位法來完成這個工作. 所謂的定位法是用 position 屬性來定義容器位置.網頁教學網  同樣用上面一例的HTML代碼,  我們用定位法的CSS如下:  body{margin:0;padding:0;}  .wrapper{position:relative;left:50%;width:760px;margin-left:-380px;}  為什么用相對定位( relative )呢? 能用絕對定位( absolute )嗎?  絕對定位當然也可以, 但是絕對定位會將容器提出文檔流, 讓后面的文檔流到定位容器的位置去了, 稍不注意就會被定為的容器遮蓋住后面的內容, 而relative不會將容器提出文檔流, 后面的文檔流會給定位的容器留下它應有的空間.  3. 垂直居中  CSS中比較大的問題出現了, CSS較難使用簡單的方法來完成垂直居中. 網頁教學網  在容器中要使文字垂直居中, 那可以將容器的line-height設置的和height一樣來完成這個工作,  但是要使容器垂直居中的話, 那就比較復雜了.  HTML如下:  123  CSS如下:  body{margin:0;padding:0;height:100%;}  .wrapper{display:table-cell;vertical-align:middle;width:600px;height:400px;border:solid 1px red;}  #box{width:200px;margin:auto;vertical-align:middle;border:solid 1px blue;}  按理說這樣就可以了呀, 但是IE下面一點效果都沒有...那是因為IE的display屬性只接收:block, inline, inline-block, none, inherit, 不接收table, table-cell, table-row, 那就頭痛了呀.  唔, 其實思路有很多, 我提供其中一種:  CSS如下:  body{margin:0;padding:0;height:100%;}  .wrapper{width:600px;height:400px;border:solid 1px red;}  #box{width:200px;height:200px;position:relative;top:50%;left:50%;margin-top:-100px;margin-left:-100px;border:solid 1px green;}  局限性非常大, 必須要已知高度...  更可以對IE瀏覽器進行filter之后hack它. 使用ie獨有的expression, 雖然在大型腳本上expression表現的相當差, 但是簡單的計算offsetHeight還是不太會影響性能, 再怎么說M$也針對expression進行過優化.  所以垂直居中還是要看場合自行挑選合適的方案來解決.  浮動布局  現在大家都熟知浮動布局了, 不多說, 這個是CSS布局的基礎...主要是float和margin的合理應用.  Faux Columns:  偉大的Dan的另一項發明, 呵呵, 其實很簡單, 用垂直平鋪背景圖來做出視覺上多欄布局等高的效果. 但是很實用, 不是嗎?  Equal height boxes with CSS:  在標準推行過程中比較有名的文章之一, 介紹像table一樣進行CSS布局, 但是不適用于IE...唉  彈性布局  很不錯的理念, 原理其實也不難, 就是用em來標注尺寸, 這樣就可以讓瀏覽器自行放大或縮小任何的容器或是元素了.

版權聲明:本文由 丙沛春 整理編輯。

原標題:怎么布局網頁,網頁布局有哪些

轉載注明出處:http://www.dn9ww09s.icu/basics/11684.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • jsp文件怎么打開方式,jsp文件怎么打開成網頁

    jsp文件怎么打開方式,jsp文件怎么打開成網頁 相關圖片jsp后綴文件怎么打開有些用戶在操作的過程中總會遇到一些罕見的格式文件。這不是用戶下載他們從未在互聯網上見過的JSP文件的情況。用記事本和文字打開它們是很混亂的。如何操作...

  • 筆記本電腦關機關不了,筆記本怎么關機

    筆記本電腦關機關不了,筆記本怎么關機 相關圖片筆記本電腦卡住了怎么關機一般來說,在使用筆記本電腦后,我們會習慣性地點擊“開始”菜單中的“關機”按鈕來關機。但這是一個如此簡單的操作,以至于一個小伙伴無法關閉計算...

  • 各種類型的女生簡介,橋的類型的簡介

    各種類型的女生簡介,橋的類型的簡介 相關圖片街舞的各種類型簡介HTML5的新輸入類型HTML5有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。本章全面介紹了這些新的輸入類型:email urlnumber r翡翠各種類型及簡介...

  • 什么軟件可以檢測筆記本電池,有沒有檢測筆記本電池的軟件

    什么軟件可以檢測筆記本電池,有沒有檢測筆記本電池的軟件 相關圖片查看筆記本電池狀態近年來,筆記本電腦已成為我們工作和生活中不可缺少的伙伴。當筆記本電池長期使用時,會產生損耗,所以一些用戶也會想知道自己筆記本電池的健康狀況,如何...

  • 引入樣式,dedecms樣式的引入

    引入樣式,dedecms樣式的引入 相關圖片引入外部樣式文件一。使用鏈接標簽2。使用樣式元素3。使用@import指令4。使用樣式屬性的內聯樣式。這是一個紅色的詞。在實際應用中,不建議使用樣式屬性的內聯樣式。XHTML 引入css樣...

  • pagefilesys可以刪除嗎,pagefilesys怎么刪除

    pagefilesys可以刪除嗎,pagefilesys怎么刪除 相關圖片pagefilesys文件8個g我們都知道,磁盤C作為系統磁盤,對計算機的速度有影響,甚至決定計算機的速度。為了使計算機系統運行得更快,有些用戶會去C盤查看可以刪除的文件,無意中發現...

  • 筆記本電腦無線網卡怎么打開,筆記本無線網卡在哪

    筆記本電腦無線網卡怎么打開,筆記本無線網卡在哪 相關圖片筆記本電腦怎么打開無線網絡目前,無線網卡是終端無線網絡的設備。簡而言之,無線網卡是一種可以使筆記本電腦利用無線網絡的設備,但是一些筆記本用戶仍然不知道如何打開筆記...

  • 標簽的屬性有哪些,標簽的屬性

    標簽的屬性有哪些,標簽的屬性 相關圖片a標簽href屬性HTML5通過制定關于如何處理所有HTML元素和如何從錯誤中恢復的精確規則,提高了互操作性并降低了開發成本。HTML5中的新功能包括嵌入音頻、視頻和圖形、客戶端a標簽常用屬...

  • 華碩筆記本bios,華碩bios

    華碩筆記本bios,華碩bios 相關圖片華碩主板bios進入華碩筆記本BIOS設置的華碩筆記本用戶知道,華碩EFI圖形BIOS提供了包括簡體中文和多國語言在內的支持,這對進入BIOS操作的用戶非常有幫助。接下來,編輯華碩筆記本...

  • 怎樣讓瀏覽器不卡,讓瀏覽器

    怎樣讓瀏覽器不卡,讓瀏覽器 相關圖片怎么讓瀏覽器不記住密碼如今,HTML5的發展越來越快,但目前支持HTML5的瀏覽器還不是主流,而支持HTML5的IE9也不支持安裝XP系統,因此在未來很長一段時間內,HTML5的開發怎么讓瀏覽器之...

熱評文章

  • office激活密鑰2007,office激活密鑰2010

    office激活密鑰2007,office激活密鑰2010 相關圖片有沒有office2007的密鑰Office2007是一個非常好的經典版本。即使現在它已經發布到office 2016,這和系統發布到win10是一樣的,但是很多用戶仍然在使用XP系統,但是如如何激活office2007...

  • 精雕細琢的什么,什么東西需要精雕細琢

    精雕細琢的什么,什么東西需要精雕細琢 相關圖片大刀闊斧與精雕細琢極簡主義,現代主義,扁平化,網格系統,這些流行的設計趨勢和技術,你想出現在你自己的設計公司的網站上?除了漂亮和風格化,他們使網站有更好的可用性,...

  • dell筆記本重裝系統,戴爾筆記本如何重裝系統

    dell筆記本重裝系統,戴爾筆記本如何重裝系統 相關圖片戴爾筆記本裝系統現在,誰家里沒有筆記本不過,在筆記本電腦方面,戴爾筆記本是一個不錯的品牌,所以用戶很多,但其中包含了很多水產品,也就是新手,只能簡單操作。對他們來...

  • 各種usb接口介紹,什么是接口

    各種usb接口介紹,什么是接口 相關圖片toslink接口是什么盡管目前主流瀏覽器已經實現了HTML5的許多新功能,但許多開發人員根本沒有注意到這些更簡潔、更有用的API。本系列文章將介紹這些API接口,并希望鼓勵更多的開發u...

  • 怎么使用聯想電腦一鍵恢復,聯想電腦可以一鍵恢復嗎

    怎么使用聯想電腦一鍵恢復,聯想電腦可以一鍵恢復嗎 相關圖片聯想一鍵恢復計算機操作不當或系統內垃圾堆積過多,會導致系統運行緩慢,如何解決這個問題?聯想用戶對聯想電腦一鍵恢復功能了如指掌。事實上,它可以改善這些問題。為此,小...

  • 蝴蝶標本制作,如何制作蝴蝶標本

    蝴蝶標本制作,如何制作蝴蝶標本 相關圖片仿真蝴蝶制作今天,我做了一個小閃光手繪蝴蝶教程。很簡單,我也可以練習我的手。我總共有六個步驟(我不知道為什么我總是喜歡六個步驟,上一個眨眼教程也是六個步驟)。想做...

  • 戴爾筆記本電腦,戴爾筆記本電腦怎么樣

    戴爾筆記本電腦,戴爾筆記本電腦怎么樣 相關圖片戴爾惠普華碩筆記本電腦哪個好隨著科學技術的進步,許多白領和家庭普及了筆記本電腦。是的,這對我們的使用非常方便。世界總是因為互聯網而在一起,但我們在使用互聯網的過程...

  • 筆記本電腦找不到無線網絡,筆記本電腦無線網絡連接不上

    筆記本電腦找不到無線網絡,筆記本電腦無線網絡連接不上 相關圖片筆記本收不到無線網絡科技改變了我們的生活。如今,無線網絡無處不在。手機和電腦通過無線連接上網非常方便。但一些用戶也會遇到筆記本電腦無法搜索無線網絡的情況。顯然,這...

  • 自己制作發光字,PS制作發光字效果

    自己制作發光字,PS制作發光字效果 相關圖片ps制作led發光字效果渲染11 1。在您最喜歡的字體中鍵入一個200px的金色字符(我使用富超級歌曲),然后查看下面的操作圖2 2。這是最核心的一步,就是利用搖擺變形的參數增量來產生...

  • 顯示屏不亮主機正常,電腦顯示屏不亮但是主機已開機

    顯示屏不亮主機正常,電腦顯示屏不亮但是主機已開機 相關圖片開機顯示器不亮隨著科學技術的飛速發展,計算機已成為我們生活中不可缺少的對象。但電腦也會給我們帶來一些意外。不幸的是,許多用戶都會遇到電腦開機,顯示器不亮的情況。任...

關注微信

变脸官网查询