website layout 網(wǎng)站布局
header 頁(yè)眉
頁(yè)眉（header）通常位于網(wǎng)站頂部（或頂部導(dǎo)航菜單的正下方）
通常包含徽標(biāo)（logo）或網(wǎng)站名稱(chēng)
.header {
background-color: #f1f1f1;
text-align: center;
padding: 20px;
}
navbar 導(dǎo)航欄
導(dǎo)航欄包含鏈接列表，以幫助訪(fǎng)問(wèn)者瀏覽您的網(wǎng)站
/* navbar 容器 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* navbar 鏈接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px; /*padding很重要，沒(méi)有padding內(nèi)容會(huì)很小很擠很不好看，內(nèi)邊距可以理解為把內(nèi)容撐大*/
text-decoration: none;
}
/* 鏈接 - 懸停改變顏色 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
內(nèi)容
使用哪種布局通常取決于您的目標(biāo)用戶(hù)
最常見(jiàn)的布局是以下布局之一（或?qū)⑺鼈兘M合在一起）
- 1-列布局（通常用于移動(dòng)瀏覽器）
- 2-列布局（通常用于平板電腦和筆記本電腦）
- 3-列布局 （僅用于臺(tái)式機(jī)）
<!--
提示：如需創(chuàng)建 2 列布局，請(qǐng)將寬度更改為 50％
如需創(chuàng)建 4 列布局，請(qǐng)使用 25％
創(chuàng)建列布局的一種更現(xiàn)代的方法是使用 CSS Flexbox
Internet Explorer 10 和更早版本不支持它
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS網(wǎng)站布局</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0; /*消除那一點(diǎn)點(diǎn)的網(wǎng)頁(yè)內(nèi)容間隙*/
}
.header {
background-color: #333;
padding: 10px;
text-align: center;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* 創(chuàng)建并排的三個(gè)非等列 */
.column {
float: left;
width: 33.33%;
padding: 15px;
}
/* 清除列之后的浮動(dòng) */
.row:after {
content: "";
display: table;
clear: both;
}
/*響應(yīng)式布局 - 創(chuàng)建堆疊而非并排的三列*/
@media screen and (max-width:600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
<p>調(diào)整瀏覽器窗口大小來(lái)查看響應(yīng)效果</p>
</div>
<div class="topnav">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</div>
<div class="row">
<div class="column">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
<div class="column">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
<div class="column">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
</div>
</body>
</html>
不相等欄
主要內(nèi)容（main content）是您網(wǎng)站上最大、最重要的部分
列寬不相等的情況很常見(jiàn)，因?yàn)榇蟛糠挚臻g都為主內(nèi)容保留
附屬內(nèi)容（如果有）通常用作替代導(dǎo)航或指定與主要內(nèi)容有關(guān)的信息
您可以隨意更改寬度，只要記住它的總和應(yīng)為 100％文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-539724.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 網(wǎng)站布局</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* 設(shè)置頁(yè)眉的樣式 */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/* 設(shè)置頂部導(dǎo)航欄的樣式 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 設(shè)置 topnav 鏈接的樣式 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 改變鼠標(biāo)懸停時(shí)的顏色 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* 創(chuàng)建并排的三個(gè)不相等的列 */
.column {
float: left;
padding: 10px;
}
/* 左右列 */
.column.side {
width: 25%;
}
/* 中間列 */
.column.middle {
width: 50%;
}
/* 清除列之后的浮動(dòng) */
.row:after {
content: "";
display: table;
clear: both;
}
/* 響應(yīng)式布局 - 創(chuàng)建堆疊而非并排的三列 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
<p>調(diào)整窗口大小查看響應(yīng)效果</p>
</div>
<div class="topnav">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link2</a>
</div>
<div class="row">
<div class="column side">
<h2>Side</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
</div>
<div class="column middle">
<h2>Main Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
<div class="column side">
<h2>Side</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
</div>
</div>
</body>
</html>
頁(yè)腳
頁(yè)腳位于頁(yè)面底部
通常包含諸如版權(quán)和聯(lián)系方式之類(lèi)的信息文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-539724.html
<style>
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
</style>
<body>
<div class="footer">
<p>footer</p>
</div>
</body>
到了這里，關(guān)于【CSS 20】website layout 網(wǎng)站布局 頁(yè)眉 導(dǎo)航欄 列布局 不相等欄 頁(yè)腳的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
