CSS 教程
CSS 網(wǎng)頁布局
網(wǎng)頁布局
網(wǎng)頁布局有很多種方式，一般分為以下幾個部分：頭部區(qū)域、菜單導航區(qū)域、內(nèi)容區(qū)域、底部區(qū)域。
頭部區(qū)域
頭部區(qū)域位于整個網(wǎng)頁的頂部，一般用于設置網(wǎng)頁的標題或者網(wǎng)頁的 logo：
菜單導航區(qū)域
菜單導航條包含了一些鏈接，可以引導用戶瀏覽其他頁面：
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;
}
運行代碼 ?
內(nèi)容區(qū)域
內(nèi)容區(qū)域一般有三種形式:
- 1 列：一般用于移動端
- 2 列：一般用于平板設備
- 3 列：一般用于 PC 桌面設備
我們將創(chuàng)建一個 3 列布局，在小的屏幕上將會變成 1 列布局（響應式）：
CSS3 實例
/* 創(chuàng)建三個相等的列 */
.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%。創(chuàng)建 4 列可以設置為 25%。
提示:如果你想了解更多 @media 的規(guī)則可以查看 CSS3 多媒體查詢。
提示: 現(xiàn)在更高級的方式是使用 CSS Flexbox 來創(chuàng)建列的布局，但 Internet Explorer 10 及更早的版本不支持該方式， IE6-10 可以使用浮動方式。
CSS Flexbox 的更多內(nèi)容可以查看 CSS3 彈性盒子(Flex Box)。
不相等的列
不相等的列一般是在中間部分設置內(nèi)容區(qū)域，這塊也是最大最主要的，左右兩次側可以作為一些導航等相關內(nèi)容，這三列加起來的寬度是 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%;
}
}
運行代碼 ?
底部區(qū)域
底部區(qū)域在網(wǎng)頁的最下方，一般包含版權信息和聯(lián)系方式等。
響應式網(wǎng)頁布局
通過以上等學習我們來創(chuàng)建一個響應式等頁面，頁面的布局會根據(jù)屏幕的大小來調(diào)整：
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;
}
/* 創(chuàng)建兩列 */
/* 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%;
}
}
運行代碼 ?