任务三 携程网移动端局部导航
任务要求
(1)新建文件2003.html,设置为移动端页面,要求320~640页面宽度。
(2)运用弹性布局和精灵图二倍图。
布局如图20.3.1所示,其CSS代码如图20.3.2所示,HTML代码如图20.3.3所示。

携程网局部导航部分

图20.3.1 携程网局部导航部分



图20.3.2 携程网局部导航 CSS代码部分

图20.3.3 携程网局部导航HTML代码
项目总结
本项目主要介绍了移动端的flex和fontawesome字体图标框架。CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时以确保元素拥有恰当的行为的布局方式。通过学习,读者明白了弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。