直播平台源代码，css移动端设置底部导航栏

一、html代码

<!DOCTYPE html><br><html><br><head><br>    <title>第五题-移动端底部导航</title><br>    <meta charset="utf-8"><br>    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><br>    <link rel="stylesheet" href="css/style.css"><br></head><br> <br><body><br>    <footer><br>        <div class="home"><i></i>主页</div><br>        <div class="order"><i></i>订单</div><br>        <div class="shop"><i></i>购物车</div><br>        <div class="user"><i></i>我的</div><br>    </footer><br></body><br> <br></html>

二、css代码

/*自定义图标字体*/<br>/* ____(1)_____ { */<br>    @font-face{<br>  font-family: 'iconfont';<br>  src: url('../font/iconfont.eot');<br>  src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),<br>      url('../font/iconfont.woff2') format('woff2'),<br>      url('../font/iconfont.woff') format('woff'),<br>      url('../font/iconfont.ttf') format('truetype'),<br>      url('../font/iconfont.svg#iconfont') format('svg');<br>}<br>body{<br>    margin:0;<br>    padding:0;<br>}<br>footer{<br>    /* _____(2)_____;设置弹性盒子 */<br>    /* _____(3)_______;水平对齐，两边间距是中间间距的一半 */<br>    /* _____(4)______;垂直居中对齐 */<br>    display: flex;/*设置弹性盒子*/<br>    justify-content: space-around;/*水平对齐，两边间距是中间间距的一半*/<br>    align-items: center;/* 垂直居中对齐 */<br>    position: fixed;<br>    bottom:0;<br>    left:50%;<br>    transform: translateX(-50%);<br>    width: 100%;<br>    height: 50px;<br>    border-top:1px solid #ccc;<br>    max-width: 760px;<br>    font-size: 12px;<br>    text-align: center;<br>}<br>footer div{<br>    width: 80px;<br>}<br>footer div i{<br>    /* ____(5)_______;设置资自定义图标字体 */<br>   font-family: iconfont;/*设置资自定义图标字体*/<br>    font-size: 18px;<br>    font-style: normal;<br>    display: block;<br>}<br>footer .home i:before{<br>    content:"\e6ce";<br>}<br>footer .order i:before{<br>    content:"\e67c";<br>}<br>footer .shop i:before{<br>    content:"\e60c";<br>}<br>footer .user i:before{<br>    content:"\e66e";<br>}