效果设计图!!!
效果设计图!!!项目来源：黑马程序员的pink老师点击跳转视频课程
效果设计图!!!此项目布局采用flexible.js+rem+flex
本博客目前搭建效果(有兴趣的同学可以一起来动手)
效果设计图!!!
效果设计图!!!项目来源：黑马程序员的pink老师点击跳转视频课程
效果设计图!!!此项目布局采用flexible.js+rem+flex
本博客目前搭建效果(有兴趣的同学可以一起来动手)
关于路径的问题和部分文件示意图如下：(less文件为css的预编译文件，可视为css的同分异构体)
黑马面面
cssindex.cssindex.less(直接写css即可,less可以不用)normalize.cssswiper.min.css iconsimgjsflexible.jsswiper.min.js index.htmlcss
index.css
body {min-width: 320px;max-width: 750px;margin: 0 auto;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 {width: 100%;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 .conCharge::before {background: url("../icons/i1.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 .conStudy {width: 100%;margin-bottom: 1.6rem;overflow: hidden;}.content .conStudy .swiper {padding: 0.266666rem;width: 100%;height: 100%;}.content .conStudy .swiper-slide {width: 7.733333rem;height: 9.066666rem;background-color: #FFF;border-radius: 0.266667rem;box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);font-size: 0.48rem;}.content .conStudy .swiper-slide img {display: block;width: 100%;height: 4.56rem;object-fit: cover;}.content .conStudy h5 {margin: 0.8rem 0.266666rem 0.533333rem;font-size: 0.7rem;font-weight: 400;}.content .conStudy p {padding: 0.6rem 0.533333rem 0;color: #A5A5A5;}.content .conStudy p span {color: #E66339;}.content .swiper-button-next,.content .swiper-button-prev {color: #427e9c;}.footer {position: fixed;left: 0;bottom: 0;margin: 0 auto;width: 100%;height: 2.6rem;background-color: #FFFFFF;z-index: 999;}.footer .ft_Navlist ul {display: flex;}.footer .ft_Navlist ul li {display: flex;flex-direction: column;align-items: center;padding: 0.366666rem;font-size: 0.586666rem;flex: 1;line-height: 1.173333rem;}.footer .ft_Navlist ul li img {height: 1.066666rem;width: 1.066666rem;}.footer .ft_Navlist ul li p {font-size: 0.586666rem;color: #666;}.footer .ft_Navlist ul li:hover {cursor: pointer;}.footer .ft_Navlist ul .current {background-color: #4c4c4c50;}
index.less(直接写css即可,less可以不用)
body{min-width: 320px;max-width: 750px;margin: 0 auto;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 {width: 100%;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%;}}.conCharge {&::before {background:url("../icons/i1.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;}}.conStudy {width: 100%;margin-bottom: 1.6rem;overflow: hidden;.swiper {padding: 0.266666rem;width: 100%;height: 100%;}.swiper-slide {width: 7.733333rem;height: 9.066666rem;background-color: #FFF;border-radius: 0.266667rem;box-shadow:0 0 10px rgba(0, 0, 0, 0.16);font-size: 0.48rem;}.swiper-slide img {display: block;width: 100%;height: 4.56rem;object-fit: cover;}h5 {margin: 0.8rem 0.266666rem 0.533333rem;font-size: 0.7rem;font-weight: 400;}p {padding: 0.6rem 0.533333rem 0;color: #A5A5A5;span {color: #E66339 ;}}}.swiper-button-next,.swiper-button-prev {color: #427e9c;}}.footer {position: fixed;left: 0;bottom: 0;margin: 0 auto;width: 100%;height: 2.6rem;background-color: #FFFFFF;z-index: 999;.ft_Navlist {ul {display: flex;li {display: flex;flex-direction: column;align-items: center;padding: 0.366666rem;font-size: 0.586666rem;flex: 1;line-height: 1.173333rem;img {height: 1.066666rem;width: 1.066666rem;}p {font-size: 0.586666rem;color: #666;}&:hover {cursor: pointer;}}.current {background-color: #4c4c4c50;}}}}
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 {margin: 0;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
// 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="hone part"><!-- 第一节:顶部 --><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/QQ截图1109132152.png"></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="conHead"><h4 class="conCharge">充电学习</h4><a href="#">更多>></a></div><div class="conStudy"><!-- Swiper --><div class="swiper mySwiper"><div class="swiper-wrapper"><div class="swiper-slide"><img src="./img/pic1.png"><h5>职场面试技巧，告别沉默</h5><p><span>156</span>人学习</p></div><div class="swiper-slide"><img src="./img/QQ截图1109132528.png"><h5>多人聆听技巧，告别失语</h5><p><span>222</span>人学习</p></div><div class="swiper-slide"><img src="./img/pic2.png"><h5>发散思维技巧，告别沉默</h5><p><span>333</span>人学习</p></div><div class="swiper-slide"><img src="./img/6954ff5e26706bb8f528e74c18a35f87.png"><h5>思维导图技巧，告别冷漠</h5><p><span>1313</span>人学习</p></div><div class="swiper-slide"><img src="./img/R-C.jpg"><h5>职场面试技巧，告别沉默</h5><p><span>26</span>人学习</p></div></div></div></div></section></section><!-- 第三节:底部导航 --><footer class="footer"><div class="ft_Navlist"><ul><li class="current"><img src="./icons/home5.png"><p>首页</p></li><li><img src="./icons/net.png"><p>技术</p></li><li><img src="./icons/ms.png"><p>模拟</p></li><li><img src="./icons/user.png"><p>我的</p></li></ul></div></footer><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() {// 轮播图swiper6内部代码 // 只要知道APi接口的目的和参数的形式会用就行// swiper真的太庞大了var swiper = new Swiper('.swiper-container', {slidesPerView: 2,spaceBetween: 30,centeredSlides: true,loop: true,navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});})();(function() {var swiper = new Swiper(".mySwiper", {slidesPerView: 2.6,spaceBetween: 30,});})();</script></body></html>
本项目来源：黑马程序员的pink老师点击跳转视频课程
关于素材的下载点击跳转下载
关于路径的问题和部分文件示意图如下：(less文件为css的预编译文件，可视为css的同分异构体)
本项目来源：黑马程序员的pink老师点击跳转视频课程
关于素材的下载点击跳转下载
