效果设计图!!!
效果设计图!!! 项目来源：黑马程序员的pink老师 点击跳转视频课程
效果设计图!!! 此项目布局采用flexible.js+rem+flex

本博客目前搭建效果(有兴趣的同学可以一起来动手)

关于路径的问题和部分文件示意图如下：(less文件为css的预编译文件，可视为css的同分异构体)

黑马面面

css
- index.css
- index.less(直接写css即可,less可以不用)
- normalize.css
- swiper.min.css
icons
img
js
- flexible.js
- swiper.min.js
index.html

css

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老师 点击跳转视频课程
关于素材的下载点击跳转下载

“21天好习惯“ 第十七期 — 17之黑马面面移动端布局(三)相关推荐

“21天好习惯“ 第十六期 — 16之黑马面面移动端布局(二)
效果设计图!!! 效果设计图!!! 项目来源:黑马程序员的pink老师点击跳转视频课程效果设计图!!! 此项目布局采用flexible.js+rem+flex 本博客目前搭建效果(有兴趣的同学可以 ...
“21天好习惯“ 第十九期 — 19之黑马面面移动端布局(暂时完结)
效果设计图!!! 效果设计图!!! 项目来源:黑马程序员的pink老师点击跳转视频课程效果设计图!!! 此项目布局采用flexible.js+rem+flex 本博客目前搭建效果(有兴趣的同学可以 ...
“21天好习惯“ 第八期 — 8
"21天好习惯" 第八期 - 8 一.学习规划 1.计算机组成图谱绘画(应为知识导图)(10月25) 2.网络工程师备考(11月6) 3.信息知识竞赛(10月31) 二.所遇问题 ...
“21天好习惯“ 第七期—7
"21天好习惯" 第七期 - 7 一.学习规划 1.计算机组成图谱绘画(应为知识导图)(10月25) 2.网络工程师备考(11月6) 3.信息知识竞赛(10月31) 二.所遇问题 ...
“21天好习惯“ 第六期 — 6
"21天好习惯" 第六期 - 6 一.学习规划 1.计算机组成图谱绘画(应为知识导图)(10月25) 2.网络工程师备考(11月6) 3.信息知识竞赛(10月31) 二.所遇问题 ...
“21天好习惯“ 第九期—9：京东倒计时，淘宝倒计时
"21天好习惯" 第九期 - 9 一.学习规划 1.计算机组成图谱绘画(应为知识导图)(10月25) 2.网络工程师备考(11月6) 3.信息知识竞赛(10月31) 二.所遇问题 ...
“21天好习惯“第一期--4
"21天好习惯"-第四天每天记录一点点计算机的诞生与发展冯·诺依曼体系计算机系统作为一个能够自动地处理信息的智能化工具,必须解决好两个最基本的问题:①信息如何表示才能方便地 ...
用好MySQL的21个好习惯！
前言每一个好习惯都是一笔财富,本文分SQL后悔药, SQL性能优化,SQL规范优雅三个方向,分享写SQL的21个好习惯,谢谢阅读,加油哈~ 1. 写完SQL先explain查看执行计划(SQL性能优 ...
改变人生的21种好习惯
1.当一个人生活枯燥的时候,他忘了用心体会是一种习惯. 2.当一个人觉得人生乏味的时候,他忘了培养幽默是一种习惯. 3.当一个人体力日差的时候,他忘了运动建身是一种习惯. 4.当一个人工作疲惫的时候, ...

“21天好习惯“ 第十七期 — 17之黑马面面移动端布局(三)

黑马面面

css

index.css

index.less(直接写css即可,less可以不用)

normalize.css

swiper.min.css

icons

img

js

flexible.js

swiper.min.js

index.html

“21天好习惯“ 第十七期 — 17之黑马面面移动端布局(三)相关推荐

最新文章

热门文章