整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
網頁布局有很多種方式，一般分為以下幾個部分：頭部區域、菜單導航區域、內容區域、底部區域。
頭部區域位于整個網頁的頂部，一般用于設置網頁的標題或者網頁的 logo：
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 項目(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
/* 頭部樣式 */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>頭部區域</h1>
</div>
</body>
</html>菜單導航條包含了一些鏈接，可以引導用戶瀏覽其他頁面：
例
/* 導航條 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 導航鏈接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 鏈接 - 修改顏色 */
.topnav a:hover {
background-color: #ddd;
color: black;
}內容區域一般有三種形式:
不相等的列一般是在中間部分設置內容區域，這塊也是最大最主要的，左右兩次側可以作為一些導航等相關內容，這三列加起來的寬度是 100％。
例：
.column {
float: left;
}
/* 左右側欄的寬度 */
.column.side {
width: 25%;
}
/* 中間列寬度 */
.column.middle {
width: 50%;
}
/* 響應式布局 - 寬度小于600px時設置上下布局 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
底部區域在網頁的最下方，一般包含版權信息和聯系方式等。
例
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}通過以上等學習我們來創建一個響應式等頁面，頁面的布局會根據屏幕的大小來調整：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>項目</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
/* 頭部標題 */
.header {
padding: 30px;
text-align: center;
background: white;
}
.header h1 {
font-size: 50px;
}
/* 導航條 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 導航條鏈接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 鏈接顏色修改 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* 創建兩列 */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* 右側欄 */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* 圖像部分 */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* 文章卡片效果 */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* 列后面清除浮動 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 底部 */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* 響應式布局 - 屏幕尺寸小于 800px 時，兩列布局改為上下布局 */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* 響應式布局 -屏幕尺寸小于 400px 時，導航等布局改為上下布局 */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>我的網頁</h1>
<p>重置瀏覽器大小查看效果。</p>
</div>
<div class="topnav">
<a href="#">鏈接</a>
<a href="#">鏈接</a>
<a href="#">鏈接</a>
<a href="#" style="float:right">鏈接</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>文章標題</h2>
<h5>xx 年xx月 xx日</h5>
<div class="fakeimg" style="height:200px;"><img src="img/bird.png"></div>
<p>文本...</p>
<p>當熱誠變成習慣，恐懼和憂慮即無處容身。缺乏熱誠的人也沒有明確的目標。熱誠使想象的輪子轉動。一個人缺乏熱誠就象汽車沒有汽油。
善于安排玩樂和工作，兩者保持熱誠，就是最快樂的人。熱誠使平凡的話題變得生動。！</p>
</div>
<div class="card">
<h2>文章標題</h2>
<h5>xx 年 xx 月xx日</h5>
<div class="fakeimg" style="height:200px;"><img src="img/border.png"></div>
<p>文本...</p>
<p>一切事無法追求完美，唯有追求盡力而為。這樣心無壓力，出來的結果反而會更好！</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>關于我</h2>
<div class="fakeimg" style="height:100px;"></div>
<p>6666</p>
</div>
<div class="card">
<h3>熱門文章</h3>
<div class="fakeimg"><img src="img/fy2_wp.png">\</div>
</div>
<div class="card">
<h3>關注我</h3>
<p>本站發布的系統與軟件僅為個人學習測試使用，請在下載后24小時內刪除，
不得用于任何商業用途，否則后果自負，請支持購買正版軟件！如侵犯到您的權益,請及時通知我們,我們會及時處理。
聲明：為非贏利性網站 不接受任何贊助和廣告。</p>
</div>
</div>
</div>
<div class="footer">
<h2>底部區域</h2>
</div>
</body>
</html>本文主要介紹了Html的網頁布局結構，如何去了解網絡的布局，介紹了常見的移動設備的三種網頁模式，最后通過一個小項目，總結之前講解的內容。
代碼很簡單，希望可以幫助你學習。
頁布局對改善網站的外觀非常重要。
請慎重設計您的網頁布局。
實例
使用 <div> 元素的網頁布局
[demo]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div#container{width:500px}
div#header {background-color:#99bbbb;}
div#menu {background-color:#ffff99;height:200px;width:150px;float:left;}
div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;}
div#footer {background-color:#99bbbb;clear:both;text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0;font-size:18px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">Content goes here</div>
<div id="footer">Copyright W3School.com.cn</div>
</div>
</body>
</html>
[/demo]
如何使用 <div> 元素添加布局。
使用 <table> 元素的網頁布局
[demo]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#99bbbb;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#ffff99;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#99bbbb;text-align:center;">
Copyright W3School.com.cn</td>
</tr>
</table>
</body>
</html>
[/demo]
如何使用 <table> 元素添加布局。
網站布局
大多數網站會把內容安排到多個列中（就像雜志或報紙那樣）。
可以使用 <div> 或者 <table> 元素來創建多列。CSS 用于對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀。
提示：即使可以使用 HTML 表格來創建漂亮的布局，但設計表格的目的是呈現表格化數據 - 表格不是布局工具！
HTML 布局 - 使用 <div> 元素
div 元素是用于分組 HTML 元素的塊級元素。
下面的例子使用五個 div 元素來創建多列布局：
實例
[demo]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div#container{width:500px}
div#header {background-color:#99bbbb;}
div#menu {background-color:#ffff99; height:200px; width:100px; float:left;}
div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;}
div#footer {background-color:#99bbbb; clear:both; text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0; font-size:14px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">Content goes here</div>
<div id="footer">Copyright W3School.com.cn</div>
</div>
</body>
</html>
[/demo]
上面的 HTML 代碼會產生如下結果：
使用 div 和 CSS 進行布局
HTML 布局 - 使用表格
使用 HTML <table> 標簽是創建布局的一種簡單的方式。
可以使用 <div> 或者 <table> 元素來創建多列。CSS 用于對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀。
提示：即使可以使用 HTML 表格來創建漂亮的布局，但設計表格的目的是呈現表格化數據 - 表格不是布局工具！
下面的例子使用三行兩列的表格 - 第一和最后一行使用 colspan 屬性來橫跨兩列：
實例
[demo]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#99bbbb;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#ffff99;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#99bbbb;text-align:center;">
Copyright W3School.com.cn</td>
</tr>
</table>
</body>
</html>
[/demo]
上面的 HTML 代碼會產生以下結果：
使用表格進行布局
HTML 布局 - 有用的提示
提示：使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那么站點會更易于維護。通過編輯單一的文件，就可以改變所有頁面的布局。如需學習更多有關 CSS 的知識，請訪問我們的 CSS 教程。
提示：由于創建高級的布局非常耗時，使用模板是一個快速的選項。通過搜索引擎可以找到很多免費的網站模板（您可以使用這些預先構建好的網站布局，并優化它們）。
HTML 布局標簽
標簽 描述
<div> 定義文檔中的分區或節（division/section）。
<span> 定義 span，用來組合文檔中的行內元素。
通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。
實例
垂直框架
[demo]
<html>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
[/demo]
本例演示：如何使用三份不同的文檔制作一個垂直框架。
水平框架
[demo]
<html>
<frameset rows="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
[/demo]
本例演示：如何使用三份不同的文檔制作一個水平框架。
框架
通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。每份HTML文檔稱為一個框架，并且每個框架都獨立于其他的框架。
使用框架的壞處：
開發人員必須同時跟蹤更多的HTML文檔
很難打印整張頁面
框架結構標簽（<frameset>）
框架結構標簽（<frameset>）定義如何將窗口分割為框架
每個 frameset 定義了一系列行或列
rows/columns 的值規定了每行或每列占據屏幕的面積
編者注：frameset 標簽也被某些文章和書籍譯為框架集。
框架標簽（Frame）
Frame 標簽定義了放置在每個框架中的 HTML 文檔。
在下面的這個例子中，我們設置了一個兩列的框架集。第一列被設置為占據瀏覽器窗口的 25%。第二列被設置為占據瀏覽器窗口的 75%。HTML 文檔 "frame_a.htm" 被置于第一個列中，而 HTML 文檔 "frame_b.htm" 被置于第二個列中：
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
基本的注意事項 - 有用的提示：
假如一個框架有可見邊框，用戶可以拖動邊框來改變它的大小。為了避免這種情況發生，可以在 <frame> 標簽中加入：noresize="noresize"。
為不支持框架的瀏覽器添加 <noframes> 標簽。
重要提示：不能將 <body></body> 標簽與 <frameset></frameset> 標簽同時使用！不過，假如你添加包含一段文本的 <noframes> 標簽，就必須將這段文字嵌套于 <body></body> 標簽內。（在下面的第一個實例中，可以查看它是如何實現的。）
更多實例
如何使用 <noframes> 標簽
[demo]
<html>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
<noframes>
<body>您的瀏覽器無法處理框架！</body>
</noframes>
</frameset>
</html>
[/demo]
本例演示：如何使用 <noframes> 標簽。
混合框架結構
[demo]
<html>
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>
[/demo]
本例演示如何制作含有三份文檔的框架結構，同時將他們混合置于行和列之中。
含有 noresize="noresize" 屬性的框架結構
[demo]
<html>
<frameset cols="50%,*,25%">
<frame src="/example/html/frame_a.html" noresize="noresize" />
<frame src="/example/html/frame_b.html" />
<frame src="/example/html/frame_c.html" />
</frameset>
</html>
[/demo]
本例演示 noresize 屬性。在本例中，框架是不可調整尺寸的。在框架間的邊框上拖動鼠標，你會發現邊框是無法移動的。
導航框架
[demo]
<html>
<frameset cols="120,*">
<frame src="/example/html/html_contents.html">
<frame src="/example/html/frame_a.html" name="showframe">
</frameset>
</html>
[/demo]
本例演示如何制作導航框架。導航框架包含一個將第二個框架作為目標的鏈接列表。名為 "contents.htm" 的文件包含三個鏈接。
內聯框架
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<iframe src="./imagecopy1234567890/test.jpg"></iframe>
<p>一些老的瀏覽器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可見的。</p>
</body>
</html>
[/demo]
本例演示如何創建內聯框架（HTML 頁中的框架）。
跳轉至框架內的一個指定的節
[demo]
<html>
<frameset cols="20%,80%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/link.html#C10">
</frameset>
</html>
[/demo]
本例演示兩個框架。其中的一個框架設置了指向另一個文件內指定的節的鏈接。這個"link.htm"文件內指定的節使用 <a name="C10"> 進行標識。
使用框架導航跳轉至指定的節
[demo]
<html>
<frameset cols="180,*">
<frame src="/example/html/content.html">
<frame src="/example/html/link.html" name="showframe">
</frameset>
</html>
[/demo]
本例演示兩個框架。左側的導航框架包含了一個鏈接列表，這些鏈接將第二個框架作為目標。第二個框架顯示被鏈接的文檔。導航框架其中的鏈接指向目標文件中指定的節。
網站的布局是一個網站設計的根本，CSS的Grid布局已經成為了未來網站布局的基本方式。
今天這篇文章我們通過圖文，一起看看如何自己實現Grid布局方式。
CSS
首先我們看看最基本的Grid布局是什么樣的，HTML頁面的代碼如下所示。
HTML代碼
然后設置其CSS屬性，這里主要展示容器的CSS屬性，給子元素添加的color屬性就不在這里展示了。
CSS屬性
在頁面上看到的效果如下，目前因為沒有對子div元素做任何設置，會自動將子div沿垂直方向排列。
頁面效果
為了讓外層的div(wrapper)為一個網格容器，需要設置其行數和列數，就像一個表格一樣。
此時就需要用到grid-template-columns和grid-template-rows兩個屬性值。
grid-template-columns
用于設置網格容器的列屬性，其實就相當于列的寬度。當我們需要幾列展示時，就設置幾個值，這個屬性可以接收具體數值比如100px，也可以接收百分比值，表示占據容器的寬度。
需要注意的是：當給容器設定了寬度時，grid-template-columns設定的百分比值是以容器的寬度值為基礎計算的。如果未設置寬度時，會一直向上追溯到設置了寬度的父容器，直到body元素。
比如我們設置了以下的CSS屬性。
CSS屬性
可以看出三列寬度加起來的百分比值為120%，而且wrapper容器并未設置寬度，會一直向上追溯到body元素，這樣三列的總寬度已經超過了body的寬度，因此會出現滾動條。
頁面效果
grid-template-rows
用于設置網格容器的行屬性，其實就相當于行的高度，其特性與grid-template-columns屬性類似。
下面簡單修改grid-template-columns和grid-template-rows兩個屬性的值。
CSS值
得到的效果圖如下所示。
效果圖
接下來我們看看別的情況，通過CSS屬性設置3*3的網格。
CSS屬性
在頁面上的呈現方式如下所示。
頁面呈現
從頁面上看我們看不出有什么問題，但是打開控制臺后可以發現，這個網格已經占據了3*3的空間。它后面的元素只能排列在所有的網格后面。
頁面實際情況
當我們需要得到特殊的排列方式，比如占滿整行，占滿整列，二三行合并等等。
這就需要用到grid-column和grid-row屬性，表示行網線和列網線的序號。通過設置start和end值，來進行網格的合并。
網線序號
我們重新給wrapper容器內部的div添加class類。
HTML代碼
然后添加以下的CSS代碼，給不同的網格特定的行號和列號。
CSS代碼
最終得到的效果圖如下所示。
頁面效果圖
今天這篇文章介紹了CSS中Grid布局的基礎知識，應該可以很快掌握，其他的復雜點的網格布局大家也可以自己去嘗試。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
