<!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>
联系客服