html網頁界面布局設計_HTML網頁製作中總共有幾種布局方式

1、在網頁布局中,可以將頁面內容模塊分為左右兩部分的布局方式

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    body,html {
      margin: 0;
      padding: 0;
      height: 100%;
      color: #fff;
    }
    .left,
    .right {
      float: left;
      width: 50%;
      height: 100%;
    }
    .left { background-color: red; }
    .right { background-color: #000; }
  </style>
</head>
<body>
  <div class="left">
    左邊部分
  </div>
  <div class="right">
    右邊部分
  </div>
</body>
</html>

2、HTML網頁製作中，總共有幾種布局方式？

1.自然布局。
沒有任何修飾的布局是自動靠左的。
2.流動布局
上面講的float:left的情況。
3.定位布局
相對定位和絕對定位都是相對於父div標簽的。
相對------以這個元素的本來應該在的位置為參照點
絕對——以父div標簽的原點（左上角）為參照點。
由於外層是position:relative，所以里層是absolute的話，則會以外層的左上角為位移參考對齊。當然外層只寫position:relative，寫上left,top這兩個值，則表示以：以這個元素的本來應該在的位置為布局參照原點進行left,top對齊。
還有一種情況是，只是一個position:absolute;外層沒有position:relative，這時會找尋那個點為參考呢？這時候的原則是：如果某父級元素中有relative者，則以某父級元素為參考原點，如果沒有position:relative，則以body為參考原點。如果position:absolute外層沒有relative時，這兩個布局上是沒有區別的。
當然最後一種情況是：外層是：position:absolute;里邊是position:relative，那會是什麼情況？按著原來的原則，absolute會參考body為布局原點，relative會參考他本來應該在的位置為布局原點，這時候其實就是參考外層左上角為布局原點。

3、html+css+div網頁設計與布局怎麼樣

方法/步驟

一個網頁設計時，我們可以將一個頁面設置為頭部，中間，和底部三部分；頭部有分為店招（logo）和導航等
中間既內容部分，內容也可一個整體，也可左右分離，
底部來頁面結尾，一般寫版權信息，友情鏈接等

END
頭部編輯

店招：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘寶助手網</title>
<style>
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
</style>
</head>

<body>
<div id="top">
<div id="logo">店招</div>
<div id="nav">導航</div>
</div>

<div id="centre">
<div id="centreLeft">內容左</div>
<div id="centreRight">內容右</div>
</div>

<div id="bottom">底部</div>

</body>
</html>

導航：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘寶助手網</title>
<style>
a,ul,li,div,span,td{ padding:0; margin:0;}
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
#nav{ width:100%; height:30px; background:#300}
a{ text-decoration: none; display:block;den}
ul li{list-style: none;}
#nav>ul>li{ float:left; margin-left: 50px; line-height:30px; }
#nav>ul>li>a{ color:#FFF; font-weight:900px}
</style>
</head>

<body>
<div id="top">
<div id="logo">店招</div>
<div id="nav">
<ul>
<li><a href="" title="" target="_blank">淘寶</a></li>
<li><a href="" title="" target="_blank">圖片</a></li>
<li><a href="" title="" target="_blank">視頻</a></li>
<li><a href="" title="" target="_blank">資料下載</a></li>
<li><a href="" title="" target="_blank">視頻下載</a></li>

</ul>
</div>
</div>

<div id="centre">
<div id="centreLeft">內容左</div>
<div id="centreRight">內容右</div>
</div>

<div id="bottom">底部</div>

</body>
</html>

END
內容

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘寶助手網</title>
<style>
a,ul,li,div,span,td{ padding:0; margin:0;}
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
#nav{ width:100%; height:30px; background:#300}
a{ text-decoration: none; display:block;}
ul li{list-style: none;}
#nav>ul>li{ float:left; margin-left: 50px; line-height:30px; }
#nav>ul>li>a{ color:#FFF; font-weight:900px}
/*******===================頭====================************/
#centre{ margin:0 auto; width:1200px; height:auto; }
#centreLeft{ float:left; width:70%; height:500px;border:1px #333333 solid;}
#centreRight{ float: right; width:27%; height:400px;border:1px #333333 solid;}
</style>
</head>

<body>
<div id="top">
<div id="logo">店招</div>
<div id="nav">
<ul>
<li><a href="" title="" target="_blank">淘寶</a></li>
<li><a href="" title="" target="_blank">圖片</a></li>
<li><a href="" title="" target="_blank">視頻</a></li>
<li><a href="" title="" target="_blank">資料下載</a></li>
<li><a href="" title="" target="_blank">視頻下載</a></li>

</ul>
</div>
</div>

<div id="centre">
<div id="centreLeft">內容左</div>
<div id="centreRight">內容右</div>
</div>

<div id="bottom">底部</div>

</body>
</html>

END
底部

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘寶助手網</title>
<style>
a,ul,li,div,span,td{ padding:0; margin:0;}
#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}
#logo{ width:100%; height:100px; background: #003; }
#nav{ width:100%; height:30px; background:#300}
a{ text-decoration: none; display:block;}
ul li{list-style: none;}
#nav>ul>li{ float:left; margin-left: 50px; line-height:30px; }
#nav>ul>li>a{ color:#FFF; font-weight:900px}
/*******===================頭====================************/
#centre{ margin:0 auto; width:1200px; height:auto; overflow: hidden }
#centreLeft{ float:left; width:70%; height:500px;border:1px #333333 solid;}
#centreRight{ float: right; width:27%; height:400px;border:1px #333333 solid;}
/***********==============內容===================*******/
#bottom{ margin:0 auto; width:1200px; height:200px; border:1px #333333 solid; margin-top:20px; }
/***********==============底部===================*******/

</style>
</head>

<body>
<div id="top">
<div id="logo">店招</div>
<div id="nav">
<ul>
<li><a href="" title="" target="_blank">淘寶</a></li>
<li><a href="" title="" target="_blank">圖片</a></li>
<li><a href="" title="" target="_blank">視頻</a></li>
<li><a href="" title="" target="_blank">資料下載</a></li>
<li><a href="" title="" target="_blank">視頻下載</a></li>

</ul>
</div>
</div>

<div id="centre">
<div id="centreLeft">內容左</div>
<div id="centreRight">內容右</div>
</div>

<div id="bottom">底部</div>

</body>
</html>

4、HTML裡面有幾種布局方式？

1.自然布局。

沒有任何修飾的布局是自動靠左的。

2.流動布局

上面講的float:left的情況。

3.定位布局

相對定位和絕對定位都是相對於父div標簽的。

相對------以這個元素的本來應該在的位置為參照點

絕對——以父div標簽的原點（左上角）為參照點。

由於外層是position:relative，所以里層是absolute的話，則會以外層的左上角為位移參考對齊。當然外層只寫position:relative，寫上left,top這兩個值，則表示以：以這個元素的本來應該在的位置為布局參照原點進行left,top對齊。

還有一種情況是，只是一個position:absolute;外層沒有position:relative，這時會找尋那個點為參考呢？這時候的原則是：如果某父級元素中有relative者，則以某父級元素為參考原點，如果沒有position:relative，則以body為參考原點。如果position:absolute外層沒有relative時，這兩個布局上是沒有區別的。

當然最後一種情況是：外層是：position:absolute;里邊是position:relative，那會是什麼情況？按著原來的原則，absolute會參考body為布局原點，relative會參考他本來應該在的位置為布局原點，這時候其實就是參考外層左上角為布局原點。

5、html5頁面怎麼布局

1）像<span>這樣的行內標記，定義它的margin-top和margin-bottom是無效的，除非你把它設置為塊狀元素才可以。Display:block
2）對於塊狀元素，你可以自由的使用外邊距來定義版式和元素之間的距離。類似 DIV 等等，
3）無論什麼元素，一旦設置為是浮動顯示，就擁有了完整的盒模型結構，我們就可以使用外邊距，內邊距，邊框，高和寬來控制的大小以及與其他對象之間的位置關系。
4）浮動是從網頁布局的角度來定義元素的顯示，而行內和塊狀屬性主要是從元素自身的性質來定其顯示的。
5）當元素沒有定義邊框時，可以把內邊距作為外邊距使用。有時候外邊距會有重疊現象的。
6）當為元素定義背景圖像時，內邊距區域內可以顯示背景圖像，而對外邊距區域來說，背景圖像是達不到的，他永遠都是透明狀態
7）用div+css設計網頁結構時，設計師滿腦子都是網頁內容，而非內容所呈現的效果。
8）塊狀元素：不管塊狀元素寬度是多少，他總會自動占據一行，因為在他末尾附加了一個換行符，而行內元素沒有這個特點。塊狀元素有完整的盒模型結構，可以定義寬度和高度，而行內元素沒有這個特性，無法通過高度來改變文本行的行高。
塊元素的代表標記 div
行內元素的代表標記 span ，行內標記不具備組織結構框架
9）網頁布局分為：自然布局，浮動布局，定位布局
10）當一個元素被定義為浮動顯示時，即定義為塊狀元素。並且該元素就會收縮自身體積為最小狀態。所以，應該有個好的習慣即把浮動元素設置高和寬。如果沒有設置，則元素會按照它所包含的內容大小來確定它的大小。
11）當元素浮動後，周邊的對象會自動環繞浮動元素周圍，形成一種環繞關系。
12）塊狀元素之間的外邊距會有重疊現象，但是浮動元素之間的外邊距不會發聲重疊現象。
13）浮動元素移動，上移：margin-top:-**; 下移：margin-botom:-*px,其他以此類推。
14）一般定位元素（絕對或是相對元素）都會覆蓋在文檔流對象之上。但是，select元素的窗口控制項還不完全支持z-index
15）在css定位布局中，一般遵循「外部相對定位，內部絕對定位」
16）在body中設置min-width:760px,可以避免布局重疊現象。

6、怎樣實現html可視化布局頁面

PHP是把程序直接編譯成 HTML 輸出顯示在網頁上，你只需要求修改PHP程序中的HTML就可以了啊加CSS JS什麼的直接就可以寫在上面

7、靜態網頁設計製作中的布局模式

一、靜態布局（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 給單一網頁不同設備返回不同樣式的技術統稱。

8、在HTML網頁設計時中，怎麼樣布局使得<body>中的整體居中？也就是說，當html頁面寬度小於

<html>
  <head>
  </head>
  <body>
    <div id="wrap">測試</div>
  </body>
</html>#wrap{width:980px;margin:0 auto;height:100px;background-color:red;}

margin:0 auto;就會使div位於中間位置。望採納！

9、在html頁面中這種布局以及*效果*是怎麼弄出來的

這個是用dreamweaver或者其他美工工具做的，有一張圖片，可以自定義截圖，然後將圖片加內上超鏈接。里邊容是用一個叫map的標簽，然後里邊選中區域，區域標簽是area，在區域標簽內加上坐標，然後加上超鏈接就可以了，這個用人眼是看不出坐標的，最好使用工具截圖，會自動形成坐標。你在網上搜搜，應該有詳細介紹的。

導航:首頁 > 萬維百科 > html網頁界面布局設計

html網頁界面布局設計

與html網頁界面布局設計相關的知識