圣杯布局 （Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。 HTML代码如下
圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
HTML代码如下。
CSS代码如下。
如果是小屏幕，躯干的三栏自动变为垂直叠加。
四、输入框的布局
我们常常需要在输入框的前方添加提示，后方添加按钮。
HTML代码如下。
CSS代码如下。
五、悬挂式布局
有时，主栏的左侧或右侧，需要添加一个图片栏。
HTML代码如下。
CSS代码如下。
六、固定的底栏
有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。
HTML代码如下。
CSS代码如下。
七，流式布局
每行的项目数固定，会自动分行。
CSS的写法。
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
相关文章
H5弹性盒布局的使用（父容器属性） - novai-L
2017-03-25 14:01
移动端页面开发适配 rem布局原理 - 我正经七百九十九
2017-03-20 10:00
html5语义化布局标签 - 橡皮脸
2017-03-06 16:00
Omi教程-插件体系 - 【当耐特】
2017-03-02 18:00
网友点评
精彩导读
热门资讯
关注我们
