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. Anaconda环境安装

    Anaconda环境安装 一.Anaconda Anaconda是Python的一个开源的发行版本,里面包含了很多科学计算相关的包,它和Python的关系就像linux系统中centos和Ubuntu ...

  2. 【iOS学习笔记】UITextField中的输入检测——限制只能输入数字和小数点

    最近趁着放假时间,在看The Big Nerd Ranch的iOS编程,想着重新复习一遍iOS开发的基础知识 于是从这一篇开始记录一些学习过程中遇到的小问题 书中第四章有一个温度转换的app实现,整体 ...

  3. 吴裕雄--天生自然 PYTHON3开发学习：循环语句

    n = 100 sum = 0 counter = 1 while counter <= n: sum = sum + counter counter += 1 print("1 到 ...

  4. Error: Invalid or corrupt jarfile SpringBootTemplate.jar

    当在尝试将SpringBoot打包成为Jar文件, 丢到linux服务器去运行的时候, 尝试在windows自带的CMD窗口命令行中运行jar文件的时候, 遇到了这样的问题. 错误的意思是: 无效 或 ...

  5. shell_分析服务器日志

    1.查看有多少个IP访问: awk '{print $1}' log_file|sort|uniq|wc -l 2.查看某一个页面被访问的次数 grep "/index.php" ...

  6. 分享一个腾讯域名拦截检测api

    接口地址:https://api.oioweb.cn/api/ymjc.php 返回格式:json 请求方式:get 调用示例:https://api.oioweb.cn/api/ymjc.php?u ...

  7. winform显示word、ppt和pdf，用一个控件显示

    思路:都以pdf的格式展示,防止文件拷贝,所以要把word和ppt转换为pdf:展示用第三方组件O2S.Components.PDFView4NET.dll,破解版的下载链接:https://pan. ...

  8. set|lambda|reduce

    #!/usr/bin/python a=set([i for i in range(4,8)]) b=set([i for i in range(5,12)]) c= sorted(a & b ...

  9. 基于TCP的大文件发送、UDP、socketserver

    基于TCP的大文件发送 #server服务端 import struct import json import os import socket server = socket.socket() # ...

  10. Java && Python 算法面试常用类以及方法总结

    数据结构 逻辑结构上: 包括集合,线性结构,非线性结构. 存储结构: 顺序存储,链式存储,索引存储,散列存储. Java 常见数据结构 大专栏  Java && Python 算法面试 ...