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

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

一、網(wǎng)頁布局

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

1. 頭部區(qū)域

頭部區(qū)域位于整個網(wǎng)頁的頂部，一般用于設(shè)置網(wǎng)頁的標(biāo)題或者網(wǎng)頁的 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)用戶瀏覽其他頁面：

例

/* 導(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 列：一般用于移動端。
2 列：一般用于平板設(shè)備。
3 列：一般用于 PC 桌面設(shè)備。

不相等的列

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

例：

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

4. 底部區(qū)域

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

例

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

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

通過以上等學(xué)習(xí)我們來創(chuàng)建一個響應(yīng)式等頁面，頁面的布局會根據(jù)屏幕的大小來調(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;
}
 
/* 列后面清除浮動 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
 
/* 響應(yīng)式布局 - 屏幕尺寸小于 800px 時，兩列布局改為上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 響應(yīng)式布局 -屏幕尺寸小于 400px 時，導(dǎo)航等布局改為上下布局 */
@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>文章標(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)熱誠變成習(xí)慣，恐懼和憂慮即無處容身。缺乏熱誠的人也沒有明確的目標(biāo)。熱誠使想象的輪子轉(zhuǎn)動。一個人缺乏熱誠就象汽車沒有汽油。
      善于安排玩樂和工作，兩者保持熱誠，就是最快樂的人。熱誠使平凡的話題變得生動。！</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>一切事無法追求完美，唯有追求盡力而為。這樣心無壓力，出來的結(jié)果反而會更好！</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)與軟件僅為個人學(xué)習(xí)測試使用，請?jiān)谙螺d后24小時內(nèi)刪除，
      不得用于任何商業(yè)用途，否則后果自負(fù)，請支持購買正版軟件！如侵犯到您的權(quán)益,請及時通知我們,我們會及時處理。


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


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


</body>
</html>

三、總結(jié)

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

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

本例參考了網(wǎng)上的例子，唯一不一樣的是，我這里的操作是一步一步講解，網(wǎng)上僅是源碼。

一、我們先創(chuàng)建一張空白的網(wǎng)頁，網(wǎng)頁要自適應(yīng)手機(jī)。

圖1

二、我們再創(chuàng)建網(wǎng)頁的頭部。

圖2

圖3

三、做出來的網(wǎng)頁頭部太丑了，我們要去掉盒子與瀏覽器的間隙，還有給頭部加內(nèi)部距離。

圖4

圖5

四、給網(wǎng)頁頭部添加一些內(nèi)容。

圖6

圖7

五、接下來開始做導(dǎo)航條了。

圖8

圖9

六、發(fā)現(xiàn)沒，導(dǎo)航條居然看不見，沒有東西在里面自然是看不見的，我們加三個鏈接吧。

圖10

圖11

七、這回是看見了，不過樣式太丑，我們改改樣式。

圖12

圖13

八、加上內(nèi)部距離，就好看了許多，即然是鏈接，我們加點(diǎn)動態(tài)吧，當(dāng)鼠標(biāo)在鏈接上面時，鏈接塊變色。

圖14

圖15

九、開始做網(wǎng)頁內(nèi)容，網(wǎng)頁內(nèi)容我分為三塊，左右兩邊是側(cè)欄，中間是主要內(nèi)容。

圖16

圖17

十、我想讓它橫著排，它卻是豎著排，改改各個塊的樣式。

圖18

圖19

十一、給主體的各個塊加點(diǎn)內(nèi)容。

圖20

圖21

十二、內(nèi)容是有了，但你會發(fā)現(xiàn)各塊之間沒有間隙，貼得太近了，我們改一下樣式，加個內(nèi)部距離。

圖22

圖23

十三、距離是有了，但有一個側(cè)欄跑到了另一行，怎么回事？原來padding是會改變盒子的整體寬度，我們原本是100%，現(xiàn)在多了padding的寬度，自然就換行了，解決一下吧。

圖24

圖25

