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. vi——终端中的编辑器

    vi--终端中的编辑器 目标 vi 简介 打开和新建文件 三种工作模式 常用命令 分屏命令 常用命令速查图 01. vi 简介 1.1 学习 vi 的目的 在工作中,要对 服务器 上的文件进行 简单 ...

  2. iTOP-4418开发板Qt Creator 编译注意事项

    用“Qt Creator3.2.2”打开“qt4.7.1”环境下的工程文件可能会提示版本太旧.环境不匹 配导致程序无法编译,解决办法:建立新的工程把测试程序代码粘贴上去即可(界面需要自己 添加). 在 ...

  3. 4.windows-oracle实战第四课 -表的查询

    所有语句均为安装oracle数据库后scott的默认表emp,dept等表 1.自己插入自己:insert into 表名 (字段)select *from 表名 2.去除重复行: select di ...

  4. Linux设置环境变量PATH路径的两种方法

    echo 'export dataPath=$HOME/data/pre' >> ~/.bash_profile 路径即刻生效: . .bash_profile 或 source .bas ...

  5. 吴裕雄--天生自然 pythonTensorFlow图形数据处理：输入文件队列

    import tensorflow as tf # 1. 生成文件存储样例数据. def _int64_feature(value): return tf.train.Feature(int64_li ...

  6. 吴裕雄--天生自然 PYTHON3开发学习：输入和输出

    str = input("请输入:"); print ("你输入的内容是: ", str) # 打开一个文件 f = open("/tmp/foo.t ...

  7. Python语言学习前提：Pycharm的使用

    一.Pycharm的使用 1.点击Pycharm的图标 2.点击首页Create New Project > 在弹出的页面点击Pure Python 3.选择项目文件存放的位置,选择完成之后点击 ...

  8. [ZJOI2019]语言（树链剖分+动态开点线段树+启发式合并）

    首先,对于从每个点出发的路径,答案一定是过这个点的路径所覆盖的点数.然后可以做树上差分,对每个点记录路径产生总贡献,然后做一个树剖维护,对每个点维护一个动态开点线段树.最后再从根节点开始做一遍dfs, ...

  9. SAP PM：通过接口获取设备资产基本信息

    在SAP工厂维护模块中,给设备贴二维码标签是现在越来越流行的做法.因此通过扫描二维码获取设备资产信息是个非常基本的需求. 以下实例简单实现了,给SAP RFC传入设备编码获取设备资产基本信息的需求. ...

  10. MTSP问题

    问题描述:m个旅行商去旅游 n个城市,规定都必须从同一个出发点出发,而且返回原出发点,需要将所有的城市遍历完毕,每个城市只能游历一次,但是为了路径最短可以路过这个城市多次.这个就是多旅行商问题.是在T ...