如何通過css格子布局一個簡單的頁面

文鏈接： https://getflywheel.com/layout/css-grid-layouts-how-to/

柵格布局的思想起源源自于印刷設計。柵格是用來將設計元素精確定位到頁面上的的測量工具。這種想法經(jīng)常被用在網(wǎng)頁上來進行內(nèi)容組織和統(tǒng)一，提升用戶的視覺體驗。

網(wǎng)頁設計剛起步的時候，設計和布局都是是相當簡單的，通常包含頭部，側(cè)邊欄，內(nèi)容區(qū)域和頁腳。現(xiàn)在，隨著網(wǎng)絡的演變，網(wǎng)頁的布局也變得更加復雜，做網(wǎng)頁設計師的人也隨之增加。我們經(jīng)常需要大量的內(nèi)容區(qū)域，響應式設計，多頁面模板設計，以及許多其他的。浮動和定位在實現(xiàn)這些設計的時候，是必不可少的。但浮動聽起來簡單，實際操作起來卻很棘手。

但接下來，我們會介紹一種簡單的設計布局。隨著CSS柵格布局的不斷發(fā)展，成為設計師也會變得越來越容易。

CSS柵格兼容性

作為一名設計師，需要了解網(wǎng)頁設計的未來。CSS柵格布局將改變現(xiàn)有規(guī)則，為設計師處理頭痛了許多年的定位。雖然目前還不是主流的做法，但是這是一件值得期待的事情。

在我們真的深入了解柵格布局之前，要強調(diào)的一件事，瀏覽器并不普遍支持，希望這種工作方式在未來可以得到越來越多的瀏覽器支持。不過，好消息是，您可以輕松地嘗試使用CSS柵格布局，以及了解它是如何工作的。

在使用示例之前，請你確保你的瀏覽器支持。目前只有Internet Explorer 10+和 edge 支持。其他的瀏覽器通過一些手段也可以瀏覽，但因為它不是官網(wǎng)支持，所以你只能是不斷的去嘗試。（If you view the Can I Use documentation on CSS Grid Layouts, at the time of this post, you will notice little flag indicators. These show that you will need to be in “flag mode.”）如果你邊使用Can I Use來查看柵格布局的兼容性，邊看這篇文章，那么你就可以注意到每個細節(jié)的不同。

當您在測試柵格布局的時候，你需要做幾件事情幫助你正確地看到布局。使用Chrome查看，你需要啟用“實驗性網(wǎng)絡平臺功能”。如何啟用呢？在Chrome 瀏覽器中打開chrome://flags 這個地址。當url 鏈接chrome://flags加載完畢之后，向下滾動頁面，找到該選項，設置為“啟用實驗性網(wǎng)絡平臺功能”。

火狐也允許您查看柵格布局，通過“l(fā)ayout.css.grid.enabled”參數(shù)設置。開啟方法類似于Chrome瀏覽器的說明。在Firefox瀏覽器中URL輸入 about:config。向下滾動頁面，設置為啟用 “l(fā)ayout.css.grid.enabled” 。

如果你想馬上開始使用CSS柵格布局，對于不支持它的瀏覽器還有一個變通方案。如果你熟悉polyfills的想法，那已經(jīng)有解決方案了。如果你不熟悉polyfills，可以利用瀏覽器后退，利用JavaScript的力量，允許現(xiàn)代的瀏覽器功能（例如CSS柵格布局）在舊的瀏覽器運行。

Polyfills超出本教程范圍，但隨著越來越多的設計師開始使用這項技術，更多的polyfill 技術將會涌現(xiàn)。如果你準備嘗試，這里是一個推薦的 polyfill option。請務必閱讀作者的文檔，了解有關如何使用它的詳細信息。

那么，在承諾100%使用CSS柵格布局之前，要確保使用的生產(chǎn)代碼，做一些深入的測試。

CSS柵格布局基本知識

通過利用CSS，柵格布局將有助于您的網(wǎng)頁內(nèi)容的呈現(xiàn)。這里有一篇相對較新的定義的屬性的CSS柵格布局規(guī)范。這是學習柵格設計的一個很好的資源。CSS柵格設計有助于簡化的東西，使創(chuàng)建布局更加容易。想象一下，柵格作為一種結(jié)構，尺寸可以被定義。

柵格的組成

行(lines)

在上圖中，有五條垂直線和三條水平線。線從1開始編號。示例中，垂直線從左至右，這取決于書寫方向。如果書寫方向是由右至左，順序就顛倒過來。可以給線起名（可選），方便在CSS中引用。

軌道(tracks)

軌道是兩條平行線之間的空間。在圖中，有四個垂直軌道和兩個水平的軌道。這是線和軌道的共同結(jié)果。線是記錄內(nèi)容的起點和終點。軌道是內(nèi)容真實存在的位置。

單元格(cells)

