效果设计图!!!
效果设计图!!! 项目来源：黑马程序员的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
index.html

css

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老师 点击跳转视频课程
关于素材的下载点击跳转下载
项目结束后再总结

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

“21天好习惯“ 第十九期 — 19之黑马面面移动端布局(暂时完结)
效果设计图!!! 效果设计图!!! 项目来源:黑马程序员的pink老师点击跳转视频课程效果设计图!!! 此项目布局采用flexible.js+rem+flex 本博客目前搭建效果(有兴趣的同学可以 ...
“21天好习惯“ 第十七期 — 17之黑马面面移动端布局(三)
效果设计图!!! 效果设计图!!! 项目来源:黑马程序员的pink老师点击跳转视频课程效果设计图!!! 此项目布局采用flexible.js+rem+flex 本博客目前搭建效果(有兴趣的同学可以 ...
鲁大师电动车智能化测评报告第十六期：破局者与搅局者之争
鲁大师第十六期智能化电动车测评排行榜数据来源于鲁大师智慧实验室,测评的车型均为市面上主流品牌的主流车型.截止目前,鲁大师智能化电动车测评的车型高达80余种,且还在不断增加和丰富中. 1.测评依据鲁大 ...
【移动战略说·第十六期】创业者面临的机遇与挑战（杭州站）
经济高速发展的时代,消费者需求越来越高,创业政策的放宽,大量谋求改变命运的创业者涌入市场,创业早已不稀奇.但随着全民创业的趋势不断发展,创业市场竞争日趋激烈,创业似乎越来越难了.但即便如此,越来越多的 ...
【悟空云课堂】第二十六期：通过错误消息导致的信息暴露（CWE-209:Generation of Error Message Containing Sensitive Information）
关注公众号"中科天齐软件安全中心"(id:woocoom),一起涨知识! 该栏目为中科天齐全新规划的悟空云课堂,每周五下午18:00准时上线,旨在科普软件安全相关知识,助力企业有效 ...
html5诗歌作业,《品味诗词群》总第七十六期作业
<品味诗词群>总第七十六期作业老物件总能给人以无限的怀想.本期作业以<收录机>为主题,以图题诗.韵部不限,诗词均可,要求不变,期待精彩! 品味诗词雅韵,传承华夏文明. 七绝 ...
未雨绸缪，迎接运维新时代—— Tech Neo第十六期技术沙龙
运维发展历程与工业革命异曲同工,工业的三次革命分别是机械化.电气化与信息化,运维则是原始手工.脚本与自动化工具.那么工业4.0悄然来临的今天,智能化又将会给运维带来哪些影响?坦白讲,AIOps是新概念 ...
android仿秒拍源码,你所不知道的程序员程序员其实真的很…【Bus Weekly】三十六期...
原标题:你所不知道的程序员程序员其实真的很-[Bus Weekly]三十六期快,点击蓝色"字体"关注这个公众号,一起涨姿势- 现如今,程序员在中国的科技圈可以说已经达到了举足 ...
ipv4v6双栈技术_【第二十六期】IPv6系列应用篇——数据中心IPv4/IPv6双栈架构探讨...
背景 2017年,工业和信息化部发布了<推进互联网协议第六版(IPv6)规模部署行动计划>的通知,从国家层面推动下一代IP技术--IPv6的普及和应用.目标到2020年末,IPv6活跃用户 ...

“21天好习惯“ 第十六期 — 16之黑马面面移动端布局(二)

黑马面面

css

index.css

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

normalize.css

swiper.min.css

icons

img

js

flexible.js

index.html

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

最新文章

热门文章