1. 前端設計頭部布局,下圖該怎麼進行頭部布局
上+下+中間突出部分絕對定位
2. 靜態網頁設計製作中的布局模式
一、靜態布局（Static Layout）
即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。
1、布局特點：不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態（定寬度）布局的，也就是設置了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見與pc端。
2、設計方法：
PC：居中布局，所有樣式使用絕對寬度/高度(px)，設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；
移動設備：另外建立移動網站，單獨設計一個布局，使用不同的域名如wap.或m.。
在移動端開發中採用靜態布局的兩種方式：
（1）在viewport meta標簽上設置width=320，頁面的各個元素也採用px作為單位。通過用JS動態修改標簽的initial-scale使得頁面等比縮放，從而剛好占滿整個屏幕。（見前端開發-web app 變革之rem）
（2）設在viewport meta標簽上設置content"width=640,user-scalable=no，頁面的各個元素也採用px作為單位。由於640px超出了手機寬度，瀏覽器會自動縮小頁面至剛好全屏。
優點：這種布局方式對設計師和CSS編寫者來說都是最簡單的，亦沒有兼容性問題。
缺點：顯而易見，即不能根據用戶的屏幕尺寸做出不同的表現。
二、流式布局（Liquid Layout）
流式布局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕解析度進行適配調整，但整體布局不變。代表作柵欄系統（網格系統）。
網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設置網頁主體的寬度為80%，min-width為960px。圖片也作類似處理（width:100%, max-width一般設定為圖片本身的尺寸，防止被拉伸而失真）。
1、布局特點：屏幕解析度變化時，頁面里元素的大小會變化而但布局不變。【這就導致如果屏幕太大或者太小都會導致元素無法正常顯示】
2、設計方法：使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，盡可能的適應各種解析度。往往配合 max-width/min-width 等屬性控制尺寸流動范圍以免過大或者過小影響閱讀。
這種布局方式在Web前端開發的早期歷史上，用來應對不同尺寸的PC屏幕（那時屏幕尺寸的差異不會太大），在當今的移動端開發也是常用布局方式，但缺點明顯：主要的問題是如果屏幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的屏幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得「流式」），顯示非常不協調。
三、自適應布局（Adaptive Layout）
自適應布局的特點是分別為不同的屏幕解析度定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕解析度范圍。改變屏幕解析度可以切換不同的靜態局部（頁面元素位置發生改變），但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。可以把自適應布局看作是靜態布局的一個系列。
1、布局特點：屏幕解析度變化時，頁面裡面元素的位置會變化而大小不會變化。
2、設計方法：使用 @media 媒體查詢給不同尺寸和介質的設備切換不同的樣式。在優秀的響應范圍設計下可以給適配范圍內的設備最好的體驗，在同一個設備下實際還是固定的布局。
四、響應式布局（Responsive Layout）
隨著CSS3出現了媒體查詢技術，又出現了響應式設計的概念。響應式設計的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、手錶、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果，對CSS編寫者而言，在實現上不拘泥於具體手法，但通常是糅合了流式布局+彈性布局，再搭配媒體查詢技術使用。——分別為不同的屏幕解析度定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調整而自動適配。即：創建多個流體式布局，分別對應一個屏幕解析度范圍。可以把響應式布局看作是流式布局和自適應布局設計理念的融合。
響應式幾乎已經成為優秀頁面布局的標准。
1、布局特點：每個屏幕解析度下面會有一個布局樣式，即元素位置和大小都會變。
2、設計方法：媒體查詢+流式布局。通常使用 @media 媒體查詢 和網格系統 (Grid System) 配合相對布局單位進行布局，實際上就是綜合響應式、流動等上述技術通過 CSS 給單一網頁不同設備返回不同樣式的技術統稱。
3. 網站前端開發慣用的布局方式有哪些
網站布局之「廠」字型
所謂的「廠」字型布局結構，就是指頁面頂部為橫條網站標識和廣告條，下方左面為主菜單，右面顯示內容的布局。菜單條與背景，整體效果類似「廠」字。「廠」布局是目前最常見的一種網頁布局方式。這種布局的優點是頁面結構清晰，主次分明。缺點是由於被使用得過多，顯得缺乏創意，略顯呆板。
網站布局之「三」字型
這種布局多用於國外站點，通常頁面上方橫向幾條色塊，將頁面整體分割為若幹部分，色塊中大多放廣告圖片或者Flash動畫。
網站布局之 「國」字型
「國」字型布局通常上下各有一個廣告條或者其他欄目條，左面是主菜單，右面放友情鏈接或者其他欄目等，中間是主要內容。這種布局的優點是充分利用版面，信息量大。缺點是頁面顯得比較擁擠和局促，不夠靈活。
網站布局之門戶型
這類網頁通常內容多，信息量大，通常沒有時顯的線條作為邊界，圖片用得也比較少，一般通過文字的排列產生視覺上的分區效果。
網站布局之區塊型
區塊型布局現在出現的越來越多，在網頁上各個區域具有封閉的邊界，經過合理放置顯得清晰美觀。其缺點是由於片面固定，各區域很難根據其中的內容的多少而調整大小，因此不適宜用於區域內容的長度經常變化的網頁。
網站布局之宣傳單型
宣傳單型布局頁面就像一張宣傳海報，以一張精美圖片作為頁面的設計中心，常用於個性類站點。其優點是漂亮吸引人；缺點就是頁面中大面積使用圖片，導致瀏覽速度相對較慢。所以這類頁面同是可以作為宣傳單使用。
4. 前端常見布局方式
常見的布局方式
常見的布局這么幾種單列水平居中布局, 一列定寬一列自適應布局, 兩列定寬一列自適應布局, 兩側定寬中間自適應三列布局。
一列定寬一列自適應
定位布局
左邊的寬度寫死，右邊盒子使用定位拉伸法實現，left等於左邊盒子的寬度，right等於0
.left-box{ width:200px; }
.right-box{ position:absolute; left:200px; right:0; }
或者左邊的定位寫死寬度，右邊的寫padding-left等於左邊的寬度（常用一點）
.left-box{ width:200px; position: fixed; height:100%; }
.right-box{ padding-left:200px;}
浮動布局
左邊的寬度寫死並且浮動，右邊盒子寫overflow:hidden;利用的是創建一個新的BFC（塊級格式化上下文）來防止文字環繞的原理來實現的。BFC就是一個相對獨立的布局環境，它內部元素的布局不受外面布局的影響
.left-box {
width: 200px;
height: 150px;
float: left;
background: #f22;
}
.right-box {
height: 200px;
overflow: hidden;
background: #cff;
}
兩列定寬一列自適應上面的布局方式同樣適用
常見的三列布局一般使用聖杯布局和雙飛翼布局。
聖杯布局和雙飛翼布局
兩者都屬於三列布局，是一種很常見的頁面布局方式，
三列一般分別是子列、主列和附加列，其中子列一般是居左的導航，且寬度固定；主列是居中的主要內容，寬度自適應；附加列一般是廣告等額外信息，居右且寬度固定。
聖杯布局
<div class="container">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>
.container {
padding-left: 210px;
padding-right: 190px;
}
.main {
float: left;
width: 100%;
height: 300px;
}
.sub {
position: relative;
left: -210px;
float: left;
width: 200px;
height: 300px;
margin-left: -100%;
}
.extra {
position: relative;
right: -190px;
float: left;
width: 180px;
height: 300px;
margin-left: -180px;
}
雙飛翼布局
<div class="main-wrapper">
<div class="main"></div>
</div>
<div class="sub"></div>
<div class="extra"></div>
.main-wrapper {
float: left;
width: 100%;
}
.main {
height: 300px;
margin-left: 210px;
margin-right: 190px;
background-color: rgba(255, 0, 0, .5);
}
.sub {
float: left;
width: 200px;
height: 300px;
margin-left: -100%;
background-color: rgba(0, 255, 0, .5);
}
.extra {
float: left;
width: 180px;
height: 300px;
margin-left: -180px;
background-color: rgba(0, 0, 255, .5);
}
倆種布局方式都是把主列放在文檔流最前面，使主列優先載入。
兩種布局方式在實現上也有相同之處，都是讓三列浮動，然後通過負外邊距形成三列布局。
兩種布局方式的不同之處在於如何處理中間主列的位置：聖杯布局是利用父容器的左、右內邊距定位；雙飛翼布局是把主列嵌套在div後利用主列的左、右外邊距定位。
其他的話還有
flex布局
Flexbox又叫彈性盒模型。它可以簡單使用一個元素居中（包括水平垂直居中），可以讓擴大和收縮元素來填充容器的可利用空間，可以改變源碼順序獨立布局，以及還有其他的一些功能。
Flex布局是我最喜歡的布局，合理使用它能夠大大減少布局方面的工作, 例如以上列舉的三列布局也可以使用flex輕松實現。此外在移動端使用flex也比較常見。
響應式布局
網頁可以自動識別設備屏幕寬度，根據不同的寬度採用不同的CSS的樣式，從而達到兼容各種設備的效果。
響應式布局使用媒體查詢(CSS3 Media Queries), 根據不同屏幕解析度採用不同CSS規則
流式布局
流式布常見的就是bootstrap了它提供了一套響應式，移動優先的流式柵格系統(grid system)，將屏幕分成12列來實現響應式的。它的實現原理非常簡單，Media Query加上float布局
5. 網站前端開發常用的布局方式有哪些
實現網頁布局的方式方法比較多，布局方式可以大概分為這幾類。
布局種類：
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，畢竟需要它們兩者結合在一起才可以實現出可交互的前端頁面。
6. 安卓移動開發的前端UI設計可以使用哪些不同的布局，這些布局適用於哪些情況
沒懂啥意思，是前端還是ui？
UI的話就是隨便設計，使用什麼布局是技術的問題，安卓的布局就是以下六大基本布局
線性布局
線性布局在開發中使用最多，具有垂直方向與水平方向的布局方式，通過設置屬性「android:orientation」控制方向，屬性值垂直（vertical）和水平(horizontal)，默認水平方向。
RelativeLayout
相對布局可以讓子控制項相對於兄弟控制項或父控制項進行布局，可以設置子控制項相對於兄弟控制項或父控制項進行上下左右對齊。
FrameLayout
幀布局或叫層布局，從屏幕左上角按照層次堆疊方式布局，後面的控制項覆蓋前面的控制項。
AbsoluteLayout
絕對布局中將所有的子元素通過設置android:layout_x 和 android:layout_y屬性，將子元素的坐標位置固定下來，即坐標(android:layout_x, android:layout_y) ，layout_x用來表示橫坐標，layout_y用來表示縱坐標。屏幕左上角為坐標(0,0)，橫嚮往右為正方，縱嚮往下為正方。實際應用中，這種布局用的比較少，因為Android終端一般機型比較多，各自的屏幕大小。解析度等可能都不一樣，如果用絕對布局，可能導致在有的終端上顯示不全等。
TableLayout
表格布局，適用於多行多列的布局格式，每個TableLayout是由多個TableRow組成，一個TableRow就表示TableLayout中的每一行，這一行可以由多個子元素組成。
GridLayout(網格布局)
作為android 4.0 後新增的一個布局,與前面介紹過的TableLayout(表格布局)其實有點大同小異;
7. 前端布局的幾種方式
1.固定布局，靜態布局
傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位，網頁寬度一般為960px。網頁布局始終按照最初寫代碼時的布局來顯示，不受瀏覽器影響。如果瀏覽器寬度如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景
2.流式布局
流式布局使用的是百分比，這位網頁提供了很強的可塑性和流動性，與固定寬度布局基本不同點 就在於對網站尺寸的側量單位不同。屏幕解析度變化時，頁面里元素的大小會變化而但布局不變，這可能導致如果屏幕太大或者太小都會導致元素無法正常顯示。
3.自適應布局
自適應布局的特點是分別為不同的屏幕解析度定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕解析度范圍。使用 @media 媒體查詢給不同尺寸和介質的設備切換不同的樣式，例如寬度960px是一種樣式，網頁寬度1440px是另一種樣式。改變屏幕解析度可以切換不同的靜態局部，但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。
4.彈性布局
使用em 或 rem 單位進行相對布局，相對%百分比更加靈活，同時可以支持瀏覽器的字體大小調整和縮放等的正常顯示。這種布局中包裹文字的各元素的尺寸採用em/rem做單位，而頁面的主要劃分區域的尺寸仍使用百分數或px做單位。默認的文字大小16px就是1em。
5.響應式布局
每個屏幕解析度下面會有一個布局樣式，即元素位置和大小都會變，設計方法通常採用了媒體查詢+流式布局，使用@media媒體查詢給不同尺寸和介質的設備切換不同的樣式。為不同終端的用戶提供更加舒適的界面和更好的用戶體驗。
8. 前端不知道怎麼布局
在談WEB前端怎麼布局前，我們先梳理前端的布局類型，具體有以下幾種：
1.靜態布局：不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態（定寬度）布局的，也就是設置了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見於pc端。
2.流式布局：布局特點是屏幕解析度變化時，頁面里元素的大小會變化而但布局不變。
3.自適應布局：自適應布局的特點是分別為不同的屏幕解析度定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕解析度范圍。
4.響應式布局：布局特點是每個屏幕解析度下面會有一個布局樣式，即元素位置和大小都會變。
那麼我們如何布局呢？通過以下幾點來選擇布局。
1.如果只做電腦端，最好的選擇是靜態布局。
2.如果做移動端，且設計對高度和元素間距要求不高，那麼彈性布局（rem+js）是最好的選擇，通過一份css+一份js調節font-size就搞定。
3.如果電腦端，移動端要兼容，而且要求很高，那麼響應式布局還是最好的選擇。前提是設計根據不同的高寬做不同的設計，響應式根據媒體查詢做不同的布局。