單元格是水平和垂直軌道的相交處。圖中有八個單元格。

面(areas)

單元格指定面的時候發(fā)揮作用。面是矩形形狀，可以跨越多個單元格。像線一樣，面也可以任意命名。如在圖中的幾個標簽：“A”，“B”，和“C”。

創(chuàng)建柵格布局

用老方格紙，布局之前，先勾勒輪廓。

HTML柵格

<div class="grid header">Header</div>

<div class="grid sidebar">Sidebar</div>

<div class="grid content">Main Content</div>

<div class="grid extra">Extra Content</div>

<div class="grid footer">Footer</div>

</div>

容器Container是非常重要的。容器內(nèi)是用于顯示網(wǎng)站的不同的內(nèi)容塊。內(nèi)容塊的順序并不重要。接下來，我們將使用CSS將它們按照我們的布局顯示。

CSS樣式

HTML完成后，我們來寫CSS。給container設置display:grid 或者 display:inline-grid. 如果你希望設置塊級元素，那使用 display:grid ; 如果你希望設置成內(nèi)聯(lián)元素，那使用display:inline-grid。想了解更多細節(jié)，可以查看文檔

.container {

display: grid;

grid-template-columns: 0.25fr 15px 0.75fr;

grid-template-rows: auto 25px auto 25px auto 25px auto;

}

.grid {

background-color: #444;

color: #fff;

padding: 25px;

font-size: 3rem;

}

grid-template-columns和grid-template-rows屬性用于指定行和列的寬度。這個布局定義了五列。15px是兩個元素之間的間距。第三列占用0.25份的剩余空間。同樣地，第五列占用0.75份的剩余空間。（疑問：圖中根本沒有第五列啊，感覺作者寫錯了）

There are responsive customizations that can be made, but this is a great step to take prior to that. It may seem like using pixel measurements would be limiting, however, using auto for the first row in grid-template-rows allows the row to expand as necessary based on the content inside it. The 25px row acts as a gutter.

對于響應式布局這個規(guī)范是很便利的，如果使用像素，則會被限定死。第一行使用grid-template-rows來表示，隨著內(nèi)容需要的變化而變化。設置padding 成 25 像素，與頭部留有間隙。

元素看起來很緊湊，但再加一些規(guī)范，元素將初具規(guī)模。

這個例子先放置的頭部，但元素位置可以按您喜歡的任意順序擺放。如果你想從頁腳開始，也可以。

我們先從頭部開始，從列1開始到列4結(jié)束，從行1開始到行2結(jié)束，CSS看起來就像這樣：

.header {

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 1;

grid-row-end: 2;

}

您可能會注意到側(cè)邊欄被壓住了，我們無法看到它。我們需要重新排列一下。在這種布局,通過行的位置進行排列。以行作為標準。頭部占一行和二行的位置，側(cè)邊欄，從三行開始，到六行結(jié)束。頭部到第二行結(jié)束，側(cè)邊欄從第三行開始正好可以顯示到頭部下面。要查看示例，請參見該項目Codepen。

我們使用grid-column-start指定一個元素起始垂直線。在本例中,它將被設置為3。grid-column-end表示一個元素的結(jié)束垂直線。在這種情況下,這個屬性就等于四。其他行值也用同樣的方式設置。側(cè)邊欄的位置是存在的,它只是覆蓋的內(nèi)容區(qū)。

.sidebar {

grid-column-start: 1;

grid-column-end: 2;

grid-row-start: 3;

grid-row-end: 6;

background: #a0c263;

}

主要內(nèi)容在第三列開始，第四列結(jié)束。側(cè)邊欄和內(nèi)容區(qū)域的頂部對齊，所以他們都從grid-row-start第三行開始。你可能想讓內(nèi)容欄比側(cè)邊欄高很多。通過設置容器上的高度，假如400像素，這個時候，它就會比其它元素高很多。

.content {

grid-column-start: 3;

grid-column-end: 4;

grid-row-start: 3;

grid-row-end: 4;

background: #f5c531;

height: 400px;

}

最后兩個內(nèi)容區(qū)域是額外內(nèi)容區(qū)域和頁腳。

.extra {

grid-column-start: 3;

grid-column-end: 4;

grid-row-start: 5;

grid-row-end: 6;

background: #898989;

}

.footer {

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 7;

grid-row-end: 8;

background: #FFA500;

}

響應式優(yōu)勢

布局已經(jīng)創(chuàng)建好了，似乎很像一個“桌面”。那么平板電腦和移動設備怎么顯示？CSS柵格布局加上媒體查詢可以適應不同的屏幕尺寸。真正酷的是，你可以在這些不同的媒體查詢范圍里，改變內(nèi)容區(qū)域。作為一個設計師，這意味著你選擇什么是最適合你的布局在不同的斷點。例如，如果你想要將“次要內(nèi)容”被放在“內(nèi)容”區(qū)域之上，可以指定正確的行和列。