十四、這回終于在一行了，接下來可以做網(wǎng)頁底部了。

圖26

圖27

十五、改改樣式，讓底部好看一點(diǎn)。

圖28

圖29

十六，這個時候，網(wǎng)頁的整體版面就完成了，再補(bǔ)充一個小內(nèi)容，讓網(wǎng)頁瀏覽器在小于600像素寬的時候，主體內(nèi)容的三個塊由橫變豎。

圖30

圖31

文作為小白入門級，相對基礎(chǔ)，是寫給現(xiàn)在想了解一點(diǎn)前端知識的設(shè)計(jì)師同行們，力求通俗易懂幽默風(fēng)趣。這一章不僅教大家網(wǎng)頁排版的基礎(chǔ)知識，還以百度藝術(shù)百科的網(wǎng)頁為例，帶大家簡單做一遍，學(xué)得會更快，來收！

閱讀須知：

工具不重要，工具不重要，工具不重要……OK？有人說DW早就淘汰了，我造啊，然后呢？我還打算用小紅本（editPlus）講呢，哈哈哈哈……
希望乃們接受我這種循序漸進(jìn)的過程。做算術(shù)題你會知道“乘法”和“設(shè)未知數(shù)”來得更快，但是也得從簡單“加減法”過渡。如果有疑問請留言或私信，下篇會著重講。
所有內(nèi)容基于自己的理解和編碼習(xí)慣，并非標(biāo)準(zhǔn)。

好了，進(jìn)入正題。排版之前先來做點(diǎn)準(zhǔn)備工作。

一、嵌入、內(nèi)聯(lián)樣式

1. CSS 嵌入

其實(shí)程序員是一幫蠻會偷懶的家伙你信么？^_^ 在碼字過程中，如果遇到常用的一段代碼，就會想辦法打包起來，需要的時候一行代碼或幾行代碼就可以調(diào)出來用而不用重復(fù)寫，系不系很機(jī)智。讓我想起來我們常用的那些PS動作們，不就是同樣的原理嗎？

來吧，排幾個寬高各100px的div試試，如果你現(xiàn)在還不能默寫的話，建議多練習(xí)幾遍。

如上圖：代碼如下

（偶的dw過期啦，臨時換了一個。其實(shí)也沒多大區(qū)別啦，是吧？這是以前一個同事介紹的Webstorm，現(xiàn)在他又不知道換了啥。-_- …乃們繼續(xù)用DW敲吧，我會隨時用回DW的，頭部那些東西不要為了和我的一樣而亂改哈。）

像這種直接放在div標(biāo)簽內(nèi)style里的樣式稱為嵌入樣式。只服務(wù)于它嵌入的那個標(biāo)簽，而對其他標(biāo)簽的樣式不會產(chǎn)生影響。

但是，每個div都要寫辣么長，明明有些屬性大家都一樣的，還要重復(fù)寫好煩啊……所以接下來介紹一下簡便的寫法。

2. 內(nèi)聯(lián)樣式

第一步：提“公因式”

下面這個你們還記得吧？我雖然讀書少，但我還記得，哈哈……提取公因式的原理即使把a(bǔ)、c共同擁有的公因式b提取出來……所得結(jié)果一樣。

同樣方法把前面代碼中style里共同擁有的一句提取出來得到：width:100px; height:100px; float:left; 不同的樣式保留。

則最后style中就只剩下了顏色值,是不是很短了？而且大部分時間是不用每個div都附上顏色的，我們今天只是拿帶顏色的矩形來模擬一下，所以真正應(yīng)用時僅存的顏色那一句都會被刪掉。

但是提取出來的公共樣式又要放到哪里呢？

介紹一個新名詞：class（這個也是很重要的哦）

class直譯為級、階級、種類等，也就是相同的東西歸為一類放在一起；我們把提取出來的公共樣式放在class里，在頭部（即head標(biāo)簽內(nèi)）新建一個style盒子（標(biāo)簽），裝入盒子，如下：

