B站实战第三天

B站实战第三天

用了两天多的时间才把B站页面的头部写完，今天来写头部下面的导航栏部分和轮播图一些模块。

因为还没学js，轮播图部分用swiper来实现。

今天首先复习的知识点是弹性盒模型。

弹性盒模型

1. display: flex;

父元素控制子元素的排列布局方案

从左往右，只占一行，子元素具有弹性，当空间不足，就会均匀压缩

2. display:inline-flex

对外是inline元素，对内是flex元素

就比如display:inline-block,对外是inline,对内是block。

第一个任务完成如下效果

结构分析

1. nav标签，横行占满浏览器
2. content包含所有内容，在浏览器中间
3. ul>li 标签放每一个小nav，最右侧是一个盒子放gif图片
4. ul是弹性盒模型，里面的li均匀分布
5. 小nav分为两种，一种用伪元素before写999+，另一种加背景icon
6. 小nav里面的文字用span标签

CSS部分

第二个效果

css部分

轮播图部分（swiper实现）

swiper网址 http://www.swiper.com.cn/

步骤

1. 引入swiper的文件，推荐用CDN服务，添加css文件和js文件

1. 添加HTML内容

1. 初始化Swiper，最好挨着标签

1. 在Silde1到Slide3部分添加图片

效果