CSS 網頁佈局
網頁佈局
網頁佈局有很多種方式，一般分為以下幾個部分：頭部區域、選單導航區域、內容區域、底部區域。
頭部區域
頭部區域位於整個網頁的頂部，一般用於設定網頁的標題或者網頁的 logo：
CSS3 例項
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}
嘗試一下 ?
選單導航區域
選單導航條包含了一些連結，可以引導使用者瀏覽其他頁面：
CSS3 例項
/* 導航條 */
.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;
}
嘗試一下 ?
內容區域
內容區域一般有三種形式:
- 1 列：一般用於移動端
- 2 列：一般用於平板裝置
- 3 列：一般用於 PC 桌面裝置
我們將建立一個 3 列布局，在小的螢幕上將會變成 1 列布局（響應式）：
CSS3 例項
/* 建立三個相等的列 */
.column {
float: left;
width: 33.33%;
}
/* 列後清除浮動 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 響應式佈局 - 小於 600 px 時改為上下佈局 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
嘗試一下 ?
提示:要設定兩列可以設定 width 為 50%。建立 4 列可以設定為 25%。
提示:如果你想了解更多 @media 的規則可以檢視 CSS3 多媒體查詢。
提示: 現在更高階的方式是使用 CSS Flexbox 來建立列的佈局，但 Internet Explorer 10 及更早的版本不支援該方式， IE6-10 可以使用浮動方式。
CSS Flexbox 的更多內容可以檢視 CSS3 彈性盒子(Flex Box)。
不相等的列
不相等的列一般是在中間部分設定內容區域，這塊也是最大最主要的，左右兩次側可以作為一些導航等相關內容，這三列加起來的寬度是 100％。
CSS3 例項
.column {
float: left;
}
/* 左右側欄的寬度 */
.column.side {
width: 25%;
}
/* 中間列寬度 */
.column.middle {
width: 50%;
}
/* 響應式佈局 - 寬度小於600px時設定上下佈局 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
嘗試一下 ?
底部區域
底部區域在網頁的最下方，一般包含版權資訊和聯絡方式等。
CSS3 例項
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
嘗試一下 ?
響應式網頁佈局
通過以上等學習我們來建立一個響應式等頁面，頁面的佈局會根據螢幕的大小來調整：
CSS3 例項
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
/* 頭部標題 */
.header {
padding: 30px;
text-align: center;
background: white;
}
.header h1 {
font-size: 50px;
}
/* 導航條 */
.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;
}
/* 建立兩列 */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* 右側欄 */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* 影象部分 */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* 文章卡片效果 */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* 列後面清除浮動 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 底部 */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* 響應式佈局 - 螢幕尺寸小於 800px 時，兩列布局改為上下佈局 */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* 響應式佈局 -螢幕尺寸小於 400px 時，導航等佈局改為上下佈局 */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
嘗試一下 ?