/* For mobile phones: */

.header {

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 1;

grid-row-end: 2;

}

.extra {

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 3;

grid-row-end: 4;

}

.content {

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 5;

grid-row-end: 6;

background: #f5c531;

height: 400px;

}

通過設置成列1開始，列4結(jié)束，來設置成內(nèi)容全寬。將“次要內(nèi)容”顯示在了“內(nèi)容”之上。

CSS柵格布局是一種新型的布局方式。正如你所看到的，這種方法很容易創(chuàng)建一個簡單的頁面布局去運行。上面這個簡單的例子也可以為如何創(chuàng)建更復雜的布局打下良好的基礎。假如這個技術獲得普及，在設計各種設備和尺寸，布局大小自定義的時候，這個技術會是一個優(yōu)勢。

問切 wenqie（.cn），是切圖網(wǎng)旗下關注用戶體驗，專注H5移動適配的品牌網(wǎng)站。

HTML的世界里，一切都是由容器和內(nèi)容構成的。容器，就如同一個個盒子，用來裝載各種元素；而內(nèi)容，則是這些盒子里的珍寶。理解了這一點，我們就邁出了探索HTML布局的第一步。

在HTML中，布局標簽主要用于控制頁面的結(jié)構和樣式。本文將介紹一些常用的布局標簽及其使用方法，并通過代碼示例進行演示。

一、理解布局的重要性

布局在我們前端開發(fā)中擔任什么樣的角色呢？想象一下，你面前有一堆散亂的積木，無序地堆放在那里。

而你的任務，就是將這些積木按照圖紙拼裝成一個精美的模型。HTML布局標簽的作用就像那張圖紙，它指導瀏覽器如何正確、有序地顯示內(nèi)容和元素，確保網(wǎng)頁的結(jié)構和外觀既美觀又實用。

下面我們就來看看在HTML中常用的基礎布局標簽有哪些，如何使用這些布局標簽完成我們的開發(fā)目標。

二、常用的布局標簽

1、div標簽

div標簽是一個塊級元素，它獨占一行，用于對頁面進行區(qū)域劃分。它可以包含其他HTML元素，如文本、圖片、鏈接等。通過CSS樣式可以設置div的布局和樣式。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>
</head>
<body>

<div>這是一個div元素

</div>

</body>
</html>

運行結(jié)果：

2、span標簽

span標簽是一個內(nèi)聯(lián)元素，它不獨占一行，用于對文本進行區(qū)域劃分。它主要用于對文本進行樣式設置，如字體、顏色等。與div類似，span也可以包含其他HTML元素。
示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  .text {
    color: blue;
    font-size: 20px;
  }
</style>
</head>
<body>

<p>這是一個<span>span元素</span>。</p>

</body>
</html>

運行結(jié)果：

3、table標簽

table標簽用于創(chuàng)建表格，它包含多個tr（行）元素，每個tr元素包含多個td（單元格）或th（表頭單元格）元素。

<table> 定義一個表格，<tr> 定義表格中的行，而 <td> 則定義單元格。通過這三個標簽，我們可以創(chuàng)建出整齊劃一的數(shù)據(jù)表，讓信息的展示更加直觀明了。

需要注意的是：

<table>和</table>標記著表格的開始和結(jié)束。
<tr>和</tr>標記著行的開始和結(jié)束，幾組表示該表格有幾行。
<td>和</td>標記著單元格的開始和結(jié)束，表示這一行中有幾列。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  table, th, td {
    border: 1px solid black;
  }
</style>
</head>
<body>
<table>
  <tr>
    <th>姓名</th>
    <th>年齡</th>
  </tr>
  <tr>
    <td>張三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>
</body>
</html>

運行結(jié)果：

4、form標簽

<form>標簽的主要作用是定義一個用于用戶輸入的HTML表單。這個表單可以包含各種輸入元素，如文本字段、復選框、單選按鈕、提交按鈕等。

<form>元素可以包含以下一個或多個表單元素：<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>和<output>等。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  form {
    display: flex;
    flex-direction: column;
  }
</style>
</head>
<body>

<form>
  <label for="username">用戶名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密碼：</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="提交">
</form>

</body>
</html>

運行結(jié)果：

5、列表標簽

1）無序列表

指沒有順序的列表項目
始于<ul>標簽，每個列表項始于<li>
type屬性有三個選項：disc實心圓、circle空心圓、square小方塊。默認屬性是disc實心圓。

示例代碼：

