copy腾讯官网的收获总结

使用bootstrap制作响应式导航栏

首先安装jquery，因为bootstrap是依赖于jQuery的

npm install jquery --save-dev

安装完成以后修改 build 文件下的 webpack.base.conf.js 文件，在module.exports 中加入下面代码

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    })
  ]

修改 module.exports 中 resolve 下的 alias：

alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }

更改为：

alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'jquery': "jquery/src/jquery"
    }

然后在 main.js 中引入 jquery

import $ from 'jquery'

之后 引入bootstarp，在官网下载之后把下载的 bootstarp 的 css、font、js 导入到项目 src/assets 目录
在 main.js 中直接引入 bootstarp：

import './assets/css/bootstrap.min.css'
import './assets/js/bootstrap.min'

之后新建一个项目，加入以下代码便可实现

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">HAICHUANG</a>
  <button class="navbar-toggler" type="button" @click="changeBg" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      </ul>
  </div>
</nav>

文字向上翻切换文字

先让文字居中于视频中间，再将轮播的图片分别放置在div之间。设置一下三个框的高度与外面的ifShow的div高度相同，当溢出框的时候选择hidden，对class="floatleft"的span设置动画，一直线性循环并且在间隔时间内向上移动，例如0-18的时候是暂停的，18-20的时候向上移动

 <div class="title">
        <span class="hide">
        <div class="ifShow">只争朝夕 不负
          <span class="floatleft">
          <div class="titleWords1 titleWords">韶华</div>
          <div class="titleWords2 titleWords">年华</div>
          <div class="titleWords3 titleWords">青春</div>
          </span>
        </div>
        </span>
        </div>

/ 文字切换动画
ul,li{ margin:0; padding:0; }
li{ list-style:none; }
// 视频上的文字
.title{
  font-family: 'selfChange';
  display: inline;
  position: absolute;
  text-align: center;
  font-size:400%;
  left:calc((100vw - 535px)/2);
  right:30vw;
  color:white;
  opacity: .8;
  z-index: 200;
}
// 设置视频上的文字，当它超出框的时候隐藏
.ifShow{
  height:96px;
  width:535px;
  overflow: hidden;
}
.floatleft{
  float:right;
  width: 130px;
}
.titleWords{
  float: none !important;
  font-family: 'selfChange' !important; position:relative; animation: moveUp 2s 0.3s infinite; -webkit-animation: moveUp 8s 0.6s infinite; }
@keyframes moveUp
{
0% {top:0px;}
18% {top:0px;}
20% {top:-96px;}
38% {top:-96px;}
40% {top:-192px;}
58% {top:-192px;}
60% {top:-96px;}
78% {top:-96px;}
80% {top:-192px;}
98% {top:-192px;}
}
// 设置文字
.titleWords{
  display: inline-table !important;
  left: -17px;
}

悬浮之后出现背景颜色并且字体有下划线

在外面嵌套一个大的div，之后里面嵌套ul标签，ul里的分别有三个li标签,设置每个li的宽高，之后让li里面的img宽高都等于100%，之后设置li a:after样式，让设置背景图片为蓝色，并且设置一个出现效果透明度变化过程transition: opacity 0.3s ease-out;下划线需要设置它从哪个地方出现transform: translate(-50%,0)，transition: border-bottom 0.3s ease-out;,先设置opcity为0，在a:hover:after{opacity:1;}

 <div class="detailsShow
        <ul class="detailList">
          <li>
            <a href="javascript:;">
              <p>公司简介</p>
              <img src="./img/3.jpg" alt="公司简介"/>
            </a>
          </li>
          <li>
            <a href="javascript:;">
              <p>企业文化</p>
              <img src="./img/2.jpg" alt="企业文化"/>
            </a>
          </li>
          <li class="last">
            <a href="javascript:;">
              <p>办公地点</p>
              <img src="./img/4.jpg" alt="办公地点"/>
            </a>
          </li>
        </ul>
      </div>

