效果设计图!!!
效果设计图!!!项目来源：黑马程序员的pink老师点击跳转视频课程
效果设计图!!!此项目布局采用flexible.js+rem+flex
本博客目前搭建效果(有兴趣的同学可以一起来动手)
关于路径的问题和部分文件示意图如下：(less文件为css的预编译文件，可视为css的同分异构体)
黑马面面
cssindex.cssindex.less(直接写css即可,less可以不用)normalize.cssswiper.min.cssiconsimgjsflexible.jsswiper.min.jsindex.htmlcss
index.css
body {min-width: 320px;max-width: 750px;margin: 0 auto;height: 1200px;background-color: #f2f4f7;}@media screen and (min-width: 750px) {html {font-size: 37.5px !important;}}.header {height: 2.133333rem;border-bottom: 1px solid #EAEAEA;text-align: center;line-height: 2.133333rem;font-size: 0.933333rem;color: #1C1C1C;}.top {background-color: #FFF;padding-bottom: 1.2rem;}.nav {display: flex;flex-wrap: wrap;padding: 1.173333rem 0 1.6rem 0;}.nav .items {display: flex;flex-direction: column;align-items: center;width: 33.3%;}.nav .items img {width: 3.706666rem;height: 3.706666rem;}.nav .items span {font-size: 0.72rem;color: #707070;}.nav .items:nth-child(-n+3) {margin-bottom: 1.6rem;}.go {padding: 0 0.373333rem;}.content {margin: 0.266666rem 0;padding: 1.066666rem 0.533333rem;background-color: #FFF;}.content .conHead {display: flex;justify-content: space-between;margin-bottom: 0.906666rem;height: 1.066666rem;width: 100%;line-height: 1.066666rem;}.content .conHead h4 {margin: 0;font-size: 0.746666rem;color: #333333;}.content .conHead h4::before {content: '';display: inline-block;vertical-align: middle;margin: 0 0.533333rem 0 0;width: 1.066666rem;height: 1.066666rem;background: url("../icons/i2.png") no-repeat;background-size: 100% 100%;}.content .conHead a {font-size: 0.586666rem;color: #999999;}.content .conBody {position: relative;}.content .conBody .swiper-container {width: 14.4rem;height: 100%;}.content .conBody .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;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;transition: 300ms;transform: scale(0.8);opacity: 0.6;}.content .conBody .swiper-slide a {width: 9.013333rem;height: 10.026666rem;}.content .conBody .swiper-slide a img {width: 100%;height: 100%;}.content .conBody .swiper-slide p {margin-top: 0.64rem;width: 9.013333rem;line-height: 1.066666rem;font-size: 0.666666rem;color: #333333;}.content .conBody .swiper-slide-active,.content .conBody .swiper-slide-duplicate-active {transform: scale(1);z-index: 99;opacity: 1;}.content .swiper-button-next,.content .swiper-button-prev {color: #427e9c;}
index.less(直接写css即可,less可以不用)
body{min-width: 320px;max-width: 750px;margin: 0 auto;height: 1200px;background-color: #f2f4f7;}@media screen and (min-width: 750px) {html{font-size: 37.5px !important;}}.header {height: 2.133333rem;border-bottom: 1px solid #EAEAEA;text-align: center;line-height: 2.133333rem;font-size: 0.933333rem;color: #1C1C1C;}.top {background-color: #FFF;padding-bottom: 1.2rem;}.nav {display: flex;flex-wrap: wrap;padding: 1.173333rem 0 1.6rem 0;.items {display: flex;flex-direction: column;align-items: center;width: 33.3%;img {width: 3.706666rem;height: 3.706666rem;}span {font-size: 0.72rem;color: #707070;}&:nth-child(-n+3) {margin-bottom: 1.6rem;}}}.go{padding: 0 0.373333rem;}.content {margin: 0.266666rem 0;padding: 1.066666rem 0.533333rem;background-color: #FFF;.conHead {display: flex;justify-content: space-between;margin-bottom: 0.906666rem;height: 1.066666rem;width: 100%;line-height: 1.066666rem;h4 {margin: 0;font-size: 0.746666rem;color: #333333;&::before{content: '';display: inline-block;vertical-align: middle;margin: 0 0.533333rem 0 0;width: 1.066666rem;height: 1.066666rem;background:url("../icons/i2.png") no-repeat;background-size: 100% 100%;}}a {font-size:0.586666rem;color: #999999;}}.conBody {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;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;transition: 300ms;transform: scale(0.8);opacity: 0.6;a {width: 9.013333rem;height: 10.026666rem;img {width: 100%;height: 100%;}} p {margin-top: 0.64rem;width: 9.013333rem;line-height: 1.066666rem;font-size: 0.666666rem;color: #333333;}}.swiper-slide-active,.swiper-slide-duplicate-active{transform: scale(1);z-index: 99;opacity: 1;}}.swiper-button-next,.swiper-button-prev {color: #427e9c;}}
normalize.css
html {line-height: 1.15;}body {margin: 0;}h1 {font-size: 2em;margin: 0.67em 0;}a {text-decoration: none;background-color: transparent;}ul,li {padding: 0;list-style: none;}p {margin: 0;}img {display: block;width: 100%;}* {box-sizing: border-box;}
swiper.min.css
( swiper详情请点击这里跳转链接:)
样式过于庞大，请自行下载解压后找到相应文件放入
icons
点击下载图标
img
点击下载图片
js
flexible.js
flexible.js代码具体注释看此系列第一期快速跳转第一期
(function flexible(window, document) {var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; function setBodyFontSize() {if (document.body) {document.body.style.fontSize = (12 * dpr) + 'px';}else {document.addEventListener('DOMContentLoaded', setBodyFontSize);}}setBodyFontSize();function setRemUnit() {var rem = docEl.clientWidth / 20;docEl.style.fontSize = rem + 'px';}setRemUnit();window.addEventListener('resize', setRemUnit);window.addEventListener('pageshow', function(e) {if(e.persister) {setRemUnit();}else {setRemUnit();}})}) (window,document)
swiper.min.js
( swiper详情请点击这里跳转链接:)
代码过于庞大，请自行下载解压后找到相应文件放入
index.html
<!DOCTYPE html><html><head lang="zh-CN"><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /><title></title><link rel="stylesheet" type="text/css" href="./css/normalize.css" /><link rel="stylesheet" type="text/css" href="./css/swiper.min.css" /><link rel="stylesheet" type="text/css" href="./css/index.css" /></head><body><!-- 第一节:顶部 --><section class="top"><!-- Header头部区域 --><header class="header">黑马面面</header><!-- Nav导航区域 --><nav class="nav"><a href="#" class="items"><img src="icons/icon1.png"><span>HR面试</span></a><a href="#" class="items"><img src="icons/icon2.png"><span>笔试</span></a><a href="#" class="items"><img src="icons/icon3.png"><span>技术面试</span></a><a href="#" class="items"><img src="icons/icon4.png"><span>模拟面试</span></a><a href="#" class="items"><img src="icons/icon5.png"><span>面试技巧</span></a><a href="#" class="items"><img src="icons/icon6.png"><span>薪资查询</span></a></nav><!-- go模块~ --><section class="go"><img src="./img/go.png"></section></section><!-- 第二节:主体 --><section class="content"><div class="conHead"><h4>就业指导</h4><a href="#">更多>></a></div><div class="conBody"><!-- Swiper --><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><a href="#"><img src="./img/pic.png"></a><p>模拟面试考场助您一臂之力</p></div><div class="swiper-slide"><a href="#"><img src="./img/R-C%20(2).jpg"></a><p>师生面试给您最真实的考场</p></div><div class="swiper-slide"><a href="#"><img src="./img/d4d61771da2b211c8e1be043621cee24.jpg"></a><p>多人旁听给您及时完善话机</p></div></div></div><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div></section><script src="./js/flexible.js" type="text/javascript" charset="utf-8"></script><script src="./js/swiper.min.js" type="text/javascript" charset="utf-8"></script><script>(function() {var swiper = new Swiper('.swiper-container', {slidesPerView: 2,spaceBetween: 30,centeredSlides: true,loop: true,navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});})()</script></body></html>
本项目来源：黑马程序员的pink老师点击跳转视频课程
关于素材的下载点击跳转下载
