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

通用实战: Flex Box页面布局实战课程-固定的底栏
时间：2019/1/21 12:29:38 作者：互联网来源：网络转载查看：36905 评论：0
内容摘要：效果图如下html代码如下<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo...
效果图如下

html代码如下

<!DOCTYPE>

<html>

<head>

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

<title>固定的底栏</title>

<style>

.rongqi{ display:flex; flex-direction:column; min-height:100vh;}

.shang{ background-color:#66CCCC; height:60px;}

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

.xia{ background-color: #09F; height:60px;}

</style>

</head>

<body class="rongqi">

<div class="shang">

01

</div>

<div class="zhong">

02

</div>

<div class="xia">

03

</div>

</body>

</html>

标签：Flex Box入门教程 Flex布局设计教程 flexbox在线视频教程
上一篇：Flex Box页面布局实战课程-圣杯布局
下一篇：Flex Box页面布局实战课程-百分比布局

相关文章

相关评论

本类更新

本类推荐

本类排行

咨询QQ/微信：45157718