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. spring 事物面试题

    1.spring 事物管理器中事物传播机制 2.spring中事物的隔离级别 读未提交-事物未提交,另一个事物可以读取到,脏读 读已提交-事物已提交,先前读取的数据与后来读取的数据不同,不可重复读 可 ...

  2. 帝国CMS7.5后台美化模板 后台风格修改 帝国CMS后台模板

    都知道帝国CMS功能强悍,生成静态html也非常好用.可是有时候他的后台样式,丑的让你不想用,dede呢,漏洞太多,PHPCMS好看,可是门槛要求高,你会写PHP才行. 帝国CMS后台美化模板:全面美 ...

  3. Windows10配置Jmeter环境

    注:在安装Jmeter之前,请先检查下电脑有没有装JDK:[Win+R]然后输入cmd->进入命令行界面,输入java -version 出现以下信息就是此电脑已安装了JDK.由于jmeter要 ...

  4. 致 Python 初学者们！

    ​ 前言 在 Python 进阶的过程中,相信很多同学应该大致上学习了很多 Python 的基础知识,也正在努力成长.在此期间,一定遇到了很多的困惑,对未来的学习方向感到迷茫.我非常理解你们所面临的处 ...

  5. drf中的jwt使用与手动签发token、校验用户

    jwt认证 1)session存储token,需要数据库参与,耗服务器资源.低效2)缓存存token,需要缓存参与,高效,不易集群3)客户端存token,服务器存签发与交易token的算法,高效,易集 ...

  6. JS实现遮罩层

    /* * 显示loading遮罩层 */ function loading() { var mask_bg = document.createElement("div"); mas ...

  7. MFC的程序，不想显示窗口，任务栏里也不显示

    在dialog的oninitdialog里设置如下属性,很简单,网上一些乱七八糟的做法,一行代码就能搞定啊 SetWindowPos(&CWnd::wndNoTopMost,0,0,0,0,S ...

  8. trie（字典树）原理及C++代码实现

    字典树,又称前缀树,是用于存储大量字符串或类似数据的数据结构. 它的原理是利用相同前缀来减少查询字符串的时间. 不同于BST把关键字保存在本结点中,TRIE可以想象成把关键字和下一个结点的指针绑定,事 ...

  9. CSS样式表---------第三章：样式属性

    三.样式属性 1.背景与前景 background-color:#90; ------------背景色,样式表优先级高. background-image:url(路径)-------------- ...

  10. android studio 通过界面快速查看md5

    https://www.jianshu.com/p/989c0be557f0