中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

上一篇：CSS 計(jì)數(shù)器 下一篇：CSS 總結(jié)

CSS 網(wǎng)頁布局

網(wǎng)頁布局

網(wǎng)頁布局有很多種方式，一般分為以下幾個(gè)部分：頭部區(qū)域、菜單導(dǎo)航區(qū)域、內(nèi)容區(qū)域、底部區(qū)域。

頭部區(qū)域

頭部區(qū)域位于整個(gè)網(wǎng)頁的頂部，一般用于設(shè)置網(wǎng)頁的標(biāo)題或者網(wǎng)頁的 logo：

CSS3 實(shí)例

.header { background-color: #F1F1F1; text-align: center; padding: 20px; }

運(yùn)行代碼 ?

菜單導(dǎo)航區(qū)域

菜單導(dǎo)航條包含了一些鏈接，可以引導(dǎo)用戶瀏覽其他頁面：

CSS3 實(shí)例

/* 導(dǎo)航條 */ .topnav { overflow: hidden; background-color: #333; } /* 導(dǎo)航鏈接 */ .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; }

運(yùn)行代碼 ?

內(nèi)容區(qū)域

內(nèi)容區(qū)域一般有三種形式:

  • 1 列：一般用于移動(dòng)端
  • 2 列：一般用于平板設(shè)備
  • 3 列：一般用于 PC 桌面設(shè)備

我們將創(chuàng)建一個(gè) 3 列布局，在小的屏幕上將會(huì)變成 1 列布局（響應(yīng)式）：

CSS3 實(shí)例

/* 創(chuàng)建三個(gè)相等的列 */ .column { float: left; width: 33.33%; } /* 列后清除浮動(dòng) */ .row:after { content: ""; display: table; clear: both; } /* 響應(yīng)式布局 - 小于 600 px 時(shí)改為上下布局 */ @media screen and (max-width: 600px) { .column { width: 100%; } }

運(yùn)行代碼 ?

提示:要設(shè)置兩列可以設(shè)置 width 為 50%。創(chuàng)建 4 列可以設(shè)置為 25%。

提示:如果你想了解更多 @media 的規(guī)則可以查看 CSS3 多媒體查詢。

提示: 現(xiàn)在更高級(jí)的方式是使用 CSS Flexbox 來創(chuàng)建列的布局，但 Internet Explorer 10 及更早的版本不支持該方式， IE6-10 可以使用浮動(dòng)方式。

CSS Flexbox 的更多內(nèi)容可以查看 CSS3 彈性盒子(Flex Box)。

不相等的列

不相等的列一般是在中間部分設(shè)置內(nèi)容區(qū)域，這塊也是最大最主要的，左右兩次側(cè)可以作為一些導(dǎo)航等相關(guān)內(nèi)容，這三列加起來的寬度是 100％。

CSS3 實(shí)例

.column { float: left; } /* 左右側(cè)欄的寬度 */ .column.side { width: 25%; } /* 中間列寬度 */ .column.middle { width: 50%; } /* 響應(yīng)式布局 - 寬度小于600px時(shí)設(shè)置上下布局 */ @media screen and (max-width: 600px) { .column.side, .column.middle { width: 100%; } }

運(yùn)行代碼 ?

底部區(qū)域

底部區(qū)域在網(wǎng)頁的最下方，一般包含版權(quán)信息和聯(lián)系方式等。

CSS3 實(shí)例

.footer { background-color: #F1F1F1; text-align: center; padding: 10px; }

運(yùn)行代碼 ?

響應(yīng)式網(wǎng)頁布局

通過以上等學(xué)習(xí)我們來創(chuàng)建一個(gè)響應(yīng)式等頁面，頁面的布局會(huì)根據(jù)屏幕的大小來調(diào)整：

CSS3 實(shí)例

* { box-sizing: border-box; } body { font-family: Arial; padding: 10px; background: #f1f1f1; } /* 頭部標(biāo)題 */ .header { padding: 30px; text-align: center; background: white; } .header h1 { font-size: 50px; } /* 導(dǎo)航條 */ .topnav { overflow: hidden; background-color: #333; } /* 導(dǎo)航條鏈接 */ .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%; } /* 右側(cè)欄 */ .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; } /* 列后面清除浮動(dòng) */ .row:after { content: ""; display: table; clear: both; } /* 底部 */ .footer { padding: 20px; text-align: center; background: #ddd; margin-top: 20px; } /* 響應(yīng)式布局 - 屏幕尺寸小于 800px 時(shí)，兩列布局改為上下布局 */ @media screen and (max-width: 800px) { .leftcolumn, .rightcolumn { width: 100%; padding: 0; } } /* 響應(yīng)式布局 -屏幕尺寸小于 400px 時(shí)，導(dǎo)航等布局改為上下布局 */ @media screen and (max-width: 400px) { .topnav a { float: none; width: 100%; } }

運(yùn)行代碼 ?
上一篇：CSS 計(jì)數(shù)器 下一篇：CSS 總結(jié)