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; }
/*没有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; }
|
第二个效果
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;/*根据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文件
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部分添加图片
效果
最新文章
- UNITY和图片像素的换算
- BFC的布局规则以及触发条件
- Visual Studio 2013 Web开发
- 利用epoll写一个";迷你";的网络事件库
- 每日一九度之 题目1030:毕业bg
- Using Pre-Form Trigger In Oracle Forms
- 关于SharePoint REST中的授权的研究
- Codeforces 558E A Simple Task
- PHP页面间的参数传递
- Docker容器中安装vim
- ES6 块级作用域
- zabbix系列 ~ linux监控相关
- 【BZOJ】 Hash Killer I II III
- 全国绿色计算大赛 模拟赛第一阶段(C++)第1关:求和
- PAT 甲级 1015 Reversible Primes(20)
- 【译】第十一篇 SQL Server代理维护计划
- 自动打怪 c#
- 【Android】11.6 Fragments基本用法示例
- 【3】【MOOC】Python游戏开发入门-北京理工大学【第三部分-游戏开发之机制(事件处理机制)】
- 深入浅出CSS(一):line-height与vertical-align的性质
热门文章
- bzoj3218 a+b Problem(最小割+主席树优化建边)
- VMware Horizon view 7安装视频教程
- Linux分区挂载
- 如何动态调用WebService
- screen 用法
- JdbcRDD连接MySQL
- 字符串常用方法总结与StringBuffer基础
- Linux基础篇七:Linux的命令执行
- 吴裕雄--天生自然python学习笔记:python 用pygame模块制作 MP3 音乐播放器
- Docker系列四: 使用UI管理docker容器