注：1）其寫法不變，依然是”屬性名:屬性值;”,但是外包裝從style:” ” 換成了 class{ }; 由于脫離出來的class沒有盒子可裝，所以html出現(xiàn)了這個專門裝樣式類的<style></style>標(biāo)簽盒子。

2）請注意：class前面還有一個小點(diǎn) “ . ”。這個點(diǎn)是class的唯一標(biāo)識，瀏覽器讀取到“.className”，才知道這個東西是類名。否則你就是個單詞而已，再讀下去就是一些括號，單詞，瀏覽器就懵了，說好的點(diǎn)呢？怎么不按套路出牌。

初學(xué)時類名可以隨意一點(diǎn)，你寫成 .a、.b、.apple、xiaoming1……都沒事，小寫就行了，但不能是中文及以數(shù)字開頭，也盡量不要與標(biāo)簽名一樣。后面會專門講到命名這一塊。

第二步：引用

公共樣式提出來了，也用盒子裝好了，但是他們之間還沒有搭上關(guān)系，這就需要在div內(nèi)引用一下寫好的類：

所有你想用的div都可以引用那個類，引用的方式是在開始標(biāo)簽后面加上：class=”className”（這里是不需要有“.”的，但注意不要寫錯哦）。保存刷新一下：

是不是和前面那種寫法得到的效果一樣？像這種頭部style標(biāo)簽中能夠被其他標(biāo)簽通過類名來引用的樣式，稱為：內(nèi)聯(lián)樣式。

它的作用域就大些了，但是也僅限于當(dāng)前html文件中，只要引用了便能對引用的標(biāo)簽樣式產(chǎn)生影響，可復(fù)用的。常規(guī)做法有時候會加上一句“type=text/css”即為：<style type=text/css></style>，但是我一般會省略，發(fā)現(xiàn)也木有啥影響，加了應(yīng)該是比較規(guī)范吧。

class 屬性不能在以下 HTML 元素中使用：base, head, html, meta, param, s cript, style 以及 title。

小練習(xí)：

寫兩個不同內(nèi)容的類，分別引用于兩個或更多div。

寫到這里發(fā)現(xiàn)樣式真的好多要講的啊，下篇專門講吧，今天先講一點(diǎn)……

二、用矩形模擬網(wǎng)頁布局

請看大屏幕：（截圖于百度藝術(shù)百科的網(wǎng)頁）

這個是相對比較傳統(tǒng)的排版方式，雖然中規(guī)中矩，形式卻蠻多的。文字、圖片、標(biāo)簽、視頻播放……比較適合排版練習(xí)。

web端網(wǎng)頁最大的優(yōu)勢在于，設(shè)計(jì)稿什么樣，開發(fā)就能做成什么樣，因?yàn)椴挥孟褚苿佣丝紤]那么多適配問題（想想以前的寫手機(jī)端黑歷史，托腮仰天，老淚縱橫……T_T）。我給周圍轉(zhuǎn)web前端的朋友的建議都是，先把PC的布局搞定再去寫移動設(shè)備端的會輕松一點(diǎn)。

1. 審“題”

拿到設(shè)計(jì)需求就立馬打開PS做東西的事情，反正我是不干的，一般會事倍功半。同樣，拿到網(wǎng)頁設(shè)計(jì)稿也請不要立馬開始碼字，我們需要審題。

告訴我你看上面那張圖片看到了幾塊吧？以前畫素描的時候，老師是不是告訴過你要瞇著眼睛看光影關(guān)系，因?yàn)槿巳菀妆灰恍┘?xì)節(jié)所影響，所以先鋪大面，再摳細(xì)節(jié)，一張合格的素描才能被很好的完成。同樣，一個網(wǎng)頁，無論內(nèi)容再多，分布也是從大到小慢慢摳出來的。

好吧，說多了暈，來看看我的分法吧，這種思路可能跟你在設(shè)計(jì)時考慮怎么放東西有點(diǎn)相仿：

