HTML 布局

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

請慎重設計您的網(wǎng)頁布局。

在線實例

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

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

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

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

網(wǎng)站布局

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

大多數(shù)網(wǎng)站可以使用 <div> 或者 <table> 元素來創(chuàng)建多列。CSS 用于對元素進行定位，或者為頁面創(chuàng)建背景以及色彩豐富的外觀。

	雖然我們可以使用HTML table標簽來設計出漂亮的布局，但是table標簽是不建議作為布局工具使用的 - 表格不是布局工具。

HTML 布局 - 使用<div> 元素

div 元素是用于分組 HTML 元素的塊級元素。

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

實例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><divid="container"style="width:500px"><divid="header"style="background-color:#FFA500;"><h1style="margin-bottom:0;">主要的網(wǎng)頁標題</h1></div><divid="menu"style="background-color:#FFD700;height:200px;width:100px;float:left;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</div><divid="content"style="background-color:#EEEEEE;height:200px;width:400px;float:left;">內(nèi)容在這里</div><divid="footer"style="background-color:#FFA500;clear:both;text-align:center;">版權 ? runoob.com</div></div></body></html>

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

HTML 布局 - 使用表格

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

大多數(shù)站點可以使用 <div> 或者 <table> 元素來創(chuàng)建多列。CSS 用于對元素進行定位，或者為頁面創(chuàng)建背景以及色彩豐富的外觀。

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

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

實例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><tablewidth="500"border="0"><tr><tdcolspan="2"style="background-color:#FFA500;"><h1>主要的網(wǎng)頁標題</h1></td></tr><tr><tdstyle="background-color:#FFD700;width:100px;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</td><tdstyle="background-color:#eeeeee;height:200px;width:400px;">內(nèi)容在這里</td></tr><tr><tdcolspan="2"style="background-color:#FFA500;text-align:center;">版權 ? runoob.com</td></tr></table></body></html>

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

HTML 布局 - 有用的提示

Tip: 使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那么站點會更易于維護。通過編輯單一的文件，就可以改變所有頁面的布局。如需學習更多有關 CSS 的知識，請訪問我們的CSS 教程。

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

HTML 布局標簽

標簽	描述
<div>	定義文檔區(qū)塊，塊級(block-level)
<span>	定義 span，用來組合文檔中的行內(nèi)元素。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

果想開發(fā)一個網(wǎng)站，除了要精通后端開發(fā)語言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標記語言，它包含有眾多的標簽，我們可以通過這些標簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個統(tǒng)一的文檔中，這就形成了我們可以看得見的網(wǎng)頁。那么，HTML都有哪些常用的標簽呢？

一、文檔類型聲明。

html5文檔類型聲明：<!doctype html>

html4文檔類型聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主標簽。

這個標簽是html最外層的標簽，所有其它的HTML標簽都要放在這個標簽的內(nèi)部。

<html>

</html>

三、雙標簽和單標簽。

在HTML標簽中，有的標簽是成雙成對的，如：<html></html>（如下圖）；而有的標簽是單個的，如：<hr>橫線標簽。

四、head頭部標簽。

head頭部有以下幾種常用標簽：

meta：主要提供有關頁面的元信息。

link：用來定義文檔與外部資源的關系，最常用的是調(diào)用CSS樣式文件。

title：頁面標題的標簽。

script：用來調(diào)用JS文件或JS代碼。當然，script標簽也可以在body主體中使用。

五、body主體標簽。

1、塊級標簽。

塊級標簽的特性是：獨自占有一行；標簽的高與寬、邊距可以修改；沒有設置寬與高時，默認繼承父標簽。例如：

<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>

前端頁面顯示的效果如下圖：

常用的塊級標簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、內(nèi)聯(lián)標簽。

內(nèi)聯(lián)標簽與塊級標簽不同，它不能獨自占有一行，會與其它內(nèi)聯(lián)標簽在同一樣展示；內(nèi)聯(lián)標簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>

CSS樣式代碼跟塊級標簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒有效果。如下圖：

常用的內(nèi)聯(lián)標簽有：span、a、b、strong、i、em 。

3、內(nèi)聯(lián)塊級標簽。

內(nèi)聯(lián)塊級標簽，既有一些內(nèi)聯(lián)標簽的特性，也有一些塊級標簽的特點：它不能獨自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">

CSS樣式代碼跟塊級標簽的那個例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個圖片不能獨自占有一行，而是在同一行。如下圖：

常用的內(nèi)聯(lián)塊級標簽有：img、input、textarea。

4、區(qū)域標簽。

