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标签
123456789101112131415161718192021222324252627 | <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部分
1234567891011121314151617181920212223242526272829303132333435363738394041424344 | #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;}/*没有icon类名的用before伪元素写999+*/#header .nav .nav-info>li:not(.icon):before{ position: absolute;/*定位写999+的位置*/ left: 14px; top: 15px; content: '999+'; padding: 2px; background-color: #ffafc9; border-radius: 3px; line-height: 1; color: #fff; transform: scale(.8);/*整体缩小*/}/*有icon类名的加上背景图片*/#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;} |
第二个效果
123456789 | <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部分
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 | header .nav .more{ position: absolute;/*根据li定位*/ 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{/*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;}/*实现hover的动态效果*/#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文件
123 | <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内容
1234567891011121314151617 | <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，最好挨着标签
1234567891011121314151617181920212223 | <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部分添加图片
效果
来源：https://www.cnblogs.com/lijianming180/p/12099723.html