⑴ web前端如何讓網頁布局穩定性和標准性
為了實現網頁布局的穩定性和標准性，我們可以從下面幾方面努力：
一、 <!DOCTYPE> 標記的重要性。
位 於文檔的最前面，用於向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標准 規范，我們必需在開頭處使用<!DOCTYPE>標記為 所有的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能將該網頁作為有 效的XHTML文檔，並按指定的文檔類型進行解析。
<!DOCTYPE> 標記和瀏覽器的兼容性相關，刪除<!DOCTYPE>，就是把如何展示HTML頁面的權利交給瀏覽器， 這 時，IE6，IE7，IE8，Firefox2，Firefox3，Chrome，有多少種瀏覽器，頁面就有可能有多少中顯示效果，這是不被允許的。
二、合適地方用到合適的標簽
物盡其用人盡其才。 再合適的地方用到合理的標簽，對網頁布局和優化都有很多的好處，比如logo ，一般我們都用h1 標簽包括。 還有理解行內元素和塊級元素的區別。
一個頁面不要只用div，太多反而太泛濫了。table雖然用的少，但是，再做一些數據處理的時候，還是比較好用的。
三、站在標准流的角度看padding 和 maring 、width等屬性穩定性
我們知道頁面布局的時候，控制盒子位置距離等，有盒子本身大小，padding和margin來做。
因此，再這里我們會根據穩定性來看這三者的先後順序：
其中穩定性最好的就是盒子本身的高度和寬度了，我們優先考慮這個。 因此，很多情況下，我們會考慮利用高度剩餘法，寬度剩餘法來做，而不是padding和margin。
這個評論和下面的文本域框有個小距離， 此時，我們給這個評論一個h2標簽，高度正好從評論上方，到文本域上的高度就好了。
h2 裡面文字內容默認是靠左上對齊的，高度用不了，就剩下了，這就是高度剩餘法。
其次，我們才考慮padding ，因為padding也可以看做特殊的盒子高度和寬度，最後我們再用margin來做。因為margin會有邊距合並的問題。
四、標准流、浮動流和定位的穩定性
標准流再裡面是最穩定的，就是塊級元素上下顯示，行內一行顯示，都是最穩定的。
浮動和定位都「脫標」了，穩定性沒那麼穩定，所以，我們應該遵循如下原則：
頁面布局，能用標准流去做的不用浮動去做，如果要用浮動做的，就不用定位去做。
五、知己知彼百戰百勝
總會有特殊的瀏覽器，比如ie6 ，這些奇葩瀏覽器總是有自己獨到的地方，那我們怎辦? 兵法雲，知己知彼百戰百勝，因此，需要我們詳細的了解這些瀏覽器自己獨特的特性，或者掌握他們ie6常常出現的bug，以及對於css 的理解，那麼我們根據他們的不同解析，寫出合理的布局。
六、不要讓清除內外邊距帶來麻煩
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
這句話，大家都知道，清除瀏覽器樣式的。但是如果你不加，不同瀏覽器肯定顯示不太一樣。所以，css的第一句話就是它。還有就是要使用大部分瀏覽支持的css屬性不至於引起不必要的麻煩。
⑵ 請問web頁面布局包括哪些都有什麼用
1.靜態布局（Static Layout）
即傳統Web設計，對於PC設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；
意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫代碼的布局來布置；
對於移動設備，單獨設計一個布局，使用不同的域名如wap.或m.。
2、彈性布局
彈性布局是CSS3引入的強大的布局方式，用來替代以前Web開發人員使用的一些復雜而易錯hacks方法（如使用float進行類似流式布局）。
其中flex-flow是flex-direction和flex-wrap屬性的簡寫方式，語法如下：
flex-flow: <flex-direction> || <flex-wrap>
flex-direction: row（初始值） | row-reverse | column | column-reverse
flex-wrap: nowrap（初始值） | wrap | wrap-reverse
flex-direction定義了彈性項目在彈性容器中的放置方向，默認是row，即行內方向（一般而言是由左往右，但注意這個和書寫模式有關）。
flex-wrap定義是否需要拆行以使得彈性項目能被容器包含。*-reverse代表相反的方向。
兩者結合起來即flex-flow屬性就確定了彈性容器在main axis和cross axis兩個方向上的顯示方式，下面的例子很直觀的說明了各個屬性值的區別：
3、自適應布局（Adaptive Layout）
自適應布局（Adaptive）的特點是分別為不同的屏幕解析度定義布局。布局切換時頁面元素發生改變，但在每個布局中，頁面元素不隨窗口大小的調整發生變化。
你可以把自適應布局看作是靜態布局的一個系列。
就是說你看到的頁面，裡面元素的位置會變化而大小不會變化；
4、流式布局（Liquid Layout）
流式布局（Liquid）的特點（也叫」Fluid」) 是頁面元素的寬度按照屏幕進行適配調整，主要的問題是如果屏幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的屏幕上不能正常顯示
。
你看到的頁面，元素的大小會變化而位置不會變化——這就導致如果屏幕太大或者太小都會導致元素無法正常顯示。
5、響應式布局（Responsive Layout）
做手機網站必加的一句頭部(head)代碼
<metaname="viewport"
content="width=device-width,
initial-scale=1.0,minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
name="viewport"
名稱=視圖width=device-width
頁面寬度=設備寬度(可以理解為獲取你手機的屏幕寬度)initial-scale-初始的縮放比例 minimum-scale-允許用戶縮放到的最小比例 maximum-scale-允許用戶縮放到的最大比例 user-scalable-用戶是否可以手動縮放
分別為不同的屏幕解析度定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調整而自動適配。
可以把響應式布局看作是流式布局和自適應布局設計理念的融合。
每個屏幕解析度下面會有一個布局樣式，同時位置會變而且大小也會變。
⑶ 網頁的布局類型有哪些
1、「國」字型
也可以稱為「同」字型，是一些大型網站所喜歡的類型，即最上面是網站的標題以及橫幅廣告條，接下來就是網站的主要內容，左右分列一些兩小條內容，中間是主要部分，與左右一起羅列到底，最下面是網站的一些基本信息、聯系方式、版權聲明等。
2、拐角型
這種結構與上一種其實只是形式上的區別，其實是很相近的，上面是標題及廣告橫幅，接下來的左側是一窄列鏈接等，右列是很寬的正文，下面也是一些網站的輔助信息。在這種類型中，一種很常見的類型是最上面是標題及廣告，左側是導航鏈接。
3、標題正文型
這種類型即最上面是標題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面等就是這種類。
4、封面型
這種類型基本上是出一些網站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個「進入」的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大部分是企業網站和個人主頁，如果說處理的好，會給人帶來賞心悅目的感覺。
5、「T」結構布局
所謂「T」結構布局，就是指網頁上邊和左邊相結合，頁面頂部為橫條網站標志和廣告條，左下方為主菜單，右面顯示內容，這是網頁設計中用得最廣泛的一種布局方式。在實際設計中還可以改變「T」結構布局的形式。
如左右兩欄式布局，一半是正文，另一半是形象的圖片、導航。或正文不等兩欄式布置，通過背景色區分，分別放置圖片和文字等。
這樣的布局有其固有的優點，因為人的注意力主要在右下角，所以企業想要發布給用戶的信，大都能被用戶以最大可能性獲取，而且很方便，其次是頁面結構清晰，主次分明、易於使用。缺點是規矩呆板，如果細節色彩上不注意，很容易讓人「看之無味」。
6、「口」型布局
這是一個形象的說法，指頁面上下各有一個廣告條，左邊是主菜單，右邊是友情鏈接等，中間是主要內容。
這種布局的優點是頁面充實、內容豐富、信息量大，是綜合性網站常用的版式，特別之處是頂部中央的一排小圖標起到了活躍氣氛的作用。
缺點是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設計，例如網易壁紙站使用多幀形式，只有頁面中央部分可以滾動，界面類似游戲界面。使用此類版式的有多維游戲娛樂性網站。
7、「三」型布局
這種布局多用於國外網站，國內用得不多。其特點是頁面上橫向兩條色塊，將頁面整體分割為4個部分，色塊中大多放廣告條。
8、 對稱對比布局
顧名思義，它指採取左右或者上下對稱的布局，一半深色，一半淺色，一般用於設計型網站。其優點是視覺沖擊力強，缺點是將兩部分有機地結合比較困難。
9、POP布局
POP源自廣告術語，指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。常用於時尚類網站，優點顯而易見：漂亮吸引人，缺點是速度慢。
網頁設計（web design，又稱為Web UI design，WUI design，WUI），是根據企業希望向瀏覽者傳遞的信息（包括產品、服務、理念、文化），進行網站功能策劃，然後進行的頁面設計美化工作。作為企業對外宣傳物料的其中一種，精美的網頁設計，對於提升企業的互聯網品牌形象至關重要。
網頁設計一般分為三種大類：功能型網頁設計（服務網站&B/S軟體用戶端）、形象型網頁設計（品牌形象站）、信息型網頁設計（門戶站）。設計網頁的目的不同，應選擇不同的網頁策劃與設計方案。
(3)web頁面布局擴展閱讀
網站伴隨著網路的快速發展而快速興起，作為上網的主要依託，由於人們使用網路的頻繁而變得非常的重要。由於企業需要通過網站呈現產品、服務、理念、文化，或向大眾提供某種功能服務。因此網頁設計必須首先明確設計站點的目的和用戶的需求，從而做出切實可行的設計方案。
專業的網頁設計，需要經歷以下幾個階段：
1、需要根據消費者的需求、市場的狀況、企業自身的情況等進行綜合分析，從而建立起營銷模型。
2、以業務目標為中心進行功能策劃，製作出欄目結構關系圖。
3、以滿足用戶體驗設計為目標，使用axure rp或同類軟體進行頁面策劃，製作出交互用例。
4、以頁面精美化設計為目標，使用PS、AI等軟體，調整，使用更合理的顏色、字體、圖片、樣式進行頁面設計美化。
5、根據用戶反饋，進行頁面設計調整，以達到最優效果。
⑷ webstorm 怎麼調頁面布局
新建Scheme + 修改字體
ctrl+alt+s打開Settings界面，Editor > Colors&Fonts > Font。
Default scheme是亮色調，但我想定製一套暗背景的環境，所以在右側Scheme name下拉框中選擇Monokai，以此作為修改的基礎，然後點擊Save as，給自己新建的Scheme起個名字吧，如下圖：
這裡面可以設置字體（我一般選擇Consolas），字體大小，行間距。
自定義語法高亮
用ctrl+alt+s打開Settings界面，Editor > Colors&Fonts。
不同語言有各自的語法高亮規則，但有一部分是通用的（General），我們首先來設置General，然後再根據需要設置不同語言的語法高亮。
General的設置
普通文本：default text
折疊文本: Folded text
游標: Caret
游標所在行: Caret row
行號: Line number
TODO: TODO default
游標下變數高亮：Search result
搜索結果：Text search result
匹配的括弧：Matched brace
不匹配的括弧：Unmatched brace
未使用的符號：Unused symbol
左邊空隙（行號，斷點）：Gutter background
選中的文本背景色：Selection background
選中的文本前景色：Selection foreground
區分語言的設置
舉例來說，如果要更改Javascript的語法高亮，就在上圖中選擇Javascript，然後再進行詳細設置。具體設置項就不贅述了。
顯示行號 + 自動換行
如果用Vim編程，行號是非常必要的輔助。WebStorm默認是不顯示行號的，沒關系，顯示行號非常的容易。
只要在代碼左側的gutter區域點右鍵，就會出現下圖的菜單：勾選上Show Line Numbers即可。
另外，勾選上圖中的Use Soft Wraps就啟用了WebStorm的自動換行的功能，即過長的代碼行不會超出屏幕，不會出現橫向的滾動條。
值得一提的是，標準的Vim，jk是移到上一行下一行，如果代碼自動換行了，被分割成的兩行雖然看起來是兩行，但其實是一個邏輯行，這時候用jk是上移下移一個邏輯行。這種情況下，如果要從同一邏輯行的「第一行」移動到「第二行」，需要按gj，即先按g再按方向。雖然Vim提供了這個方法，但還是經常按錯。
好消息是，啟用了Use Soft Wraps的WebStorm不需要這樣，直接按j就可以從同一邏輯行的「第一行」移動到「第二行」。
導入導出設置
File > Export Settings導出用戶設置。如下圖，你可以選擇要導出哪些類型的設置，也可以選擇導出到哪個目錄下。
導出後的配置以jar包的形式存在，導入也同樣簡單，File > Import Settings，選擇jar包導入成功後，重啟WebStorm就大功告成了。
⑸ 如何把web前端網頁做成自適應
1.首先，在網頁代碼的頭部，加入一行viewport元標簽。
viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個設置，包括IE9，對於那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
2、不使用絕對寬度由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。具體說，CSS代碼不能指定像素寬度：width:xxx px;
只能指定百分比寬度：width: xx%;或者width:auto;
3、相對大小的字體
字體也不能使用絕對大小（px），而只能使用相對大小（em）。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。
h1 {
font-size: 1.5em;
}
然後，h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）。
small {
font-size: 0.875em;
}
small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）。
⑹ WEB前端怎麼布局
在談WEB前端怎麼布局前，我們先梳理前端的布局類型，具體有以下幾種：
1.靜態布局：不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態（定寬度）布局的，也就是設置了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見於pc端。
2.流式布局：布局特點是屏幕解析度變化時，頁面里元素的大小會變化而但布局不變。
3.自適應布局：自適應布局的特點是分別為不同的屏幕解析度定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕解析度范圍。
4.響應式布局：布局特點是每個屏幕解析度下面會有一個布局樣式，即元素位置和大小都會變。
那麼我們如何布局呢？通過以下幾點來選擇布局。
1.如果只做電腦端，最好的選擇是靜態布局。
2.如果做移動端，且設計對高度和元素間距要求不高，那麼彈性布局（rem+js）是最好的選擇，通過一份css+一份js調節font-size就搞定。
3.如果電腦端，移動端要兼容，而且要求很高，那麼響應式布局還是最好的選擇。前提是設計根據不同的高寬做不同的設計，響應式根據媒體查詢做不同的布局。
⑺ web前端頁面布局,一般情況用哪些標簽最好,可以盡可能地達到各瀏覽器對標簽元素的識別
用DIV寫是最好的。瀏覽器無論是信息的爬蟲和頁面的重構都會很好。瀏覽器兼容的問題主要是你CSS寫的嚴謹不嚴謹。你CSS寫的不夠全有的瀏覽器自然會有這些問題。而且有的屬性可能不兼容每個瀏覽器。標簽最好的就是DIV了。
⑻ 網站前端開發常用的布局方式有哪些
實現網頁布局的方式方法比較多，布局方式可以大概分為這幾類。
布局種類：
1、table布局（網頁的興起，1995）
2、Flash布局（自由的黃金時代，1996）
3、div+css（CSS的誕生，1998）
4、柵格與響應式（移動端的興起，2007與2010）
當前WEB前端開發使用DIV+CSS的布局方式會比較多也比較常用吧，網頁布局看起來貌似簡單，但是它需要綜合使用很多HTML+CSS的知識，總的來說知識量是不小。如果想系統化的了解HTML+CSS方面的知識，建議你選擇一本比較不錯的HTML5相關書籍（主要看知識邏輯、知識的表達方式，比如《HTML5布局之路》）進行學習，讓自己的知識更扎實一些，不然學的零零散散的。
Tips：學習好HTML+CSS有利於後面學習JavaScript，畢竟需要它們兩者結合在一起才可以實現出可交互的前端頁面。
⑼ 網頁頁面各部分的名稱是什麼
1、文本：文本是網頁上最重要的信息載體和交流工具，網頁中的主要信息一般都以文本形式為主。
2、圖像：圖像元素在網頁中具有提供信息並展示直觀形象的作用。
靜態圖像：在頁面中可能是光柵圖形或矢量圖形。通常為GIF，JPEG或PNG；或矢量格式，如SVG或Flash。動畫圖像：通常動畫為GIF和SVG。
3、Flash動畫：動畫在網頁中的作用是有效地吸引訪問者更多的注意。
4、聲音：聲音是多媒體和視頻網頁重要的組成部分。
5、視頻：視頻文件的採用是網頁效果更加精彩且富有動感。
6、表格：表格是在網頁中用來控制面業信息的布局方式。
7、導航欄：導航欄在網頁中是一組超鏈接，其連接的目的端是網頁中重要的頁面。
8、互動式表單：表單在網頁中通常用來聯系資料庫並接受訪問用戶在瀏覽器端輸入的數據。利用伺服器的資料庫為客戶端與伺服器端提供更多的互動。
(9)web頁面布局擴展閱讀
網頁設計作為一種視覺語言，特別講究編排和布局，雖然主頁的設計不等同於平面設計，但它們有許多相近之處。版式設計通過文字圖形的空間組合，表達出和諧與美。
多頁面站點頁面的編排設計要求把頁面之間的有機聯系反映出來，特別要求處理好頁面之間和頁面內的秩序與內容的關系。為了達到最佳的視覺表現效果，反復推敲整體布局的合理性，使瀏覽者有一個流暢的視覺體驗。
在網頁設計中，設計師根據和諧、均衡和重點突出的原則，將不同的色彩進行組合，搭配來構成美麗的頁面。根據色彩對人們心理的影響，合理地加以運用。如果企業有CIS（企業形象識別系統），應按照其中的VI進行色彩運用。
⑽ web前端幾種常見的網頁布局
現在的網頁差不多都採用分列布局，
常見的有單列布局（如網路首頁）、雙列布局、三列布局和混合布局，超過三列的布局很少見。
最簡單的要數單列布局了，這種布局適合各種搜索引擎主頁，干凈的界面和較少的干擾信息給用戶較好的體驗。