更新時間:2024-01-12 來源:黑馬程序員 瀏覽量:
品字形布局(也稱為三欄布局)通常是指將網頁分為三個主要部分：頭部(header)、主體(main content)和底部(footer)。這是一種常見的網頁布局，其中頭部和底部通常是固定的，而主體部分則占據剩余的空間。以下是一個簡單的HTML和CSS示例，演示如何實現品字形布局：
JavaEE
鴻蒙應用開發(fā)
集成電路應用開發(fā)
人工智能開發(fā)
AI+Linux云計算運維
Python+大數據開發(fā)
AI+設計
軟件測試
新媒體+短視頻
HTML&JS+前端
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>品字形布局</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header, footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
main {
display: flex;
flex-direction: column;
align-items: stretch;
min-height: 100vh;
}
#left, #right {
flex: 0 0 200px; /* 固定寬度的左右欄 */
background-color: #f0f0f0;
padding: 10px;
}
#center {
flex: 1; /* 自適應寬度的中間欄 */
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>頭部</h1>
</header>
<main>
<div id="left">
<h2>左欄</h2>
<!-- 左欄內容 -->
</div>
<div id="center">
<h2>中間欄</h2>
<!-- 中間欄內容 -->
</div>
<div id="right">
<h2>右欄</h2>
<!-- 右欄內容 -->
</div>
</main>
<footer>
<p>底部</p>
</footer>
</body>
</html>在這個例子中，header和footer元素代表頭部和底部，它們具有固定的樣式。main元素包含三個子元素：#left、#center和#right，它們通過使用Flexbox布局實現了品字形布局。左右兩欄具有固定寬度，而中間欄會自適應寬度以填充剩余空間。這只是一個基本的示例，我們可以根據需要自定義樣式和內容。
本文版權歸黑馬程序員Web前端培訓學院所有，歡迎轉載，轉載請注明作者出處。謝謝!
作者：黑馬程序員Web前端培訓學院
首發(fā)：https://web.itheima.com
.jpg)