css移动端设置底部导航栏-阿里云开发者社区

css移动端设置底部导航栏

2022-11-07 387

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： css移动端设置底部导航栏文章学习

📲题目要求

📲html代码

<!DOCTYPE html><html><head><title>第五题-移动端底部导航</title><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><linkrel="stylesheet"href="css/style.css"></head><body><footer><divclass="home"><i></i>主页</div><divclass="order"><i></i>订单</div><divclass="shop"><i></i>购物车</div><divclass="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:1pxsolid#ccc;
max-width: 760px;
font-size: 12px;
text-align: center;
}
footerdiv{
width: 80px;
}
footerdivi{
/* ____(5)_______;设置资自定义图标字体 */font-family: iconfont;/*设置资自定义图标字体*/font-size: 18px;
font-style: normal;
display: block;
}
footer.homei:before{
content:"\e6ce";
}
footer.orderi:before{
content:"\e67c";
}
footer.shopi:before{
content:"\e60c";
}
footer.useri:before{
content:"\e66e";
}

📲题目分析

@font-face属性定义及使用说明

@font-face规则，网页设计师再也不必使用的"web-safe"的字体之一。

字体的名称，font - face规则：

font-family: myFirstFont;

字体文件包含在您的服务器上的某个地方，参考CSS：

src: url('Sansation_Light.ttf')

如果字体文件是在不同的位置，请使用完整的URL：

src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf')

弹性盒子设置flex布局即可

题目提示水平对齐，两边间距是中间间距的一半

用到justify-content 属性

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式