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

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

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

二、css代码

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

以上就是直播平台源代码，css移动端设置底部导航栏，更多内容欢迎关注之后的文章

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

猜你喜欢