直播平臺原始碼，css移動端設定底部導航欄

zhibo系統開發發表於2022-07-01
原始碼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移動端設定底部導航欄，更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69978258/viewspace-2903825/，如需轉載，請註明出處，否則將追究法律責任。

相關文章