整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
頁(yè)布局對(duì)改善網(wǎng)站的外觀非常重要。
請(qǐng)慎重設(shè)計(jì)您的網(wǎng)頁(yè)布局。
在線(xiàn)實(shí)例
使用 <div> 元素的網(wǎng)頁(yè)布局
如何使用 <div> 元素添加布局。
使用 <table> 元素的網(wǎng)頁(yè)布局
如何使用 <table> 元素添加布局。
網(wǎng)站布局
大多數(shù)網(wǎng)站會(huì)把內(nèi)容安排到多個(gè)列中（就像雜志或報(bào)紙那樣）。
大多數(shù)網(wǎng)站可以使用 <div> 或者 <table> 元素來(lái)創(chuàng)建多列。CSS 用于對(duì)元素進(jìn)行定位，或者為頁(yè)面創(chuàng)建背景以及色彩豐富的外觀。
| 雖然我們可以使用HTML table標(biāo)簽來(lái)設(shè)計(jì)出漂亮的布局，但是table標(biāo)簽是不建議作為布局工具使用的 - 表格不是布局工具。 |
HTML 布局 - 使用<div> 元素
div 元素是用于分組 HTML 元素的塊級(jí)元素。
下面的例子使用五個(gè) div 元素來(lái)創(chuàng)建多列布局：
實(shí)例
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥(niǎo)教程(runoob.com)</title></head><body><divid="container"style="width:500px"><divid="header"style="background-color:#FFA500;"><h1style="margin-bottom:0;">主要的網(wǎng)頁(yè)標(biāo)題</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;">版權(quán) ? runoob.com</div></div></body></html>
上面的 HTML 代碼會(huì)產(chǎn)生如下結(jié)果：
HTML 布局 - 使用表格
使用 HTML <table> 標(biāo)簽是創(chuàng)建布局的一種簡(jiǎn)單的方式。
大多數(shù)站點(diǎ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í)例
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥(niǎo)教程(runoob.com)</title></head><body><tablewidth="500"border="0"><tr><tdcolspan="2"style="background-color:#FFA500;"><h1>主要的網(wǎng)頁(yè)標(biāo)題</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;">版權(quán) ? runoob.com</td></tr></table></body></html>
上面的 HTML 代碼會(huì)產(chǎn)生以下結(jié)果：
HTML 布局 - 有用的提示
Tip: 使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那么站點(diǎn)會(huì)更易于維護(hù)。通過(guò)編輯單一的文件，就可以改變所有頁(yè)面的布局。如需學(xué)習(xí)更多有關(guān) CSS 的知識(shí)，請(qǐng)?jiān)L問(wèn)我們的CSS 教程。
Tip: 由于創(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ū)塊，塊級(jí)(block-level) |
| <span> | 定義 span，用來(lái)組合文檔中的行內(nèi)元素。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
前話(huà)
Hello，小伙伴們大家新年好，本篇是今年第一篇，也籌劃許久，本篇主題為美食，系html5網(wǎng)站模板，div加css布局，網(wǎng)頁(yè)資源分開(kāi)存儲(chǔ)以便管理，網(wǎng)頁(yè)結(jié)構(gòu)清晰簡(jiǎn)單，希望本篇能夠助力各位萌新
主題
《周末の食記》
美食能撫平一切的憂(yōu)傷
簡(jiǎn)介
文件結(jié)構(gòu)包含了css、fonts、images、js和html，運(yùn)用html5技術(shù)，包括nav標(biāo)簽、header標(biāo)簽和footer標(biāo)簽等，采用bootstrap進(jìn)行布局
圖摘
目錄
編碼
<div class="ftco-46-row d-flex flex-column flex-lg-row">
<div class="ftco-46-text ftco-46-arrow-right">
<h4 class="ftco-46-subheading">Food</h4>
<h3 class="ftco-46-heading">揚(yáng)州炒飯</h3>
<p class="mb-5">一碗不一樣的炒飯，讓你難以拒絕.</p>
<p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
</div>
<div class="ftco-46-image" style="background-image: url(images/img_3.jpg);"></div>
<div class="ftco-46-text ftco-46-arrow-up">
<h4 class="ftco-46-subheading">Food</h4>
<h3 class="ftco-46-heading">藍(lán)莓酸奶冰激凌</h3>
<p class="mb-5">觸動(dòng)您的心靈，令人甜蜜至極，難以忘懷，心曠神怡的味覺(jué)享受，精選一級(jí)的夏威夷果仁，入口絲滑</p>
<p><a href="#" class="btn-link">更多 <span class="ion-android-arrow-forward"></span></a></p>
</div>
</div>結(jié)語(yǔ)
如果人的一生總的能量是固定的話(huà)，那就節(jié)省開(kāi)支，延長(zhǎng)時(shí)間，喜怒哀樂(lè)不溢于言表，不困于心智，保持樂(lè)觀心態(tài)
<table>標(biāo)簽：
<table>指的是表格，用表格來(lái)搭建界面布局，即用表格的嵌套，來(lái)搭建界面布局。
<table>布局優(yōu)勢(shì)：
table優(yōu)勢(shì)：開(kāi)發(fā)時(shí)間短（使用DW開(kāi)發(fā)速度快）；純table各瀏覽器不會(huì)有兼容問(wèn)題；內(nèi)容可自適應(yīng)；在搜索引擎排名能靠前；
但是 table如果布局變更，需要重新開(kāi)發(fā)；如果table里有div ul 等，可能會(huì)出現(xiàn)瀏覽器兼容問(wèn)題；加載速度慢；table嵌套的太多，運(yùn)維是非常困難的。
<div>塊級(jí)（block-level）標(biāo)簽：
DIV是層疊樣式表中的定位技術(shù)，全稱(chēng)DIVision，即為劃分。有時(shí)可以稱(chēng)其為圖層。
<div>布局優(yōu)勢(shì)：
一.精簡(jiǎn)代碼，減少重構(gòu)難度。
網(wǎng)站使用DIV+CSS布局使代碼很是精簡(jiǎn)，css文件可以在網(wǎng)站的任意一個(gè)頁(yè)面進(jìn)行調(diào)用，而若是使用table表格修改部分頁(yè)面卻是顯得很麻煩。要是一個(gè)門(mén)戶(hù)網(wǎng)站的話(huà)，需手動(dòng)改很多頁(yè)面，而且看著那些表格也會(huì)感覺(jué)很亂也很浪費(fèi)時(shí)間，但是使用css+div布局只需修改css文件中的一個(gè)代碼即可。
二.網(wǎng)頁(yè)訪(fǎng)問(wèn)速度
使用了DIV+CSS布局的網(wǎng)頁(yè)與Table布局比較，精簡(jiǎn)了許多頁(yè)面代碼，那么其瀏覽訪(fǎng)問(wèn)速度自然得以提升，也從而提升了網(wǎng)站的用戶(hù)體驗(yàn)度。
三.SEO優(yōu)化
采用div-css布局的網(wǎng)站對(duì)于搜索引擎很是友好，因此其避免了Table嵌套層次過(guò)多而無(wú)法被搜索引擎抓取的問(wèn)題，而且簡(jiǎn)潔、結(jié)構(gòu)化的代碼更加有利于突出重點(diǎn)和適合搜索引擎抓取。
四.瀏覽器兼容性
若使用table布局網(wǎng)頁(yè)，在使用不同瀏覽器情況下會(huì)發(fā)生錯(cuò)位，而div+css則不會(huì)，無(wú)論什么瀏覽器，網(wǎng)頁(yè)都不會(huì)出現(xiàn)變形情況。
1.流動(dòng)式布局：是HTML網(wǎng)頁(yè)默認(rèn)的布局方式
特點(diǎn)：
1.塊級(jí)元素都會(huì)在所處的包含元素內(nèi)自上而下按順序處置延伸分布，且默認(rèn)狀態(tài)下，塊級(jí)元素占整個(gè)文檔流，默認(rèn)寬度為100%。
2.內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示，不占整個(gè)文檔流。
常見(jiàn)的塊級(jí)（block）元素有：<h1-h5> 、<table>、 <ul>、<li> 、<p> 、<form>、 ol
常見(jiàn)的內(nèi)內(nèi)聯(lián)（行內(nèi)）元素有：<a>、<span>、<img>、<input>、<select>、<textarea>
2.浮動(dòng)布局（float）
特點(diǎn)：
浮動(dòng)布局依靠【 浮動(dòng)屬性 float：left/right/... 】來(lái)使標(biāo)簽脫離文檔流，達(dá)到兩個(gè)塊級(jí)元素并排顯示的效果。
float：left ； 浮動(dòng)脫離當(dāng)前文檔流浮動(dòng)。
同時(shí)可以依靠【展示屬性display：inline/block/inline-block】來(lái)進(jìn)行行內(nèi)元素和塊級(jí)元素的效果切換。從而達(dá)到靈活運(yùn)用塊級(jí)元素和行內(nèi)元素布局的效果。
3.層模型布局又叫定位布局
特點(diǎn)：
當(dāng)我們應(yīng)擁div布局是，在第一層塊界面上來(lái)做第二層塊界面的開(kāi)發(fā)時(shí)，就要用到我們所說(shuō)的定位布局。
通過(guò)運(yùn)用【定位屬性position:absolute/relative/fixed】 來(lái)進(jìn)行第二層界面的定位布局。
網(wǎng)頁(yè)是靜態(tài)的，網(wǎng)頁(yè)上的定位
position：absolute ；絕對(duì)定位脫離文檔流，不受浮動(dòng)影響，就是相對(duì)于窗體（body）邊界的margin定位。
position：relative； 相對(duì)定位不脫離文檔流，相對(duì)于父級(jí)標(biāo)簽元素的位置定位。
position:fixed；固定位置，不會(huì)受任何因素影響。
滾動(dòng)條移動(dòng)前
滾動(dòng)條移動(dòng)后
優(yōu)先層顯示方法：【屬性：z-index:0/1/2...】
特點(diǎn)： 數(shù)值越大，越優(yōu)先顯示。
注意：只有元素使用了position屬性的，才具有z-index屬性。
本文部分內(nèi)容來(lái)自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系修改。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
