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. windows Apache 配置支持HTTPS的SSL证书

    在设置Apache + SSL之前, 需要做: 安装Apache, 下载安装Apache时请下载带有ssl版本的Apache安装程序. 并且ssl需要的文件在如下的位置: [Apache安装目录]/m ...

  2. GO、 智能合约、cannot use transactionRecordId + strconv.Itoa(id) (type string) as type byte in append

    1.报错详情 2.在写fabric go智能合约发送的错误,像我这样的新手就是踩坑踩坑踩坑 3.下面是代码片段 4.研究了一下append用法.也看了下GO语言官网文章: var test_str [ ...

  3. debian8.8安装谷歌浏览器

    第一步:下载: wget https://dl.google.com/linux/direct/google-chrome-stable_current_i386.deb   //32位 wget h ...

  4. 如何找到我的Python site-packages目录的位置？

    来源:广州SEO 我如何找到我的site-packages目录的位置? #1楼 这对我有用: python -m site --user-site #2楼 从“如何安装Django”文档 (尽管这不仅 ...

  5. flash插件的安装——网页视频无法播放

    1.从官网下载Adobe flash player 安装包.官方网址:https://get.adobe.com/cn/flashplayer/ 或者从我的网盘下载:链接:https://pan.ba ...

  6. SLAM——视觉里程计（一）feature

    从现在开始下面两篇文章来介绍SLAM中的视觉里程计(Visual Odometry).这个是我们正式进入SLAM工程的第一步,而之前介绍的更多的是一些基础理论.视觉里程计完成的事情是视觉里程计VO的目 ...

  7. C++ sizeof 运算符

    sizeof 是一个关键字,它是一个编译时运算符,用于判断变量或数据类型的字节大小. sizeof 运算符可用于获取类.结构.共用体和其他用户自定义数据类型的大小. 使用 sizeof 的语法如下: ...

  8. Sam format

    reference:https://davetang.org/wiki/tiki-index.php?page=SAM @SQ SN:contig1 LN:9401 (序列ID及长度) 参考序列名,这 ...

  9. VB.Net 正则表达式测试器

    VB.Net制作的正则表达式工具,查询结果可以导出到Excel. 界面截图: 软件下载 Regexp.rar

  10. 82）PHP，基本框架类步骤

    framework.class.php 基本代码展示: <?php /** * 框架初始化功能类 */ class Framework { /** * 入口 * 里面的static和self是一 ...