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标签
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/

步骤

  1. 引入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>
  1. 添加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之外
  1. 初始化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>
  1. 在Silde1到Slide3部分添加图片

效果

B站实战第三天的更多相关文章

  1. 非阻塞同步算法实战（三）－LatestResultsProvider

    本人是本文的作者,首发于ifeve(非阻塞同步算法实战(三)-LatestResultsProvider) 前言 阅读本文前,需要读者对happens-before比较熟悉,了解非阻塞同步的一些基本概 ...

  2. Selenium Web 自动化 - 项目实战（三）

    Selenium Web 自动化 - 项目实战(三) 2016-08-10 目录 1 关键字驱动概述2 框架更改总览3 框架更改详解  3.1 解析新增页面目录  3.2 解析新增测试用例目录  3. ...

  3. python机器学习实战（三）

    python机器学习实战(三) 版权声明:本文为博主原创文章,转载请指明转载地址 www.cnblogs.com/fydeblog/p/7277205.html  前言 这篇notebook是关于机器 ...

  4. Mybaits-plus实战（三）

    1. Mybaits-plus实战(三) 1.1. 特殊使用规则 1.1.1. Model逻辑删除 数据库对应实体类,继承Model类可以实现AR模式的sql语句操作,但这里需要注意的是,对逻辑删除, ...

  5. apollo在liunx环境实战（三）

    1. apollo在liunx环境实战(三) 1.1. 准备 下载apollo源码 https://github.com/ctripcorp/apollo 1.2. 创建数据库 在自己的liunx环境 ...

  6. OAuth2简易实战（三）-JWT

    1. OAuth2简易实战(三)-JWT 1.1. 与OAuth2授权码模式差别 授权服务器代码修改 @Configuration @EnableAuthorizationServer public ...

  7. Vue2+VueRouter2+webpack 构建项目实战（三）：配置路由，运行页面

    制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开 ...

  8. WCF开发实战系列三：自运行WCF服务

    WCF开发实战系列三:自运行WCF服务 (原创:灰灰虫的家 http://hi.baidu.com/grayworm)上一篇文章中我们建立了一个WCF服务站点,为WCF服务库运行提供WEB支持,我们把 ...

  9. Spring Boot 揭秘与实战（三） 日志框架篇 - 如何快速集成日志系统

    文章目录 1. 默认的日志框架 logback2. 常用的日志框架 log4j 1.1. 日志级别 1.2. 日志文件 3. 源代码 Java 有很多日志系统,例如,Java Util Logging ...

随机推荐

  1. ⼩程序中⽀持es7的async语法

    ⼩程序中⽀持es7的async语法 es7的 async 号称是解决回调的最终⽅案 在⼩程序的开发⼯具中,勾选 es6转es5语法 下载 facebook 的 regenerator 库中的 rege ...

  2. 一.Memcached企业服务

    1.Memcached是什么,有什么作用?            Memcached是一个开源的.高性能的内存缓存软件,从名称上看Mem就是内存的意思,而Cache就是缓存的意思.          ...

  3. spark docker java kubernetes 获取cpu内核/线程数问题

    升级服务从spark2.3.0-hadoop2.8 至 spark2.4.0 hadoop3.0 一日后导致spark streaming kafka消费数据积压 服务不是传统的部署在yarn上,而是 ...

  4. python学习——函数返回值及递归

    返回值 return语句是从python 函数返回一个值,在讲到定义函数的时候有讲过,每个函数都要有一个返回值.Python中的return语句有什么作用,今天小编就依目前所了解的讲解一下.pytho ...

  5. [HDU多校]Ridiculous Netizens

    [HDU多校]Ridiculous Netizens 点分治 分成两个部分:对某一点P,连通块经过P或不经过P． 经过P采用树形依赖背包 不经过P的部分递归计算 树型依赖背包 v点必须由其父亲u点转移 ...

  6. 面向VBA一维数组的实用自定义函数

    UDF.dll包含了一组实用的用户自定义函数,提供了数组处理的快速方法,可以在VB6.VBS.32位VBA中调用. 看完如下的实例代码,就明白它的用处了. Private MyUDF As New U ...

  7. Pickle的简单使用

    单词Pickle的中文意思是“泡菜.腌菜.菜酱”的意思,Pickle是Python的一个包,主要功能是对数据进行序列化和反序列化.那么什么叫序列化和反序列化呢? 其序列化过程就是把数据转化成二进制数据 ...

  8. USB Reverse Tether (a dirty solution)

    Tether your android phone to your PC using USB cable could share your 3g Internet connection with PC ...

  9. Java基础的坑

    仍会出现NPE 需要改成

  10. ModelSerializer补充及ListSerializer

    整体单改 路由层.模型层.序列化层不需要做修改,只需要处理视图层:views.py """ 1) 单整体改,说明前台要提供修改的数据,那么数据就需要校验,校验的数据应该在 ...