由于水平太菜了，跟着做案例都没做好，一堆的bug，但是不发布觉得有点可惜，就这样吧
移动端黑马面面案例
技术方案
代码规范
目录规范
蓝湖/摹客协作平台
适配方案简介
初始化文件
swiper插件使用
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>黑马面面</title><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"><!-- swiper --><link rel="stylesheet" href="./css/swiper.min.css"></head><body><section class="warp"><!-- 头部区域 --><header class="header">黑马面面</header><!-- 导航栏部分 --><nav class="nav"><a href="#" class="item"><img src="./icons/icon1.png" alt=""><span>HR面试</span></a><a href="#" class="item"><img src="./icons/icon2.png" alt=""><span>笔试</span></a><a href="#" class="item"><img src="./icons/icon3.png" alt=""><span>技术面试</span></a><a href="#" class="item"><img src="./icons/icon4.png" alt=""><span>模拟面试</span></a><a href="#" class="item"><img src="./icons/icon5.png" alt=""><span>面试技巧</span></a><a href="#" class="item"><img src="./icons/icon6.png" alt=""><span>薪资查询</span></a></nav><!-- go模块 --><section class="go"><img src="./images/go.png" alt=""></section></section><!-- 就业指导模块 --><section class="content"><!-- 头部 --><div class="con-hd"><h4><span class="icon"><img src="./icons/i2.png" alt="" /></span>就业指导</h4><a href="#" class="more">更多>></a></div><!-- 旋转木马轮播图 --><div class="get_job_focus"><!-- Swiper --> <div class="swiper-container get_job_fo"><div class="swiper-wrapper"><div class="swiper-slide"><a href="#"><img src="./images/3.jpg" alt=""></a><p>老师教你应对技巧</p></div><div class="swiper-slide"><a href="#"><img src="./images/ldh.jpg" alt=""></a><p>老师教你应对技巧</p></div><div class="swiper-slide"><a href="#"><img src="./images/2.jpg" alt=""></a><p>老师教你应对技巧</p></div></div></div><!-- 添加箭头 --><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div></section><!-- 充电学习模块 --><section class="content"><!-- 头部 --><div class="con-hd"><h4><span class="icon"><img src="./icons/i1.png" alt="" /></span> 充电学习</h4><a href="#" class="more">更多>></a></div><!-- 充电学习轮播图 --><div class="study"><!-- Swiper --><div class="swiper-container study_fo"><div class="swiper-wrapper"><div class="swiper-slide"><img src="./images/pic1.png" alt=""><h5>我是老六，贝雷塔老六</h5><p>1369人觉得很六</p></div><div class="swiper-slide"><img src="./images/pic1.png" alt=""><h5>我是老六，贝雷塔老六</h5><p>1369人觉得很六</p></div><div class="swiper-slide"><img src="./images/pic1.png" alt=""><h5>我是老六，贝雷塔老六</h5><p>1369人觉得很六</p></div></div><!-- <div class="swiper-pagination"></div> --></div></div></section><!-- swiper插件 --><script src="js/flexible.js"></script><script src="js/swiper.min.js"></script><script>(function() {var swiper = new Swiper('.get_job_fo', {// 轮播图能够显示的个数slidesPerView: 2,spaceBetween: 30,centeredSlides: true,loop: true,// 左右箭头navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},});})();// 第二个函数(function() {// 如果有多个轮播图，要进行修改类名var swiper = new Swiper(".study__fo", {slidesPerView: 2.2,spaceBetween: 20,});})();</script></body></html>
index.less
body {min-width: 320px;max-width: 750px;margin: 0 auto;height: 2000px;background-color: #F2F4F7;} a {text-decoration: none;color: #707070;}img {width: 100%;vertical-align: middle;}// 屏幕约束，最大750px@media screen and (min-width: 750px) {html {font-size: 37.5px!important;}}.warp {background-color: #fff;padding-bottom: 1.2rem;}.header {height: 2.1333rem;border-bottom: 1px solid #EAEAEA;text-align: center;line-height: 2.1333rem;font-size: .9333rem;color: #1c1c1c;}// 导航栏部分.nav {display: flex;flex-wrap: wrap;padding: 1.2rem 0 1.6rem 0;.item {display: flex;width: 33.33%;flex-direction: column;align-items: center;img { width: 3.7067rem;height: 3.7067rem;}span {font-size: .6667rem;color: #707070;}&:nth-child(-n+3) {margin-bottom: 1.6533rem;}}}// go模块.go {margin: 0 .2667rem 0 .48rem;}// 就业指导模块.content {padding: 1.0667rem .64rem;background-color: #fff;margin-top: .2667rem;.con-hd {display: flex;justify-content: space-between;height: 1.0133rem; line-height: 1.0133rem;margin-bottom: .9067rem;h4 {margin: 0;font-size: .7467rem;color: #333;.icon {display: inline-block;width: 1.0133rem;height: 1.0133rem;}}.more {font-size: .5867rem;color: #999;}}}.get_job_focus {position: relative;.swiper-container {width: 14.4rem;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;// 没加也有效果flex-direction: column;transition: 300ms;// 将图缩放为0.8transform: scale(0.8);// 将图片设置透明opacity: 0.4;a {width: 9.0133rem;height: 10.0267rem;img {width: 100%;height: 100%;}}p {width: 9.0133rem;font-size: .6667rem;margin-top: .64rem;color: #333;}}// 当前的图缩放为1.swiper-slide-active,.swiper-slide-duplicate-active{// 将最顶上的图片单独拿出来设置不一样的数值transform: scale(1);// 把层叠设为最高即可压住左右图片z-index: 999;opacity: 1;}}.study {.study_fo {padding: 0.2667rem;}.swiper-slide {font-size: 18px;background: #fff;width: 7.7333rem;height: 9.0667rem;border-radius: .2667rem;box-shadow: 0 0px 10px rgba(0, 0, 0, .1);h5 {font-size: .6933rem;margin: .5333rem 0;font-weight: 400;padding: 0 .2667rem;}p {font-size: .6933rem;color: #FF4400;padding: 0 .2667rem;}}}
index.css
body {min-width: 320px;max-width: 750px;margin: 0 auto;height: 2000px;background-color: #F2F4F7;}a {text-decoration: none;color: #707070;}img {width: 100%;vertical-align: middle;}@media screen and (min-width: 750px) {html {font-size: 37.5px !important;}}.warp {background-color: #fff;padding-bottom: 1.2rem;}.header {height: 2.1333rem;border-bottom: 1px solid #EAEAEA;text-align: center;line-height: 2.1333rem;font-size: 0.9333rem;color: #1c1c1c;}.nav {display: flex;flex-wrap: wrap;padding: 1.2rem 0 1.6rem 0;}.nav .item {display: flex;width: 33.33%;flex-direction: column;align-items: center;}.nav .item img {width: 3.7067rem;height: 3.7067rem;}.nav .item span {font-size: 0.6667rem;color: #707070;}.nav .item:nth-child(-n+3) {margin-bottom: 1.6533rem;}.go {margin: 0 0.2667rem 0 0.48rem;}.content {padding: 1.0667rem 0.64rem;background-color: #fff;margin-top: 0.2667rem;}.content .con-hd {display: flex;justify-content: space-between;height: 1.0133rem;line-height: 1.0133rem;margin-bottom: 0.9067rem;}.content .con-hd h4 {margin: 0;font-size: 0.7467rem;color: #333;}.content .con-hd h4 .icon {display: inline-block;width: 1.0133rem;height: 1.0133rem;}.content .con-hd .more {font-size: 0.5867rem;color: #999;}.get_job_focus {position: relative;}.get_job_focus .swiper-container {width: 14.4rem;height: 100%;}.get_job_focus .swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-direction: column;transition: 300ms;transform: scale(0.8);opacity: 0.4;}.get_job_focus .swiper-slide a {width: 9.0133rem;height: 10.0267rem;}.get_job_focus .swiper-slide a img {width: 100%;height: 100%;}.get_job_focus .swiper-slide p {width: 9.0133rem;font-size: 0.6667rem;margin-top: 0.64rem;color: #333;}.get_job_focus .swiper-slide-active,.get_job_focus .swiper-slide-duplicate-active {transform: scale(1);z-index: 999;opacity: 1;}.study .study_fo {padding: 0.2667rem;}.study .swiper-slide {font-size: 18px;background: #fff;width: 7.7333rem;height: 9.0667rem;border-radius: 0.2667rem;box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);}.study .swiper-slide h5 {font-size: 0.6933rem;margin: 0.5333rem 0;font-weight: 400;padding: 0 0.2667rem;}.study .swiper-slide p {font-size: 0.6933rem;color: #FF4400;padding: 0 0.2667rem;}
移动端黑马面面案例（技术方案 代码规范 目录规范 蓝湖/摹客协作平台 适配方案简介 初始化文件 swiper插件使用 index.html index.less index.css）