<!DOCTYPE html>
<htmml>
<head>
<meta charst = "UTF-8">
<title>html--無序列表</title>
</head>
<body>
<ul>
<li>默認的無序列表</li>
<li>默認的無序列表</li>
<li>默認的無序列表</li>
</ul>
<ul>
<li type = "circle">添加circle屬性</li>
<li type = "circle">添加circle屬性</li>
<li type = "circle">添加circle屬性</li>
</ul>
<ul>
<li type = "square">添加square屬性</li>
<li type = "square">添加square屬性</li>
<li type = "squaare">添加square屬性</li>
</ul>
</body>
</html>

運行結(jié)果：

也可以使用CSS list-style-type屬性定義html無序列表樣式。

想要快速入門前端開發(fā)嗎？推薦一個前端開發(fā)基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結(jié)合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！「鏈接」

2）有序列表

指按照字母或數(shù)字等順序排列的列表項目。
其結(jié)果是帶有前后順序之分的編號,如果插入和刪除一個列表項，編號會自動調(diào)整。
始于<ol>標簽，每個列表項始于<li>。

示例代碼：

<ol>
<li>默認的有序列表</li>
<li>默認的有序列表</li>
<li>默認的有序列表</li>
</ol>
<ol type = "a" start = "2">
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
<li value ="20">第四項</li>
</ol>
<ol type = "Ⅰ" start = "2">
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
</ol>

運行結(jié)果：

同樣也可以使用CSS list-style-type屬性定義html有序列表樣式。

3）自定義列表

自定義列表不僅僅是一列項目，而是項目及其注釋的組合。
以<dl>標簽開始。每個自定義列表項以<dt>開始。每個自定義列表項的定義以<dd>開始。
用于對術語或名詞進行解釋和描述，自定義列表的列表項前沒有任何項目符號。
基本語法：

<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>

<dt>名詞2</dt>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
</dl>

<dl>即“definition list（定義列表）”，
<dt>即“definition term（定義名詞）”，
而<dd>即“definition description（定義描述）”。

示例代碼：

<dl>
<dt>計算機</dt>
<dd>用來計算的儀器</dd>

<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置</dd>
</dl>

運行結(jié)果：

以上就是HTML中常用的布局標簽及其使用方法。在實際開發(fā)中，還可以結(jié)合CSS和JavaScript來實現(xiàn)更復雜的布局和交互效果。

掌握了這些HTML常用布局標簽，你已經(jīng)擁有了構建網(wǎng)頁的基礎工具。記住，好的布局不僅需要技術，更需要創(chuàng)意和對細節(jié)的關注。現(xiàn)在，打開你的代碼編輯器，開始你的布局設計之旅吧！

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

一、網(wǎng)頁布局

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

1. 頭部區(qū)域

頭部區(qū)域位于整個網(wǎng)頁的頂部，一般用于設置網(wǎng)頁的標題或者網(wǎng)頁的 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>頭部區(qū)域</h1>
</div>


</body>
</html>

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

菜單導航條包含了一些鏈接，可以引導用戶瀏覽其他頁面：

例

/* 導航條 */
.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;
}

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

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

1 列：一般用于移動端。
2 列：一般用于平板設備。
3 列：一般用于 PC 桌面設備。

不相等的列

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

例：

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

4. 底部區(qū)域

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

例

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

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

通過以上等學習我們來創(chuàng)建一個響應式等頁面，頁面的布局會根據(jù)屏幕的大小來調(diào)整：

案例

<!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;
}
 
/* 創(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;
}
 
/* 列后面清除浮動 */
.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>我的網(wǎng)頁</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>當熱誠變成習慣，恐懼和憂慮即無處容身。缺乏熱誠的人也沒有明確的目標。熱誠使想象的輪子轉(zhuǎn)動。一個人缺乏熱誠就象汽車沒有汽油。
      善于安排玩樂和工作，兩者保持熱誠，就是最快樂的人。熱誠使平凡的話題變得生動。！</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>一切事無法追求完美，唯有追求盡力而為。這樣心無壓力，出來的結(jié)果反而會更好！</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>本站發(fā)布的系統(tǒng)與軟件僅為個人學習測試使用，請在下載后24小時內(nèi)刪除，
      不得用于任何商業(yè)用途，否則后果自負，請支持購買正版軟件！如侵犯到您的權益,請及時通知我們,我們會及時處理。


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


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


</body>
</html>

三、總結(jié)

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

代碼很簡單，希望可以幫助你學習。

在線咨詢

上一篇：到底什么HTML是語義標記？做前端開發(fā)為什么要學寫它
下一篇：肖sir_html之基本使用（1）

您的項目需求

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

整合營銷服務商

如何通過css格子布局一個簡單的頁面

一、理解布局的重要性

二、常用的布局標簽

1、div標簽

2、span標簽

3、table標簽

4、form標簽

5、列表標簽

1）無序列表

2）有序列表

3）自定義列表

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

一、網(wǎng)頁布局

1. 頭部區(qū)域

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

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

不相等的列

4. 底部區(qū)域

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

案例

三、總結(jié)

您的項目需求