📲题目要求
📲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 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
| space-around | 均匀排列每个元素，每个元素周围分配相同的空间 |
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式
| center | 元素位于容器的中心。 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度） |
如果是水平居中用justify-content: center;来设置📲实现效果
