Flex Box页面布局实战课程-圣杯布局_通用实战_Flex Box教程_微信小程序毕业设计成品作品源代码网站

通用实战: Flex Box页面布局实战课程-圣杯布局
时间：2019/1/21 12:30:33  作者：互联网  来源：网络转载  查看：36896  评论：0
内容摘要：圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。效果图html代码<!DOCTYPE><ht...
圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

效果图

html代码

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>圣杯布局</title>

</head>

<style>

.rongqi{display:flex; flex-direction:column; background-color:#9CF; min-height:100vh;}

.tou{ background-color:#CCC; height:60px;}

.zhong{ background-color:#396;flex:1; display:flex;}

.di{ background-color:#999; height:60px;}

.c01{ background-color:#FC3;}

.c02{ background-color:#C63; flex:1;}

.c03{ background-color:#C6C;}

</style>

<body class="rongqi">

<div class="tou">头部</div>

<div class="zhong">

     <div class="c01">左边</div>

    <div class="c02">

        圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

    </div>

    <div class="c03">右边</div>

</div>

<div class="di">底部</div>

</body>

</html>

标签：Flex Box入门教程 Flex布局设计教程 flexbox在线视频教程
上一篇：Flex Box页面布局实战课程-输入框的布局
下一篇：Flex Box页面布局实战课程-固定的底栏

相关文章

相关评论

本类更新

本类推荐

本类排行