所謂區(qū)域標簽，就是主要用來劃分布局頁面區(qū)域的。如：頭部、主體內(nèi)容、側(cè)邊欄、底部。這樣劃分的好處是：讓頁面布局更加清晰明了。

常用的區(qū)域標簽有：header（頭部）、footer（底部）、nav（導航）、aside（側(cè)邊欄）、section（主體）、article（獨立內(nèi)容）。

5、表單標簽。

這個表單標簽我們也是會經(jīng)常用到的，如：登錄網(wǎng)站的時候、提交數(shù)據(jù)的時候。如下圖的評論表單：

?表單常用的標簽有：form、input、select、option、textarea 。

以上就是我們開發(fā)網(wǎng)頁時，會常用到的HTML標簽。當然，HTML標簽遠不止這些，尤其是html5出來后，新增了許多的新標簽。但是，有些標簽在我們開發(fā)中很少用到，所以，這里就沒有做相應的介紹。

言

如果網(wǎng)頁只有一種顏色，那是非常可怕的，顏色的設置豐富了網(wǎng)頁，就如同多彩繽紛的世界。

在了解css顏色之前，我們回顧下計算機是如何顯示顏色的？計算機根據(jù)色光三原色的原理通過各種算法來顯示顏色。

css 顏色 —— color

網(wǎng)頁中使用顏色關鍵字、16進制字符、rgb、rgba等表示紅，綠，藍三種顏色混合色，如下示例,幾種寫法都是指同一個顏色（紅色）：

color：red;
color: #ff0000;
color: rgb(255,0,0)
color: rgba(255,0,0,1)

對于16進制形式，每2位表示一個顏色，從左到右分別是紅、綠、藍，每種顏色取值從00 到 FF。

如下示例：

color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*紅色*/
color: #00ff00; /*綠色*/
color: #0000ff; /*藍色*/

對于rgb的表示法，由三個參數(shù)組成，分別是紅、綠、藍，每種顏色取值從0 到 255。

如下示例：

color: rgb(0,0,0); /*黑色*/
color: rgb(255,255,255); /*白色*/
color: rgb(255,0,0); /*紅色*/
color: rgb(0,255,0); /*綠色*/
color: rgb(0,0,255); /*藍色*/

紅，綠，藍值從0到255的結(jié)合，給出了總額超過1600多萬不同的顏色（256 × 256 ×256）。

但是現(xiàn)代大多數(shù)顯示器能夠顯示至少16384種顏色。所以在使用顏色時要格外注意，避免設置不能夠顯示的顏色，可以參考網(wǎng)頁安全色：https://www.w3school.com.cn/cssref/css_colors.asp。

顏色除了有三原色紅綠藍組成，還有亮度層級，如下圖：

rgba 中的a是指透明度，這個是css3新增加的屬性，通過rgba可以設置更加漂亮的顏色。

css 背景 —— background

通過background屬性可以設置元素的背景色、背景圖片，語法如下：

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

background 在一個聲明中設置所有的背景屬性，可以在這里設置如下屬性：

background-color —— 背景顏色。
background-image —— 使用的背景圖像
background-position —— 背景圖像的位置
background-size —— 背景圖片的大小
background-repeat —— 如何重復背景圖像
background-origin —— 背景圖片的定位區(qū)域
background-clip —— 背景的繪制區(qū)域
background-attachment —— 背景圖像是否固定或者隨著頁面的其余部分滾動。

各值之間用空格分隔，不分先后順序。可以只有其中的某些值，例如 background：＃FF0000 url(img.png)是允許的，但至少有一個值。

建議使用background 簡寫屬性，這樣可以更好地兼容較老的瀏覽器，少寫很多代碼，當然你也可以分開使用，比如：

background-color: #ff0000;
background-image: url(img.png);
background-repeat: no-repeat;
background-size: 100% auto;

1、背景顏色 —— background-color

background-color 和之前講的的color 一樣，可以使用16進制、rgb、rgba等設置顏色。如下實例：

<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<h1>背景色1</h1>
<h2>背景色2</h2>
<p>背景色3</p>
<p class="no2">背景色4</p>
</body>
</html>

如下圖顯示：

注意：background-color: transparent; 指透明色，不顯示任何顏色。

2、背景圖片的使用——background-image

給html元素添加背景圖片，在早期網(wǎng)頁制作中被廣泛應用，如今已不建議大量使用。如下實例：

body {background-image:url(/static/bg.gif);}

這里使用了一個125*125大小的圖片，如下：

但是你會發(fā)現(xiàn)，整個網(wǎng)頁鋪滿了圖片，上面的代碼默認會鋪滿整個頁面從左到右，從上到下。如果不想被平鋪，可以使用background-repeat 設置。