.detailsShow{ display:block; width:100vw;  height: 250px;}
.detailList{ display:block; height: 250px;margin-left: calc((40vw - 60px)/2);}
.detailList li{ display:inline-block; float: left; height:15vw; width:20vw; text-align: center; margin-right:20px; position: relative; overflow: hidden;}
.detailList li a{ display:block; height: 100%; width: 100%;}
.detailList li a:after{ display:block; content: ""; height: 100%; width: 100%; background:rgba(0,82,217,0.7); position: absolute; left: 0px; top: 0px; z-index: 2; opacity: 0; transition: opacity 0.3s ease-out;}
.detailList li p{ display:block; float: left; font-size: 30px; height: 40px; text-align: center; position: absolute; left: 50%; top: 50%; margin-top: -20px; z-index: 3; color: #fff; border-bottom: 1px solid rgba(255,255,255,0); transform: translate(-50%,0); padding-bottom: 3px; transition: border-bottom 0.3s ease-out;font-family: 'TencentSansw7';padding-bottom: 5px;-webkit-transition: width 1s linear;}
.detailList li p:after{
	content: ' ';
	width: 0;
	height: 2px;
	background: #fff;
	bottom: -2px;
	left: 0;
	position: absolute;
	opacity: 0;
	-webkit-transition: all 0.2s linear;
}
.detailList li img{ display:block; height:100%;; width: 100%; position: absolute; left: 0px; top: 0px; z-index: 1; transform:scale(1); transition: transform 0.3s ease-out;}
.detailList li.last{ margin-right:0px;}
.detailList li a:hover:after{opacity:1;}
.detailList li a:hover p:after{
	opacity: 1;
	left: 0;
	width: 100%;
}
.detailList li a:hover img{ transform:scale(1.024);}

连接板块，鼠标悬停之后显示蓝色边框并且整体文字向右移动

1.整体思路
首先定义最外层的div，设置它的宽度为100vw，height为768px，高度可以自定义设置。
接着定义两个div，一个是左边的文字板块，一个是右边的图片板块，分别设置两个div的宽度，用百分比表示，两个宽度加起来的100%便可（图中左边为36%，右边64%），高度为100%
之后对两个div的内部进行处理
左边：使用ul标签无序列表，写出三个li，每个li的样式都是一样的，在li标签里面嵌套一个a标签（点击之后可以跳转到对应页面），之后用h3与p标签书写标题与段落。还有一个i标签（在鼠标悬停出现class=current样式）设置透明度为0，蓝色边框是设置在标题h3:after里面,设置宽度高度，先设置透明度为0，当悬停之后让蓝色边框与箭头都显示(opcity:1)。鼠标悬停之后标题与段落都会向右移动，例如开始设置的left为50%，鼠标悬停后left为60%，并且设置transition: margin-left 0.3s ease-out;样式发生变化会触发。

<div class="linkContainer">
        <div class="linkLeftContainer">
          <ul class="linkLeftContainerlist">
            <li class="list_item_1 " v-on:mouseover="show($event)">
              <a class="block-link" href="javascript:;">
                <h3 class="title">连接用户与生活</h3>
                <p class="txt">让生活更便捷更多彩</p>
                <i class="icon icon_arrow_r arrow_rHide"></i></a>
            </li>
            <li class="list_item_2" data-num="3">
              <a class="block-link" href="javascript:;"><h3
                  class="title">连接企业与科技</h3>
                <p class="txt">数字化助手，助力产业升级</p>
                <i class="icon icon_arrow_r arrow_rHide"></i></a>
            </li>
            <li class="list_item_3" data-num="3">
              <a class="block-link" href="javascript:;"><h3
                  class="title">连接现在与未来</h3>
                <p class="txt">探索面向未来的创新科技</p>
                <i class="icon icon_arrow_r arrow_rHide"></i></a>
            </li>
          </ul>
        </div>

// 左边
    .linkLeftContainer{
        position: relative;
        width: 36%;
        height: 100%;
        float: left;
        .linkLeftContainerlist{
        height: 100%;
        width:100%;
    }
    .linkLeftContainerlist li{
        height: 33.3%;
        width: 100%;
        display: block;
        position: relative;
        a{
              text-decoration:none;
              color: #fff;
        }
        .title{
            position: absolute;
            height: 50px;
            // background-color: powderblue;
            top:50%;
            left:40%;
            font-size: 30px;
            margin-top: -4.9%;
            right:2px;
            transition: margin-left 0.3s ease-out;
        }
        .title:after{
            content:"";
            position: absolute;
            width: 6px;
            height: 70px;
            left: -30%;
            top: 20%;
            background-color: #1e52d8;
            opacity: 0;
        }       
        .txt{
            position: absolute;
            height:30px;
            // background-color: powderblue;
            top:50%;
            left:40%;
            font-size: 16px;
            margin-top: 5.8%;
            right: 0px;
            transition: margin-left 0.3s ease-out;
        }
        .icon{
            position: absolute;
            // background-color: cadetblue;
            background: url('./img/17.png') no-repeat ;
            background-size: 100% 100%;
            height:16px;
            width:54px;
            left:40%;
            top: 75%;
            transition: margin-left 0.3s ease-out;
            opacity: 0;
        }
    }
    .linkLeftContainerlist li.current .title:after{
        opacity: 1;
    }
    .linkLeftContainerlist li.current .title{ margin-left: 5%; }
    .linkLeftContainerlist li.current .txt{ margin-left:5%; }
    .linkLeftContainerlist li.current .icon{ margin-left:5%;opacity:1; }
    }

右边：也是类似想法，定义一个外层div[class=“link_contentRight”]（height:100%,width:645），.link_contentRight里面嵌套着三个子div(width:100%，height：100%),之后子div里面有ul，分别的四个li，但第二个子div只有三个li,li里面的内容也跟左边的类似

 <li class="item_1"  v-on:mouseover="showUp($event)">
                <a href="javascript:;">
                  <div class="detail">
                    <h4 class="title">通信与社交</h4>
                    <p class="txt">连接人与人，提供功能丰富的即时通信和社交平台，让沟通更便捷。</p>
                    <i class="icon icon_arrow_r arrow_rHide"></i>
                  </div>
                </a>
              </li>

之后对样式进行处理，使用的是less

//右边
    .link_contentRight{
        width: 64%;
        height: 100%;
        float: left;
        .con{
          width: 100%;
          height: 100%;
          display: none;
        }
          .link_list{
              width: 100%;
              height: 100%;
              list-style: none;
            li{ 
              display: block;
              height: 50%;
              width: 50%;
              float: left;
              overflow: hidden;
              a{
              display: block;
              width: 100%;
              height: 100%;
              position: relative;
              div{
                position: absolute;
                width: 100%;
                height: 100%;
                transition: all 0.3s ease-out;
                top: 90%;
                color: #fff;
              }
              .icon{
              position: absolute;
              visibility: hidden;
              height: 14px;
              width:31px;
              background: url('./img/18.png') no-repeat 0 0;background-size: 100% 100%;
              top: -2%;
              left:80%;
              transition: left 0.3s ease-out;
            }
              }
            }
            li.showUp div{
              top:70%
            }
            li.showUp .icon{
              visibility:visible;
              left:85%;
              position: absolute;
              height: 14px;
              width:31px;
              background: url('./img/18.png') no-repeat 0 0;background-size: 100% 100%;
              top: -2%;
            }
          }
    }
   //引入图片
 .linkArea .con_1 .link_list li.item_1{ background: url('./img/7.jpg') no-repeat;background-size: 100% 100%;}
.linkArea .con_1 .link_list li.item_2{ background: url('./img/8.jpg') no-repeat;background-size: 100% 100%; }
.linkArea .con_1 .link_list li.item_3{ background: url('./img/9.jpg') no-repeat ;background-size: 100% 100%; }
.linkArea .con_1 .link_list li.item_4{ background: url('./img/10.jpg') no-repeat;background-size: 100% 100%; }
.linkArea .con_2 .link_list li.item_1{ background: url('./img/11.jpg') no-repeat;background-size: 100% 100%; }
.linkArea .con_2 .link_list li.item_2{ background: url('./img/12.jpg') no-repeat;background-size: 100% 100%; }
.linkArea .con_2 .link_list li.item_3 a{width: 100%;}
.linkArea .con_2 .link_list li.item_3{ background: url('./img/15.jpg') no-repeat;background-size: 100% 100%;width: 100%;}
.linkArea .con_3 .link_list li.item_1{ background: url('./img/16.jpg') no-repeat ;background-size: 100% 100%; }
.linkArea .con_3 .link_list li.item_2{ background: url('./img/36.jpg') no-repeat ;background-size: 100% 100%; }
.linkArea .con_3 .link_list li.item_3{ background: url('./img/37.jpg') no-repeat ;background-size: 100% 100%; }
.linkArea .con_3 .link_list li.item_4{ background: url('./img/38.jpg') no-repeat ;background-size: 100% 100%; }
//重点，当左边哪一个li有current样式的时候，右边对应的div就显示
//显示第三个的div
.con_3{
  display: block  !important;
}

轮播图责任板块

这一个板块也是分成了两个部分，左边和右边的，右边的就是设置一下文字样式，距离等
左边：也是使用ul无序列表，不同的是在这一板块看起来像轮播图，实际的原理很简单。ul里面有四个li标签

每个li标签里面的内容都是类似的

设置每个li标签=ul标签的宽高，这样后面三个li标签就会溢出，所以设置overflow:hidden
自定义两个前进后退按钮在图片上的位置
设置好后你会发现这个div是长方形的，跟图片中的不规则图片不一样，这里是使用一张透明的图片放置在属性为.resp_left的div的右边，挡住了部分区域，导致看起来就是个不规则图形

之后自动轮播以及点击前进后退按钮样式变化可以通过js来控制

总结：大部分都是类似的，使用ul无序列表，对li标签进行处理，开始设置opacity为0或者display为none，之后在li标签拥有某一个属性的时候，opacity变成1或者display为block
例如