專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2022-12-07 10:52:05 來源：動力節(jié)點(diǎn) 瀏覽1346次
創(chuàng)建布局是設(shè)計網(wǎng)站時最重要的事情，因?yàn)樗鼘⒋_保您的網(wǎng)站看起來井井有條并且內(nèi)容看起來易于理解。有多種技術(shù)和框架可用于創(chuàng)建布局，但在這里我們將學(xué)習(xí)簡單的技術(shù)。您可以使用以下方法創(chuàng)建多列布局：
HTML表格(盡量不要用)
CSS 浮動屬性
CSS框架
CSS彈性框
使用 div 布局
基于 HTML 表格的布局是創(chuàng)建布局的最簡單方法之一，因?yàn)楸砀駜H使用基于行和列的格式，但不建議將 HTML 表格用于您的頁面布局。
元素旨在顯示表格數(shù)據(jù)。這不利于布局。雖然首先創(chuàng)建布局很容易，但如果您想更改或重新設(shè)計您的網(wǎng)站，那么這將是一項復(fù)雜的任務(wù)。
以下是使用 HTML 表格創(chuàng)建簡單網(wǎng)頁布局的示例。
<!DOCTYPE html>
<html>
<頭>
<樣式>
李{
顯示：內(nèi)聯(lián)塊；
填充：10px;}
一個{
顏色：#20b2aa；
}
</樣式>
</頭>
<正文>
<!-- 標(biāo)題部分 -->
<table width= "100%" style= "border-collapse:collapse;" >
<tr>
<td colspan= "2" style= "背景顏色：#1a1a1a；文本對齊：居中；" >
<h3 style= "字體大?。?0px；顏色：#ff6a6a；" >javaTpoint 表格布局</h3>
</td>
</tr>
<!-- 導(dǎo)航部分 -->
<tr>
<td colspan= "2" style= "背景色：#666666;" >
<ul>
<li><a href= "#" >首頁</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About-us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</td>
</tr>
<!-- Main Section -->
<tr>
<td style="background-color:#e6e6fa; width:80%; height: 400px; text-align: center;">
<p>Write your content Here</p>
</td>
<td style="background-color:#a7e6fb; height: 400px;">
<p>This is your side bar</p>
</td>
</tr>
<!-- Footer Section -->
<tr>
<td colspan="2" style="background-color:#2e2e2e; text-align: center;">
<p style="color:#f08080">?<strong>Copyright javaTpoint.com</strong></p>
</td>
</tr>
</table>
</body>
</html>
CSS 提供了許多框架，如 W3.CSS、Bootstrap 等，可以快速創(chuàng)建您的布局。使用 CSS 框架，您可以輕松創(chuàng)建響應(yīng)迅速且有吸引力的 Web 布局。你只需要為這些框架添加一個鏈接，你就可以使用框架中所有可用的屬性。
您可以使用 CSS 浮動屬性創(chuàng)建整個 Web 布局。
優(yōu)點(diǎn)：非常容易學(xué)習(xí)和使用。您只需了解 float 和 clear 屬性的工作原理。
缺點(diǎn)：浮動元素與文檔流相關(guān)聯(lián)，這可能會損害靈活性。
例子：
<!DOCTYPE html>
<html>
<頭>
<樣式>
div.容器{
寬度： 100 %；
邊框：1px 純灰色；
}
頁眉頁腳 {
填充：1em；
白顏色;
背景顏色：# 000080 ；
清除：離開；
文本對齊：居中；
}
導(dǎo)航{
浮動：左；
最大寬度：160px；
保證金： 0 ；
填充：1em；
}
導(dǎo)航 ul {
列表樣式類型：無；
填充： 0 ；
}
導(dǎo)航 ul a {
文字修飾：無；
}
文章 {
左邊距：170px；
左邊框：1px 純灰色；
填充：1em；
溢出：隱藏；
}
</樣式>
</頭>
<正文>
<div 類= "容器" >
<標(biāo)題>
<h1>教程庫</h1>
</標(biāo)題>
<導(dǎo)航>
<ul>
<li><a href= "#" >HTML</a></li>
<li><a href= "#" >CSS</a></li>
<li><a href= "#" >JavaScript</a></li>
</ul>
</導(dǎo)航>
<文章>
<h1>HTML</h1>
<p>HTML 教程或 HTML 5 教程提供了 html 的基本和高級概念。我們的 HTML 教程是
為 初學(xué)者和專業(yè)人士 開發(fā) 。</p>
<p>TML 是超文本標(biāo)記語言的 縮寫 。讓我們看看什么是超文本，什么是標(biāo)記語言？</p>
</文章>
<footer> 版權(quán)所有 ? javatpoint.com</footer>
</div>
</body>
</html>
Flexbox 是 CSS3 中一種新的布局模式。
優(yōu)點(diǎn)：確保頁面布局必須適應(yīng)不同的屏幕尺寸和不同的顯示設(shè)備。
缺點(diǎn)：它在 IE10 及更早版本中不起作用。
例子：
<!DOCTYPE html>
<html>
<頭>
<樣式>
.flex容器{
顯示：-webkit-flex；
顯示：彈性；
-webkit-flex-flow：行換行；
彈性流：行換行；
文本對齊：居中；
}
.flex 容器 > * {
填充：15px；
-webkit-flex: 1 100 %;
彈性： 1 100 %；
}
。文章 {
文本對齊：左；
}
標(biāo)題{背景：# 000080 ；顏色：白色；}
頁腳{背景：# 000080 ；顏色：白色；}
.nav {背景：#eee;}
.nav ul {
列表樣式類型：無；
填充： 0 ；
}
.nav ul a {
文字修飾：無；
}
@media all and (min-width: 768px) {
.nav {text-align:left;-webkit-flex: 1 auto;flex: 1 auto;-webkit-order: 1 ;order: 1 ;}
.article {-webkit-flex: 5 0px;flex: 5 0px;-webkit-order: 2 ;order: 2 ;}
頁腳 {-webkit-order: 3 ;order: 3 ;}
}
</樣式>
</頭>
<正文>
<div class = "彈性容器" >
<標(biāo)題>
<h1>展城館</h1>
</標(biāo)題>
<導(dǎo)航 類= “導(dǎo)航” >
<ul>
<li><a href= "#" >HTML</a></li>
<li><a href= "#" >CSS</a></li>
<li><a href= "#" >JavaScript</a></li>
</ul>
</導(dǎo)航>
<文章 類= “文章” >
<h1>HTML</h1>
<p>HTML 教程或 HTML 5 教程提供了 html 的基本和高級概念。我們的 HTML 教程是
為 初學(xué)者和專業(yè)人士 開發(fā) 。</p>
<p>TML 是超文本標(biāo)記語言的 縮寫 。讓我們看看什么是超文本，什么是標(biāo)記語言？</p>
<p><strong>調(diào)整 頁面大小看看會發(fā)生什么！</strong></p >
</文章>
<footer> 版權(quán)所有 ? javatpoint.com</footer>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<頭>
<title>使用div的網(wǎng)頁</title>
<樣式>
身體{
邊距：0px；
}
.header{
填充：10px；
背景色：#455e64；
文本對齊：居中；
}
.header h2{
顏色：黑色; }
/*===============[導(dǎo)航 CSS]==========*/
導(dǎo)航{
背景色：# 243238 ；
填充：5px；
}
.nav li{
列表樣式：無；
顯示：內(nèi)聯(lián)塊；
填充：8px；
}
.導(dǎo)航{
顏色：#fff；
}
.nav ul li a:hover{
文字修飾：無；
顏色：#7fffd4；
}
.lside{
浮動：左；
寬度： 80 %；
最小高度：440px；
背景色：#f0f8ff；
文本對齊：居中；
}
.rside
{
文本對齊：居中；
浮動：對；
寬度： 20 %；
最小高度：440px；
背景色：#c1cdcd；
}
.頁腳{
高度：44px；
背景色：#455e64；
文本對齊：居中；
填充頂部：10px;}
.頁腳 p{
顏色：#8fbc8f；
}
</樣式>
</頭>
<正文>
<分區(qū)>
<div 類= "標(biāo)題" >
<h2>javaTpoint Div 布局</h2>
</div>
<!-- 導(dǎo)航 -->
<div 類= "導(dǎo)航" >
<ul>
<li><a href= "#" >首頁</a></li>
<li><a href= "#" >菜單</a></li>
<li><a href= "#" >關(guān)于</a></li>
<li><a href= "#" >聯(lián)系方式</a></li>
<li style= "浮動：右；" ><a href= "#" >登錄</a></li>
<li style= "浮動：右；" ><a href= "#" >注冊</a></li>
</ul>
</div>
<!-- 主要 -->
<div style= "height:440px" >
<div class = "lside" >
<p>在這里寫你的內(nèi)容</p>
</div>
<!-- 邊 -->
<div class = "rside" >
<p>這是側(cè)面</p>
</div>
</div>
<!-- 頁腳 -->
<div 類= "頁腳" >
<p>?<strong>版權(quán)所有 javaTpoint.com</strong></p>
</div>
</div>
</body>
</html>
以上就是關(guān)于“HTML頁面布局技術(shù)”的介紹，大家如果想了解更多相關(guān)知識，不妨來關(guān)注一下本站的HTML教程，里面還有更豐富的知識等著大家去學(xué)習(xí)，希望對大家能夠有所幫助哦。
初級 202925
初級 203221
初級 202629
初級 203743
官方微信
官方抖音
Java實(shí)驗(yàn)班
Java就業(yè)班
Java夜校直播班
Java在職加薪班
Java架構(gòu)師班
京公網(wǎng)安備 11030102010736號