首先，頭部的tab和下方為一塊，分好之后下面的分成兩塊，再然后……

其實(shí)前端工程師差不多是這樣的思路，從上到下，從左到右寫。有的會把其中一個部分寫好再去寫下一個，有的會一次性寫幾個大塊，后面再補(bǔ)。要不是特殊原因，你的設(shè)計(jì)稿要是不對齊,你就等著他來質(zhì)問你吧，或者他默認(rèn)就給你寫對齊了。

類似C3那里的藝術(shù)家模塊，工程師最稀飯了，哈哈哈……寫一段，然后ctrl C ctrl V，ctrl V，ctrl V……

廢話不多說，跟著來吧……

我們按照有效區(qū)域1180px來寫，尺寸的話，自己去網(wǎng)站截來量 http://baike.baidu.com/art 。

現(xiàn)在去看的話是沒有內(nèi)容的，從上到小先把A1排出來

好，現(xiàn)在的結(jié)構(gòu)已經(jīng)不是單獨(dú)的平行結(jié)構(gòu)了。第一個div有了自己的孩子（注意換行縮格，這樣層級關(guān)系較明顯一些）即裝文字的五個div（也可用其他標(biāo)簽裝，例如：a、p、span……）。為什么稱之為孩子，因?yàn)樵趆tml中有子標(biāo)簽及父標(biāo)簽一說。有時候子標(biāo)簽會繼承父標(biāo)簽的樣式，但大多是標(biāo)簽所含的內(nèi)容，而不是標(biāo)簽本身，即如果給“title_tab”添加針對文本的樣式，那么子標(biāo)簽內(nèi)的文本也即將改變，除非子標(biāo)簽擁有自己的針對文本的樣式，然而不是所有時候都能成功繼承（誒……越講越多）。

其代碼如下：

紅色部分解析：

（title的樣式那樣寫方便看，你們也可以這樣寫，只不過多了就顯得篇幅較長。）

1）樣式提供多種書寫方式，不僅僅只有.className,可以帶標(biāo)簽名 p{}、div{}……帶標(biāo)簽名則不用前面加點(diǎn)，不過是針對當(dāng)前html文件中所有p標(biāo)簽和div標(biāo)簽，所以你知道我為什么說類名盡量不要使用跟標(biāo)簽名一樣的了吧？要是忘記寫點(diǎn)了，那畫面，簡直不敢想象。像文中“ *{ } ”的*號則代表所有，margin是間距屬性，每個瀏覽器的默認(rèn)里面，margin是有值的，所以需要進(jìn)行一些設(shè)置。如下圖：

2）padding是內(nèi)邊距，margin為外邊距；

當(dāng)他們只有一個值時（例：padding:10px;margin：10px；），則默認(rèn)為上下左右都為10px

當(dāng)有兩個值時（例：padding:10px 20px;），其代表的是上下10px，左右20px;

當(dāng)有四個值時（例：padding：1px 5px 3px 6px;）,則分別針對：上右下左，即順時針方向的值，注意，不是上下左右哦。

最后，也可單獨(dú)針對一邊設(shè)置，例：padding-left:10px; margin-top:20px;

color設(shè)置字體顏色;font-size——字體大小;font-weight——字體粗細(xì)（bold、100、200、300……最大也就八九百的樣子，不帶單位）；font-family:”微軟雅黑”; ……

至于float的屬性，請參照上一篇；

有很多屬性，可以自己去w3cschool慢慢找來試一試。

好了，今天就講到這里了，你們看我寫的代碼都有點(diǎn)不一樣，就說明不是一天寫的啦，時間真是不夠用呢。

請私信我回復(fù)“666”，為U妹打Call~，還有更多驚喜哦~

.............................................................

UI妹兒—越努力，越幸運(yùn)

在線咨詢

上一篇：HTML面試題
下一篇：想學(xué) HTML，不知從何入手？看完這篇文章你就知道了

您的項(xiàng)目需求

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

整合營銷服務(wù)商