vh 存在兼容性问题，不建议使用
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,ur-scalable=no,maximum-scale=1,minimum-scale=1"> <title>document</ti胆碱性荨麻疹症状tle> <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 chart="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,ur-scalable=no,maximum-scale=1,minimum-scale=1"> <title>docu办公室保洁员ment</title> <link rel="stylesheet" href="font/iconfont.css"> &l司马光是哪个朝代的t;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> <padvice的用法>适用人群：没有任何前端基础的小白</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>
本文发布于:2023-04-07 08:51:40，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/963f3383e8251d358899e4a6d00a8ee5.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：flex布局实例–实现底部导航.doc
本文 PDF 下载地址：flex布局实例–实现底部导航.pdf
| 留言与评论（共有 0 条评论） |
