『壹』 網站前端開發慣用的布局方式有哪些
網站布局之「廠」字型
所謂的「廠」字型布局結構，就是指頁面頂部為橫條網站標識和廣告條，下方左面為主菜單，右面顯示內容的布局。菜單條與背景，整體效果類似「廠」字。「廠」布局是目前最常見的一種網頁布局方式。這種布局的優點是頁面結構清晰，主次分明。缺點是由於被使用得過多，顯得缺乏創意，略顯呆板。
網站布局之「三」字型
這種布局多用於國外站點，通常頁面上方橫向幾條色塊，將頁面整體分割為若幹部分，色塊中大多放廣告圖片或者Flash動畫。
網站布局之 「國」字型
「國」字型布局通常上下各有一個廣告條或者其他欄目條，左面是主菜單，右面放友情鏈接或者其他欄目等，中間是主要內容。這種布局的優點是充分利用版面，信息量大。缺點是頁面顯得比較擁擠和局促，不夠靈活。
網站布局之門戶型
這類網頁通常內容多，信息量大，通常沒有時顯的線條作為邊界，圖片用得也比較少，一般通過文字的排列產生視覺上的分區效果。
網站布局之區塊型
區塊型布局現在出現的越來越多，在網頁上各個區域具有封閉的邊界，經過合理放置顯得清晰美觀。其缺點是由於片面固定，各區域很難根據其中的內容的多少而調整大小，因此不適宜用於區域內容的長度經常變化的網頁。
網站布局之宣傳單型
宣傳單型布局頁面就像一張宣傳海報，以一張精美圖片作為頁面的設計中心，常用於個性類站點。其優點是漂亮吸引人；缺點就是頁面中大面積使用圖片，導致瀏覽速度相對較慢。所以這類頁面同是可以作為宣傳單使用。
『貳』 WEB前端怎麼布局
在談WEB前端怎麼布局前，我們先梳理前端的布局類型，具體有以下幾種：
1.靜態布局：不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態（定寬度）布局的，也就是設置了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見於pc端。
2.流式布局：布局特點是屏幕解析度變化時，頁面里元素的大小會變化而但布局不變。
3.自適應布局：自適應布局的特點是分別為不同的屏幕解析度定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕解析度范圍。
4.響應式布局：布局特點是每個屏幕解析度下面會有一個布局樣式，即元素位置和大小都會變。
那麼我們如何布局呢？通過以下幾點來選擇布局。
1.如果只做電腦端，最好的選擇是靜態布局。
2.如果做移動端，且設計對高度和元素間距要求不高，那麼彈性布局（rem+js）是最好的選擇，通過一份css+一份js調節font-size就搞定。
3.如果電腦端，移動端要兼容，而且要求很高，那麼響應式布局還是最好的選擇。前提是設計根據不同的高寬做不同的設計，響應式根據媒體查詢做不同的布局。
『叄』 前端開發應該知道的幾個CSS網頁表單布局技巧
1、絕對定位
在絕大過程中，想確定一個元素在網站當中的固定位置，絕對定位是實現這個方式的解決辦法。在網頁當中，絕對定位可精確的控制元素在網頁當中的位置，我們可使用頂部、底部、左側和右側，附上一個像素值來控制元素所在的位置。
position:absolute;top:50px;right:50px
上面的CSS設置一個元素的位置從瀏覽器的頂部和右邊保持50px。你也可以在div內使用絕對定位。
2、覆蓋所有樣式
寫CSS的時候都應該知道，當你想給一個元素添加一個新的CSS樣式，但這個樣式之前已經被定義過了。此時我們可以採用！important來定義。
例如，如果我想在我的網站的特定部分的H3標題是紅色而不是黃色，可以使用下面的CSS：
.section h3 {color:red !important; }
3、居中
居中分很多情況，一般會分成文本居中和DIV的內容居中。
文本居中
文本居中使用text-align：center; 。如果想讓文本在左右兩側，可以使用左側或右側。
DIV內容
DIV內容居中跟文本居中不一樣。CSS可以這樣定義：
#div1 { display: block; margin: auto; width: anything under 100% }
把寬度設置為「100％以下」的原因是因為如果它是100％寬度，那麼如果是全寬度，並且不需要居中。最好有一個固定的寬度，如60％或550像素等。
4、垂直對齊（對於一行文本）
要使菜單的高度和文本的行高一致，可以這么設置：
.nav li{line-height:50px; height:50px;}
5、懸停效果
這適用於按鈕，文本鏈接，網站的部分，圖標等等。如果你想做一個懸停效果，可以試試：
.entry h2{font-size:36px; color:#000; font-weight:800;} .entry h2:hover{color:#ffeb3b;}
這個功能可以讓你的h2標簽的顏色從黑色變成黃色。
6、懸停效果過渡
對於懸停效果，如使用菜單或網站上的圖像，我們肯定不希望顏色快速貼近結果，所以我們可以通過使用時間變化來達到過渡的效果。
.entry h2:hover{color:#ffeb3b; transition: all 0.5s ease;}
這就使得樣式上的改變，可以是從黑色變黃色的過渡時間是0.5秒，而不是立即變成黃色。這使得懸停效果更加和諧而不會顯得太突兀。
7、a標簽的狀態
我們在遇到a標簽的時候，一定要給a標簽做樣式定義，否則特別容易造成用戶在使用上的困惑。通過樣式可以讓用戶知道這個鏈接是否被點擊過，更利於用戶體驗。
a:link {color: blue; } a:visited {color: red; }
8、輕松調整圖像大小以適應
說到這個樣式，我之前不知道可以通過以下方式達到圖片的自適應效果。作為一個新手，我相信這個效果肯定有很多人都想做，當然，我提供的方法也只是其中的一種：
img {max-width:100%;height:auto;}
這個樣式意味著最大的圖像可能是100％，並根據圖像寬度自動計算高度。在某些情況下，您可能還必須指定寬度為100％。
9、父級元素和子元素
如果ni不希望選擇任意的後代元素，而是希望縮小范圍，只選擇某個元素的子元素，請使用子元素選擇器：
h1 > strong {color:red;}
特殊情況下你可能會想定義第N個子元素的樣式，這樣就可以用到下面這個樣式：li:nth-child(n)
具體的使用方法可以去w3school上看。
10、將CSS應用於多個類或選擇器
如果你想要在所有圖片，博客部分和側邊欄上添加相同的邊框。你不必寫出相同的CSS樣式重復3次。只需列出這些項目，用逗號分隔：
.blog,img,.sidebar {border: 1px solid #000;}
『肆』 前端的頁面布局好看框架網站有哪些
很多的建站系統前端的布局都很漂亮的：pageadmin和discua都是不錯的，直接下載就可以啦！方便、快捷。。
『伍』 前端布局的幾種方式
1.固定布局，靜態布局
傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位，網頁寬度一般為960px。網頁布局始終按照最初寫代碼時的布局來顯示，不受瀏覽器影響。如果瀏覽器寬度如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景
2.流式布局
流式布局使用的是百分比，這位網頁提供了很強的可塑性和流動性，與固定寬度布局基本不同點 就在於對網站尺寸的側量單位不同。屏幕解析度變化時，頁面里元素的大小會變化而但布局不變，這可能導致如果屏幕太大或者太小都會導致元素無法正常顯示。
3.自適應布局
自適應布局的特點是分別為不同的屏幕解析度定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕解析度范圍。使用 @media 媒體查詢給不同尺寸和介質的設備切換不同的樣式，例如寬度960px是一種樣式，網頁寬度1440px是另一種樣式。改變屏幕解析度可以切換不同的靜態局部，但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。
4.彈性布局
使用em 或 rem 單位進行相對布局，相對%百分比更加靈活，同時可以支持瀏覽器的字體大小調整和縮放等的正常顯示。這種布局中包裹文字的各元素的尺寸採用em/rem做單位，而頁面的主要劃分區域的尺寸仍使用百分數或px做單位。默認的文字大小16px就是1em。
5.響應式布局
每個屏幕解析度下面會有一個布局樣式，即元素位置和大小都會變，設計方法通常採用了媒體查詢+流式布局，使用@media媒體查詢給不同尺寸和介質的設備切換不同的樣式。為不同終端的用戶提供更加舒適的界面和更好的用戶體驗。
『陸』 前端頁面設計有幾種分式
前端基本布局分大致5種，table布局，float 布局，absolute布局，flexbox布局，grid布局。假設高度已知，寫出三欄布局，其中左右寬度各為300px，中間自適應。
『柒』 前端拿到UI設計的圖 如何開始布局設計
前端拿到UI設計的圖 開始布局設計的方法
布局是頁面構成的前提，是後續展開交互和視覺設計的基礎。設計者在選擇布局之前，需要注意以下幾點原則：
明確用戶在此場景中完成的主要任務和需獲取的決策信息。
明確決策信息和操作的優先順序及內容特點，選擇合理布局。
一、常用布局
網站展示頁、Dashboard、列表頁、表格頁、詳情頁、表單頁。在設計前先了解這些模板有助於讓用戶快速找到適合自己產品的頁面布局。
1、網站展示頁
網站展示頁（即官網頁）通常是用戶了解網站或產品的第一步。這類頁面通常會包含產品展示圖，簡短的產品介紹信息，以及用戶登錄入口等。在設計時我們建議：
明確你要傳達的內容，保持簡短而清晰的文案。
搭配清晰、直觀的產品圖片，有助於加深用戶對產品的理解和記憶。
2、控制台頁
控制台頁（Dashboard）集合了大量多樣化的信息（如數字，圖形，文案等），需要一目瞭然地將關鍵信息展示給用戶。因此，如何將龐大復雜的信息精簡清晰地展示出來，是設計此類頁面的關鍵。在設計時要注意以下幾點：
按照信息的重要程度來組織頁面排版，突出展示關鍵信息。
將數據可視化，讓用戶可以直觀地了解關鍵信息及整體情況。
合理地使用顏色及柵格排版，減輕用戶的視覺負擔。
3、列表頁
列表設計是並列式展現信息，方便用戶能快速查看基本信息及操作。因此，信息的「可閱讀性」及「可操作性」是設計的關鍵。在設計時要注意以下幾點：
根據用戶需求來定義信息展示的等級，僅展示關鍵信息及操作。
當信息內容較為復雜時，可將次要的信息折疊或放到詳情頁面中，以遞進的方式讓用戶獲得更多的信息。
4、表格頁
表格作為多維信息展示的載體，使復雜的信息更易於閱讀與理解。它的易讀性，便捷性，易操作性對產品的體驗起著舉足輕重的作用。因此，我們在設計時要注意以下幾點：
構造清晰的表格布局，有利於提升讀者對信息的接收速度和理解程度。
更多地展示用戶所必須的信息，通過視覺上的調優突出展示重點信息。
當界面需要在一個很大的多縱行表格中展示數據，或每一橫列數據有多行信息時，可以巧妙地運用橫向或縱向斑馬條，使得信息條目之間更為分明，視覺上更易區分。
5、詳情頁
詳情頁面一般會承載大量的基本信息，擴展信息，或者狀態信息。對於信息效率和優先順序判定的要求會比較高。清晰的布局能幫助快速看到關鍵信息，提高決策效率。這設計時有以下幾點需要注意：
清晰的排版格式，易於閱讀的文本大小及間距，都是影響用戶獲取信息效率的關鍵因素。
圖文搭配比單文本展示信息能更好地提高用戶的理解。
6、表單頁
表單頁通常用來執行登錄、注冊、預定、下單、評論等任務，是產品中數據錄入必不可少的頁面模式。因此，舒適的表單設計，可以引導用戶高效地完成表單背後的工作流程：
考慮用戶的瀏覽方式，提供清晰的用戶視線瀏覽路徑；
內容是表單的核心，保證表單的內容精簡（盡量避免多餘的輸入項）；
標簽的命名要易於用戶閱讀和理解，避免模糊的描述給用戶造成困擾；
醒目的提交或完成按鈕，放在用戶的瀏覽線的終點更有利於用戶的完成操作。
二、柵格
我們通過定義網格、間距來呈現產品布局的最佳效果，設計師在設計時可按（移動：『頁面總寬 750px，內容區 750px』，PC：『頁面總寬 1440px，內容區 1208px』）來設定，並在此基礎上以 12等分的柵格來劃分整個設計建議區域。
建議橫向排列的區塊數量最多四個，最少一個，以保證視覺層面的舒適感。
註：圖中灰色部分為柵格的列，定義為『Column』，白色部分為柵格的間隔，定義為『Gutter』。
柵格公式：
我們為頁面中柵格的 Gutter 設定了定值，即瀏覽器在一定范圍擴大或縮小，柵格的 Column 寬度會隨之擴大或縮小，但 Gutter 的寬度值固定不變。
網站展示頁和 Dashboard 的 Gutter 寬度為 24px。
列表、表格、詳情和表單頁面的 Gutter 寬度為 16px。
『捌』 網站前端開發常用的布局方式有哪些
實現網頁布局的方式方法比較多，布局方式可以大概分為這幾類。
布局種類：
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，畢竟需要它們兩者結合在一起才可以實現出可交互的前端頁面。
『玖』 web前端幾種常見的網頁布局
現在的網頁差不多都採用分列布局，
常見的有單列布局（如網路首頁）、雙列布局、三列布局和混合布局，超過三列的布局很少見。
最簡單的要數單列布局了，這種布局適合各種搜索引擎主頁，干凈的界面和較少的干擾信息給用戶較好的體驗。
『拾』 前端頁面布局有幾種
常用flex布局，也有用浮動布局的，還有定位布局，表格布局