打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
flex布局实例--实现底部导航
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"><title>Document</title><link rel="stylesheet" href="font/iconfont.css"><style>*{margin:0;padding:0;box-sizing:border-box;}body{background-color: pink;}ul{list-style: none;}a{text-decoration: none;color:#333;}.footer{width:100%;height:80px;position: fixed;background:lightblue;bottom:0;display: flex;}.footer li{flex:1;/*平分空间*/}         .footer li a{height:100%;display: flex;flex-direction:column;justify-content: center;/*水平居中*/align-items:center;/*垂直居中*/}</style></head><body><ul class="footer"><li><a href="#"><i class="iconfont icon-gouwuche"></i><span>购物车</span></a></li><li><a href="#"><i class="iconfont icon-file"></i><span>文件</span></a></li><li><a href="#"><i class="iconfont icon-saomiao"></i><span>扫描</span></a></li><li><a href="#"><i class="iconfont icon-xialajiantou"></i><span>箭头</span></a></li></ul></body></html>

卡片排列实例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"><title>Document</title><link rel="stylesheet" href="font/iconfont.css"><style>*{margin:0;padding:0;box-sizing:border-box;}body{background-color: pink;font-size:12px;}ul{list-style: none;}a{text-decoration: none;color:#333;}.container{width:100%;padding:20px;display: flex;flex-wrap:wrap;justify-content: space-around;}.item{width:45%;height:130px;background:lightblue;border-radius:5px;margin-bottom:20px;display: flex;justify-content: space-around;}.left{display: flex;flex-direction:column;justify-content:space-around;}.right{display: flex;align-items:center;}button{background-color: orange;color:#fff;padding:10px;border:0;border-radius:5px;}</style></head><body><div class="container"><div class="item"><div class="left"><p>前端小白入门手册</p><p>适用人群:没有任何前端基础的小白</p><p>费用:¥999</p></div><div class="right"><button>加入购物车</button></div></div><div class="item"><div class="left"><p>前端小白入门手册</p><p>适用人群:没有任何前端基础的小白</p><p>费用:¥999</p></div><div class="right"><button>加入购物车</button></div></div><div class="item"><div class="left"><p>前端小白入门手册</p><p>适用人群:没有任何前端基础的小白</p><p>费用:¥999</p></div><div class="right"><button>加入购物车</button></div></div><div class="item"><div class="left"><p>前端小白入门手册</p><p>适用人群:没有任何前端基础的小白</p><p>费用:¥999</p></div><div class="right"><button>加入购物车</button></div></div></div></body></html>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
移动Web开发必备基础(flex容器属性)
移动端常用单位(%和rem)
010_品优购01
用flex布局实现栅格系统
Flex实现栅格布局
flew弹性布局
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服