一篇文章帶你了解HTML的網(wǎng)頁(yè)布局結(jié)構(gòu)

家好，我是IT共享者，人稱皮皮。這篇我們來(lái)講講CSS網(wǎng)頁(yè)布局。

一、網(wǎng)頁(yè)布局

網(wǎng)頁(yè)布局有很多種方式，一般分為以下幾個(gè)部分：頭部區(qū)域、菜單導(dǎo)航區(qū)域、內(nèi)容區(qū)域、底部區(qū)域。

1. 頭部區(qū)域

頭部區(qū)域位于整個(gè)網(wǎng)頁(yè)的頂部，一般用于設(shè)置網(wǎng)頁(yè)的標(biāo)題或者網(wǎng)頁(yè)的 logo：

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 項(xiàng)目(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>頭部區(qū)域</h1>
</div>


</body>
</html>

2. 菜單導(dǎo)航區(qū)域

菜單導(dǎo)航條包含了一些鏈接，可以引導(dǎo)用戶瀏覽其他頁(yè)面：

例

/* 導(dǎo)航條 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 導(dǎo)航鏈接 */
.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;
}

3. 內(nèi)容區(qū)域

內(nèi)容區(qū)域一般有三種形式:

1 列：一般用于移動(dòng)端。
2 列：一般用于平板設(shè)備。
3 列：一般用于 PC 桌面設(shè)備。

不相等的列

不相等的列一般是在中間部分設(shè)置內(nèi)容區(qū)域，這塊也是最大最主要的，左右兩次側(cè)可以作為一些導(dǎo)航等相關(guān)內(nèi)容，這三列加起來(lái)的寬度是 100％。

例：

.column {
  float: left;
}
 
/* 左右側(cè)欄的寬度 */
.column.side {
  width: 25%;
}
 
/* 中間列寬度 */
.column.middle {
  width: 50%;
}
 
/* 響應(yīng)式布局 - 寬度小于600px時(shí)設(shè)置上下布局 */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

4. 底部區(qū)域

底部區(qū)域在網(wǎng)頁(yè)的最下方，一般包含版權(quán)信息和聯(lián)系方式等。

例

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

二、響應(yīng)式網(wǎng)頁(yè)布局

通過(guò)以上等學(xué)習(xí)我們來(lái)創(chuàng)建一個(gè)響應(yīng)式等頁(yè)面，頁(yè)面的布局會(huì)根據(jù)屏幕的大小來(lái)調(diào)整：

案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>項(xiàng)目</title>
<style>
* {
  box-sizing: border-box;
}
 
body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
 
/* 頭部標(biāo)題 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}
 
.header h1 {
  font-size: 50px;
}
 
/* 導(dǎo)航條 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 導(dǎo)航條鏈接 */
.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;
}
 
/* 創(chuàng)建兩列 */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}
 
/* 右側(cè)欄 */
.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;
}
 
/* 列后面清除浮動(dòng) */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
 
