B站实战第三天
用了两天多的时间才把B站页面的头部写完，今天来写头部下面的导航栏部分和轮播图一些模块。
因为还没学js，轮播图部分用swiper来实现。
今天首先复习的知识点是弹性盒模型。
弹性盒模型
1. display: flex;
父元素控制子元素的排列布局方案
从左往右，只占一行，子元素具有弹性，当空间不足，就会均匀压缩
2. display:inline-flex
对外是inline元素，对内是flex元素
就比如display:inline-block,对外是inline,对内是block。
第一个任务完成如下效果
结构分析
- nav标签，横行占满浏览器
- content包含所有内容，在浏览器中间
- ul>li 标签放每一个小nav，最右侧是一个盒子放gif图片
- ul是弹性盒模型，里面的li均匀分布
- 小nav分为两种，一种用伪元素before写999+，另一种加背景icon
- 小nav里面的文字用span标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<nav class='nav'>
<div class="content">
<ul class="nav-info fl">
<li class='icon main-page'>
<span class='nav-name'>首页</span>
</li>
<li class='animation'></li>
<li class='TV'> </li>
<li class= 'China'></li>
<li class='music'></li>
<li class='dance'></li>
<li class='game'></li>
<li class="tech"></li>
<li class="living"></li>
<li class='odd'></li>
<li class= 'style'></li>
<li class="adver"></li>
<li class='amuse'></li>
<li class="camera"></li>
<li class='icon column'></li>
<li class='icon square'></li>
<li class='icon live'></li>
<li class='icon black'></li>
</ul>
<div class="gif fl"></div>
</div>
</nav>
|
CSS部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
#header .nav .content{
height: 60px;
width: 1161px;
margin: 0 auto;
}
#header .nav .nav-info{
display: flex;
width: 1076px;
height: 60px;
font-size: 12px;
transform: translateX(-18px);
}
#header .nav .nav-info>li{
position: relative;
flex:auto;
}
#header .nav .nav-info>li:not(.icon):before{
position: absolute;
left: 14px;
top: 15px;
content: '999+';
padding: 2px;
background-color: #ffafc9;
border-radius: 3px;
line-height: 1;
color: #fff;
transform: scale(.8);
}
#header .nav .nav-info .main-page{
background: url('../images/icons.png') -643px -1162px;
}
#header .nav .nav-name{
display: block;
margin: 30px auto 0;
width: 40px;
text-align: center;
}
|
第二个效果
1
2
3
4
5
6
7
8
9
|
<li class='animation'>
<span class='nav-name'>动画</span>
<ul class="more">
<li><span>MAD AMV</span></li 大专栏 B站实战第三天>
<li><span>MMD 3D</span></li>
<li><span>短片 手书 配音</span></li>
<li><span>综合</span></li>
</ul>
</li>
|
css部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
header .nav .more{
position: absolute;
display: none;
width: 120px;
box-shadow: 0 1px 10px -5px #000;
background-color: #fff;
}
#header .nav .more li{
overflow: hidden;
line-height: 30px;
text-indent: 26px;
transition: 0.3s;
}
#header .nav .more li:hover{
background-color: #ccc;
text-indent: 30px;
}
#header .nav .more span{
position: relative;
}
#header .more span:before,#header .more span:after{
position: absolute;
content: '';
width: 30px;
height: 30px;
background: url('../images/icons2.png') 12px -1613px;
transition: .3s;
}
#header .more span:before{
left: -30px;
}
#header .more span:after{
right: -120px;
background: url('../images/icons2.png') 12px -1575px;
}
#header .more li:hover span:before{
left: -20px;
}
#header .more li:hover span:after{
right: -20px;
}
|
轮播图部分（swiper实现）
swiper网址 http://www.swiper.com.cn/
步骤
- 引入swiper的文件，推荐用CDN服务，添加css文件和js文件
1
2
3
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script>
|
- 添加HTML内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外
|
- 初始化Swiper，最好挨着标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
</body>
|
- 在Silde1到Slide3部分添加图片
效果
