效果设计图!!!
效果设计图!!!项目来源：黑马程序员的pink老师点击跳转视频课程
效果设计图!!!此项目布局采用flexible.js+rem+flex
本博客目前搭建效果(有兴趣的同学可以一起来动手)
关于路径的问题和部分文件示意图如下：(less文件为css的预编译文件，可视为css的同分异构体)
黑马面面
cssindex.cssindex.less(直接写css即可,less可以不用)normalize.cssswiper.min.cssiconsimgjsflexible.jsindex.htmlcss
index.css
body {min-width: 320px;max-width: 750px;margin: 0 auto;height: 1200px;}@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;}.nav {display: flex;flex-wrap: wrap;}.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;}
index.less(直接写css即可,less可以不用)
body{min-width: 320px;max-width: 750px;margin: 0 auto;height: 1200px;}@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;}.nav {display: flex;flex-wrap: wrap;.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;}}}
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)
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><!-- Header头部区域 --><header class="header">黑马面面</header><script src="./js/flexible.js" type="text/javascript" charset="utf-8"></script><!-- 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></body></html>
本项目来源：黑马程序员的pink老师点击跳转视频课程
关于素材的下载点击跳转下载
项目结束后再总结
