直播平台源代码,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移动端设置底部导航栏,更多内容欢迎关注之后的文章