背景圖片同時可以設置多個背景圖片，如下：

background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);

多個圖像以逗號隔開，在頁面中多個圖片會疊加顯示，第一張圖片顯示在最頂端。

如下效果：

3、背景重復方式 —— background-repeat

它有如下幾個屬性：

repeat	默認。背景圖像將在垂直方向和水平方向重復。
repeat-x	背景圖像將在水平方向重復。
repeat-y	背景圖像將在垂直方向重復。
no-repeat	背景圖像不重復。
inherit	從父元素繼承 background-repeat 屬性的設置。

實例如下：

4、背景圖的位置 —— background-position

背景圖片默認顯示在左上角，語法如下：

background-position: x y; // x 距離左邊距離，y距離頂部距離

如果要改變它的位置，可以使用關鍵字：top、bottom、left、right 和 center；或者使用長度值，如 100px 或 5cm；也可以使用百分數(shù)值。

x 可以取值百分比| 數(shù)值| left | center | right。

y 可以取值百分比| 數(shù)值| top| center | bottom。

當只設置一個值的時候，另一個會缺省為 center。

使用關鍵字，將背景圖片水平居中，垂直居中：

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;

使用百分比%：

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 50%;

50% 50% 等同于 center center，顯示效果和上圖一樣。

還可以使用具體數(shù)值，比如 px、em、cm等。

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50px 50px;

顯示效果如下：

5、背景圖相對于容器的基準點 —— background-origin

就是設置背景圖片相對于html元素什么位置作為初始坐標點，語法：

background-origin: padding-box|border-box|content-box;

幾種值得含義：

padding-box	背景圖像相對填充框的位置
border-box	背景圖像相對邊界框的位置
content-box	背景圖像相對內(nèi)容框的位置

如下實例：

6、背景圖片大小 —— background-size

默認會顯示背景圖原始尺寸，可以通過此屬性設置背景圖片在元素上的大小，語法：

background-size: width height;

寬度和高度可以使用數(shù)值、百分比%、cover 及 contain ;

數(shù)值：可以使用任何單位的數(shù)字，比如 px、em、cm等。如果設置一個值，第二個為"auto(自動)"。

百分比%：相對于其所在html原始寬度和高度，如果設置一個值，第二個為"auto(自動)"。

cover：把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。

contain：把背景圖像擴展至最大尺寸，以使其寬度和高度完全適應內(nèi)容區(qū)域。

如下示例：

7、背景圖像是否固定或者隨著頁面的其余部分滾動

background-attachment 屬性有以下幾個值：

scroll	背景圖片隨頁面的其余部分滾動。這是默認
fixed	背景圖像是固定的
inherit	指定background-attachment的設置應該從父元素繼承
local	背景圖片隨滾動元素滾動

如設置一個固定的背景圖片，不跟隨頁面滾動：

background-attachment:fixed;

滾動滾動條，會發(fā)下背景圖片始終固定在屏幕那個位置。

8、背景繪制區(qū)域 —— background-clip

語法如下：

background-clip: border-box|padding-box|content-box;

border-box	默認值。背景繪制在邊框方框內(nèi)（剪切成邊框方框）。
padding-box	背景繪制在襯距方框內(nèi)（剪切成襯距方框）。
content-box	背景繪制在內(nèi)容方框內(nèi)（剪切成內(nèi)容方框）。

這個屬性類似于 background-origin ，只不過它會裁剪背景圖片，如下示例：

9、背景層的混合模式 —— background-blend-mode

所謂混合模式就是將圖片與顏色或圖片與圖片進行混合，語法：

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

屬性值：

示例如下：

正常模式

luminosity 亮度模式

color 顏色模式

其它模式可以自己試試，看下有什么區(qū)別。

到此，我們了解了顏色和背景的使用方法，尤其是背景的使用，由于它的屬性很多，可以簡寫也可以分開寫，要想完全掌握，還得多練習，每種屬性進行組合使用看看其效果。

一般建議使用 background 簡寫方式，主要是可以少寫很多代碼。以上介紹難免有誤，或不齊全，歡迎指出錯誤，并補充。

上篇：前端入門——css鏈接樣式

在線咨詢

上一篇：css中4種方法使內(nèi)容居中
下一篇：為什么我推薦使用JSX開發(fā)Vue3

您的項目需求

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

整合營銷服務商

HTML 布局

一、文檔類型聲明。

二、html主標簽。

三、雙標簽和單標簽。

四、head頭部標簽。

五、body主體標簽。

言

css 顏色 —— color

css 背景 —— background

您的項目需求