效果设计图!!!
效果设计图!!! 项目来源：黑马程序员的pink老师 点击跳转视频课程
效果设计图!!! 此项目布局采用flexible.js+rem+flex
本博客目前搭建效果(有兴趣的同学可以一起来动手)
关于路径的问题和部分文件示意图如下：(less文件为css的预编译文件，可视为css的同分异构体)
黑马面面
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>
301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
