整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
者：sunshine小小倩
轉(zhuǎn)發(fā)鏈接：https://juejin.im/post/599970f4518825243a78b9d5
局和腳部是 HTML 頁(yè)面中兩個(gè)重要的區(qū)域。布局區(qū)域用于組織頁(yè)面上的內(nèi)容，而腳部區(qū)域通常包含與頁(yè)面內(nèi)容無(wú)關(guān)但重要的信息。
布局區(qū)域
布局區(qū)域用于將頁(yè)面上的內(nèi)容分組和排列。最常用的布局區(qū)域是：
腳部區(qū)域
腳部區(qū)域通常包含以下內(nèi)容：
布局和腳部的組合
布局區(qū)域可以包含腳部區(qū)域。例如，以下代碼展示了如何將腳部區(qū)域包含在布局區(qū)域內(nèi)：
html<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>
<div id="layout">
<!-- ... -->
<footer>
<p>? 20 vicisslet 20 vicisslet</p>
<p>聯(lián)系：...</p>
<p>社交媒體：...</p>
</footer>
</div>
</body>
</html>
最佳實(shí)踐
結(jié)論
布局和腳部是 HTML 頁(yè)面中兩個(gè)重要的區(qū)域。通過(guò)了解布局和腳部區(qū)域的用法，您可以創(chuàng)建擁有清晰結(jié)構(gòu)和良好閱讀體驗(yàn)的頁(yè)面。
天小編為大家介紹五種css樣式布局以及內(nèi)服源代碼作為介紹，采用的方式是行內(nèi)級(jí)樣式（就是將css樣式代碼與html寫在一起）
已知布局元素的高度，寫出三欄布局，要求左欄、右欄寬度各為300px，中間自適應(yīng)。
一、浮動(dòng)布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮動(dòng)布局</title>
<style type="text/css">
.wrap1 div{
min-height: 200px;
}
.wrap1 .left{
float: left;
width: 300px;
background: red;
}
.wrap1 .right{
float: right;
width: 300px;
background: blue;
}
.wrap1 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap1">
<div class="left"></div>
<div class="right"></div>
<div class="center">
浮動(dòng)布局
</div>
</div>
</body>
</html>
浮動(dòng)布局的兼容性比較好，但是浮動(dòng)帶來(lái)的影響比較多，頁(yè)面寬度不夠的時(shí)候會(huì)影響布局。
二、絕對(duì)定位布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>絕對(duì)定位布局</title>
<style type="text/css">
.wrap2 div{
position: absolute;
min-height: 200px;
}
.wrap2 .left{
left: 0;
width: 300px;
background: red;
}
.wrap2 .right{
right: 0;
width: 300px;
background: blue;
}
.wrap2 .center{
left: 300px;
right: 300px;
background: pink;
}
</style>
</head>
<body>
<div class="wrap2 wrap">
<div class="left"></div>
<div class="center">
絕對(duì)定位布局
</div>
<div class="right"></div>
</div>
</body>
</html>
絕對(duì)定位布局快捷，但是有效性比較差，因?yàn)槊撾x了文檔流。
三、flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>flex布局</title>
<style type="text/css">
.wrap3{
display: flex;
min-height: 200px;
}
.wrap3 .left{
flex-basis: 300px;
background: red;
}
.wrap3 .right{
flex-basis: 300px;
background: blue;
}
.wrap3 .center{
flex: 1;
background: pink;
}
</style>
</head>
<body>
<div class="wrap3 wrap">
<div class="left"></div>
<div class="center">
flex布局
</div>
<div class="right"></div>
</div>
</body>
</html>
自適應(yīng)好，高度能夠自動(dòng)撐開
四、table-cell表格布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>table-cell表格布局</title>
<style type="text/css">
.wrap4{
display: table;
width: 100%;
height: 200px;
}
.wrap4>div{
display: table-cell;
}
.wrap4 .left{
width: 300px;
background: red;
}
.wrap4 .right{
width: 300px;
background: blue;
}
.wrap4 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap4 wrap">
<div class="left"></div>
<div class="center">
表格布局
</div>
<div class="right"></div>
</div>
</body>
</html>
兼容性好，但是有時(shí)候不能固定高度，因?yàn)闀?huì)被內(nèi)容撐高。
五、網(wǎng)格布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>網(wǎng)格布局</title>
<style type="text/css">
.wrap5{
display: grid;
width: 100%;
grid-template-rows: 200px;
grid-template-columns: 300px auto 300px;
}
.wrap5 .left{
background: red;
}
.wrap5 .right{
background: blue;
}
.wrap5 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap5 wrap">
<div class="left"></div>
<div class="center">
網(wǎng)格布局
</div>
<div class="right"></div>
</div>
</body>
</html>
希望大家可以一直關(guān)注我，支持我！感謝！！！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