/* 響應(yīng)式布局 - 屏幕尺寸小于 800px 時(shí)，兩列布局改為上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 響應(yīng)式布局 -屏幕尺寸小于 400px 時(shí)，導(dǎo)航等布局改為上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>


<div class="header">
  <h1>我的網(wǎng)頁(yè)</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>文章標(biāo)題</h2>
      <h5>xx 年xx月 xx日</h5>
      <div class="fakeimg" style="height:200px;"><img src="img/bird.png"></div>
      <p>文本...</p>
      <p>當(dāng)熱誠(chéng)變成習(xí)慣，恐懼和憂慮即無(wú)處容身。缺乏熱誠(chéng)的人也沒(méi)有明確的目標(biāo)。熱誠(chéng)使想象的輪子轉(zhuǎn)動(dòng)。一個(gè)人缺乏熱誠(chéng)就象汽車沒(méi)有汽油。
      善于安排玩樂(lè)和工作，兩者保持熱誠(chéng)，就是最快樂(lè)的人。熱誠(chéng)使平凡的話題變得生動(dòng)。！</p>
    </div>
    <div class="card">
      <h2>文章標(biāo)題</h2>
      <h5>xx 年 xx 月xx日</h5>
      <div class="fakeimg" style="height:200px;"><img src="img/border.png"></div>
      <p>文本...</p>
      <p>一切事無(wú)法追求完美，唯有追求盡力而為。這樣心無(wú)壓力，出來(lái)的結(jié)果反而會(huì)更好！</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>關(guān)于我</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>關(guān)注我</h3>
      <p>本站發(fā)布的系統(tǒng)與軟件僅為個(gè)人學(xué)習(xí)測(cè)試使用，請(qǐng)?jiān)谙螺d后24小時(shí)內(nèi)刪除，
      不得用于任何商業(yè)用途，否則后果自負(fù)，請(qǐng)支持購(gòu)買正版軟件！如侵犯到您的權(quán)益,請(qǐng)及時(shí)通知我們,我們會(huì)及時(shí)處理。


聲明：為非贏利性網(wǎng)站 不接受任何贊助和廣告。</p>
    </div>
  </div>
</div>


<div class="footer">
  <h2>底部區(qū)域</h2>
</div>


</body>
</html>

三、總結(jié)

本文主要介紹了Html的網(wǎng)頁(yè)布局結(jié)構(gòu)，如何去了解網(wǎng)絡(luò)的布局，介紹了常見(jiàn)的移動(dòng)設(shè)備的三種網(wǎng)頁(yè)模式，最后通過(guò)一個(gè)小項(xiàng)目，總結(jié)之前講解的內(nèi)容。

代碼很簡(jiǎn)單，希望可以幫助你學(xué)習(xí)。

頁(yè)布局對(duì)改善網(wǎng)站的外觀非常重要。

請(qǐng)慎重設(shè)計(jì)您的網(wǎng)頁(yè)布局。

實(shí)例

使用 <div> 元素的網(wǎng)頁(yè)布局

[demo]

<!DOCTYPE html>

<html>

<head>

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>

<h1>Main Title of Web Page</h1>

</div>

<ul>

<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> 元素的網(wǎng)頁(yè)布局

[demo]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

<h1>Main Title of Web Page</h1>

</td>

</tr>

HTML<br />

CSS<br />

JavaScript

</td>

Content goes here</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

[/demo]

如何使用 <table> 元素添加布局。

網(wǎng)站布局

大多數(shù)網(wǎng)站會(huì)把內(nèi)容安排到多個(gè)列中（就像雜志或報(bào)紙那樣）。

可以使用 <div> 或者 <table> 元素來(lái)創(chuàng)建多列。CSS 用于對(duì)元素進(jìn)行定位，或者為頁(yè)面創(chuàng)建背景以及色彩豐富的外觀。

提示：即使可以使用 HTML 表格來(lái)創(chuàng)建漂亮的布局，但設(shè)計(jì)表格的目的是呈現(xiàn)表格化數(shù)據(jù) - 表格不是布局工具！

HTML 布局 - 使用 <div> 元素

div 元素是用于分組 HTML 元素的塊級(jí)元素。

下面的例子使用五個(gè) div 元素來(lái)創(chuàng)建多列布局：

實(shí)例

[demo]

<!DOCTYPE html>

<html>

<head>

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>

<h1>Main Title of Web Page</h1>

</div>

<ul>

<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 代碼會(huì)產(chǎn)生如下結(jié)果：

使用 div 和 CSS 進(jìn)行布局

HTML 布局 - 使用表格

使用 HTML <table> 標(biāo)簽是創(chuàng)建布局的一種簡(jiǎn)單的方式。

可以使用 <div> 或者 <table> 元素來(lái)創(chuàng)建多列。CSS 用于對(duì)元素進(jìn)行定位，或者為頁(yè)面創(chuàng)建背景以及色彩豐富的外觀。

提示：即使可以使用 HTML 表格來(lái)創(chuàng)建漂亮的布局，但設(shè)計(jì)表格的目的是呈現(xiàn)表格化數(shù)據(jù) - 表格不是布局工具！

下面的例子使用三行兩列的表格 - 第一和最后一行使用 colspan 屬性來(lái)橫跨兩列：

實(shí)例

[demo]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

<h1>Main Title of Web Page</h1>

</td>

</tr>

HTML<br />

CSS<br />

JavaScript

</td>

Content goes here</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

[/demo]

上面的 HTML 代碼會(huì)產(chǎn)生以下結(jié)果：

使用表格進(jìn)行布局

HTML 布局 - 有用的提示

提示：使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那么站點(diǎn)會(huì)更易于維護(hù)。通過(guò)編輯單一的文件，就可以改變所有頁(yè)面的布局。如需學(xué)習(xí)更多有關(guān) CSS 的知識(shí)，請(qǐng)?jiān)L問(wèn)我們的 CSS 教程。

提示：由于創(chuàng)建高級(jí)的布局非常耗時(shí)，使用模板是一個(gè)快速的選項(xiàng)。通過(guò)搜索引擎可以找到很多免費(fèi)的網(wǎng)站模板（您可以使用這些預(yù)先構(gòu)建好的網(wǎng)站布局，并優(yōu)化它們）。

HTML 布局標(biāo)簽

標(biāo)簽描述

<div> 定義文檔中的分區(qū)或節(jié)（division/section）。

<span> 定義 span，用來(lái)組合文檔中的行內(nèi)元素。

通過(guò)使用框架，你可以在同一個(gè)瀏覽器窗口中顯示不止一個(gè)頁(yè)面。

實(shí)例

垂直框架

[demo]

<html>

</frameset>

</html>

[/demo]

本例演示：如何使用三份不同的文檔制作一個(gè)垂直框架。

水平框架

[demo]

<html>

</frameset>

</html>

[/demo]

本例演示：如何使用三份不同的文檔制作一個(gè)水平框架。

框架

通過(guò)使用框架，你可以在同一個(gè)瀏覽器窗口中顯示不止一個(gè)頁(yè)面。每份HTML文檔稱為一個(gè)框架，并且每個(gè)框架都獨(dú)立于其他的框架。

使用框架的壞處：

開(kāi)發(fā)人員必須同時(shí)跟蹤更多的HTML文檔

很難打印整張頁(yè)面

框架結(jié)構(gòu)標(biāo)簽（<frameset>）

框架結(jié)構(gòu)標(biāo)簽（<frameset>）定義如何將窗口分割為框架

每個(gè) frameset 定義了一系列行或列

rows/columns 的值規(guī)定了每行或每列占據(jù)屏幕的面積

編者注：frameset 標(biāo)簽也被某些文章和書(shū)籍譯為框架集。

框架標(biāo)簽（Frame）

Frame 標(biāo)簽定義了放置在每個(gè)框架中的 HTML 文檔。

在下面的這個(gè)例子中，我們?cè)O(shè)置了一個(gè)兩列的框架集。第一列被設(shè)置為占據(jù)瀏覽器窗口的 25%。第二列被設(shè)置為占據(jù)瀏覽器窗口的 75%。HTML 文檔 "frame_a.htm" 被置于第一個(gè)列中，而 HTML 文檔 "frame_b.htm" 被置于第二個(gè)列中：

</frameset>

基本的注意事項(xiàng) - 有用的提示：

假如一個(gè)框架有可見(jiàn)邊框，用戶可以拖動(dòng)邊框來(lái)改變它的大小。為了避免這種情況發(fā)生，可以在 <frame> 標(biāo)簽中加入：noresize="noresize"。

為不支持框架的瀏覽器添加 <noframes> 標(biāo)簽。

重要提示：不能將 <body></body> 標(biāo)簽與 <frameset></frameset> 標(biāo)簽同時(shí)使用！不過(guò)，假如你添加包含一段文本的 <noframes> 標(biāo)簽，就必須將這段文字嵌套于 <body></body> 標(biāo)簽內(nèi)。（在下面的第一個(gè)實(shí)例中，可以查看它是如何實(shí)現(xiàn)的。）

更多實(shí)例

如何使用 <noframes> 標(biāo)簽

[demo]

<html>

<body>您的瀏覽器無(wú)法處理框架！</body>

</noframes>

</frameset>

</html>

[/demo]

本例演示：如何使用 <noframes> 標(biāo)簽。

混合框架結(jié)構(gòu)

[demo]

<html>

</frameset>

</html>

[/demo]

本例演示如何制作含有三份文檔的框架結(jié)構(gòu)，同時(shí)將他們混合置于行和列之中。

含有 noresize="noresize" 屬性的框架結(jié)構(gòu)

[demo]

<html>

</frameset>

</html>

[/demo]

本例演示 noresize 屬性。在本例中，框架是不可調(diào)整尺寸的。在框架間的邊框上拖動(dòng)鼠標(biāo)，你會(huì)發(fā)現(xiàn)邊框是無(wú)法移動(dòng)的。

導(dǎo)航框架

[demo]

<html>

</frameset>

</html>

[/demo]

本例演示如何制作導(dǎo)航框架。導(dǎo)航框架包含一個(gè)將第二個(gè)框架作為目標(biāo)的鏈接列表。名為 "contents.htm" 的文件包含三個(gè)鏈接。

內(nèi)聯(lián)框架

[demo]

<html>

<head>

</head>

<body>

<p>一些老的瀏覽器不支持 iframe。</p>

<p>如果得不到支持，iframe 是不可見(jiàn)的。</p>

</body>

</html>

[/demo]

本例演示如何創(chuàng)建內(nèi)聯(lián)框架（HTML 頁(yè)中的框架）。

跳轉(zhuǎn)至框架內(nèi)的一個(gè)指定的節(jié)

[demo]

<html>

</frameset>

</html>

[/demo]

本例演示兩個(gè)框架。其中的一個(gè)框架設(shè)置了指向另一個(gè)文件內(nèi)指定的節(jié)的鏈接。這個(gè)"link.htm"文件內(nèi)指定的節(jié)使用 <a name="C10"> 進(jìn)行標(biāo)識(shí)。

使用框架導(dǎo)航跳轉(zhuǎn)至指定的節(jié)

[demo]

<html>

</frameset>

</html>

[/demo]

本例演示兩個(gè)框架。左側(cè)的導(dǎo)航框架包含了一個(gè)鏈接列表，這些鏈接將第二個(gè)框架作為目標(biāo)。第二個(gè)框架顯示被鏈接的文檔。導(dǎo)航框架其中的鏈接指向目標(biāo)文件中指定的節(jié)。

言

網(wǎng)站的布局是一個(gè)網(wǎng)站設(shè)計(jì)的根本，CSS的Grid布局已經(jīng)成為了未來(lái)網(wǎng)站布局的基本方式。

今天這篇文章我們通過(guò)圖文，一起看看如何自己實(shí)現(xiàn)Grid布局方式。

CSS

第一個(gè)Grid布局

首先我們看看最基本的Grid布局是什么樣的，HTML頁(yè)面的代碼如下所示。

HTML代碼

然后設(shè)置其CSS屬性，這里主要展示容器的CSS屬性，給子元素添加的color屬性就不在這里展示了。

CSS屬性

在頁(yè)面上看到的效果如下，目前因?yàn)闆](méi)有對(duì)子div元素做任何設(shè)置，會(huì)自動(dòng)將子div沿垂直方向排列。

頁(yè)面效果

設(shè)置行和列

為了讓外層的div(wrapper)為一個(gè)網(wǎng)格容器，需要設(shè)置其行數(shù)和列數(shù)，就像一個(gè)表格一樣。

此時(shí)就需要用到grid-template-columns和grid-template-rows兩個(gè)屬性值。

grid-template-columns

用于設(shè)置網(wǎng)格容器的列屬性，其實(shí)就相當(dāng)于列的寬度。當(dāng)我們需要幾列展示時(shí)，就設(shè)置幾個(gè)值，這個(gè)屬性可以接收具體數(shù)值比如100px，也可以接收百分比值，表示占據(jù)容器的寬度。

需要注意的是：當(dāng)給容器設(shè)定了寬度時(shí)，grid-template-columns設(shè)定的百分比值是以容器的寬度值為基礎(chǔ)計(jì)算的。如果未設(shè)置寬度時(shí)，會(huì)一直向上追溯到設(shè)置了寬度的父容器，直到body元素。

比如我們?cè)O(shè)置了以下的CSS屬性。

CSS屬性

可以看出三列寬度加起來(lái)的百分比值為120%，而且wrapper容器并未設(shè)置寬度，會(huì)一直向上追溯到body元素，這樣三列的總寬度已經(jīng)超過(guò)了body的寬度，因此會(huì)出現(xiàn)滾動(dòng)條。

頁(yè)面效果

grid-template-rows

用于設(shè)置網(wǎng)格容器的行屬性，其實(shí)就相當(dāng)于行的高度，其特性與grid-template-columns屬性類似。

下面簡(jiǎn)單修改grid-template-columns和grid-template-rows兩個(gè)屬性的值。

CSS值

得到的效果圖如下所示。

效果圖

放置子元素

接下來(lái)我們看看別的情況，通過(guò)CSS屬性設(shè)置3*3的網(wǎng)格。

CSS屬性

在頁(yè)面上的呈現(xiàn)方式如下所示。

頁(yè)面呈現(xiàn)

從頁(yè)面上看我們看不出有什么問(wèn)題，但是打開(kāi)控制臺(tái)后可以發(fā)現(xiàn)，這個(gè)網(wǎng)格已經(jīng)占據(jù)了3*3的空間。它后面的元素只能排列在所有的網(wǎng)格后面。

頁(yè)面實(shí)際情況

不規(guī)則排列

當(dāng)我們需要得到特殊的排列方式，比如占滿整行，占滿整列，二三行合并等等。

這就需要用到grid-column和grid-row屬性，表示行網(wǎng)線和列網(wǎng)線的序號(hào)。通過(guò)設(shè)置start和end值，來(lái)進(jìn)行網(wǎng)格的合并。

網(wǎng)線序號(hào)

我們重新給wrapper容器內(nèi)部的div添加class類。

HTML代碼

然后添加以下的CSS代碼，給不同的網(wǎng)格特定的行號(hào)和列號(hào)。

CSS代碼

最終得到的效果圖如下所示。

頁(yè)面效果圖

結(jié)束語(yǔ)

今天這篇文章介紹了CSS中Grid布局的基礎(chǔ)知識(shí)，應(yīng)該可以很快掌握，其他的復(fù)雜點(diǎn)的網(wǎng)格布局大家也可以自己去嘗試。

在線咨詢

上一篇：H5網(wǎng)頁(yè)布局+css代碼美化，零基礎(chǔ)參考
下一篇：終于，JavaScript也有了類（class）的概念

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

一篇文章帶你了解HTML的網(wǎng)頁(yè)布局結(jié)構(gòu)

家好，我是IT共享者，人稱皮皮。這篇我們來(lái)講講CSS網(wǎng)頁(yè)布局。

一、網(wǎng)頁(yè)布局

1. 頭部區(qū)域

2. 菜單導(dǎo)航區(qū)域

3. 內(nèi)容區(qū)域

不相等的列

4. 底部區(qū)域

二、響應(yīng)式網(wǎng)頁(yè)布局

案例

三、總結(jié)

言

第一個(gè)Grid布局

設(shè)置行和列

放置子元素

不規(guī)則排列

結(jié)束語(yǔ)

您的項(xiàng)目需求