日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁(yè) > 云知道 > >

css代碼注釋的寫法 css代碼( 二 )

云知道css代碼


五、圣杯布局
圣杯布局是最常用的布局，所以被比喻為圣杯 。它將頁(yè)面分成五個(gè)部分，除了頁(yè)眉和頁(yè)腳，內(nèi)容區(qū)分成左邊欄、主欄、右邊欄 。
這里的實(shí)現(xiàn)是，不管頁(yè)面寬度，內(nèi)容區(qū)始終分成三欄 。如果寬度太窄，主欄和右邊欄會(huì)看不到 。如果想將這三欄改成小屏幕自動(dòng)堆疊，可以參考并列式布局 。
HTML 代碼如下 。
<div class="container">
<header/>
<div/>
<main/>
<div/>
<footer/>
</div>
CSS 代碼如下（CodePen 示例[8]） 。
.contariner {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
上面代碼要寫在容器上面，指定采用 Grid 布局 。核心代碼是grid-template屬性那一行，它是兩個(gè)屬性grid-template-rows（垂直方向）和grid-template-columns（水平方向）的簡(jiǎn)寫形式 。
grid-template: <grid-template-rows> / <grid-template-columns>
grid-template-rows和grid-template-columns都是auto 1fr auto，就表示頁(yè)面在垂直方向和水平方向上，都分成三個(gè)部分 。第一部分（頁(yè)眉和左邊欄）和第三部分（頁(yè)腳和右邊欄）都是本來的內(nèi)容高度（或?qū)挾龋?，第二部分（?nèi)容區(qū)和主欄）占滿剩余的高度（或?qū)挾龋?。
更多前端知識(shí)，搜索【前端小學(xué)弟】
【css代碼注釋的寫法 css代碼】(今完)

推薦閱讀