一.项目准备工作
目录
一.项目准备工作
二.header部分
三.导航栏(nav)部分-flex布局
四.go部分
五.就业指导部分(content)
1.头部(content_hd)
2.主体(content_bd)
六.教育学习
七.底部(footer)
适配方案:flex+rem++LESS
1.代码规范
1. 类名语义化，尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “_” 连接
2. 类名嵌套层次尽量不超过三层
3. 尽量避免直接使用元素选择器
4. 属性书写顺序
布局定位属性：display / position / float / clear / visibility / overflow
尺寸属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow
5. 避免使用 id 选择器
6. 避免使用通配符 * 和 !important
2.目录规范
项目文件夹：heimamm
样式文件夹：css
业务类图片文件夹：images
样式类图片文件夹： icons
字体类文件夹： fontsjs类文件夹:js
3.在中<head>标签中引入CSS样式文件和js文件
-
<!-- 引入css样式文件 -->
-
<link rel="stylesheet" href="css/">
-
<link rel="stylesheet" href="css/">
-
<link rel="stylesheet" href="css/">
-
<script src="./js/"></script>
4.在中初始化body样式
-
body {
-
min-width: 320.0025px;
-
max-width: 750px;
-
margin: 0 auto;
-
height: 1200px;
-
}
5.在中约束范围
-
// 当屏幕大于750px时,html字体大小就不再变化
-
@media screen and (min-width:750px) {
-
html {
-
font-size: 37.5px !important;
-
}
-
}
.less文件保存后自动转为.css文件的插件:
6.改变基准值
二.header部分
1.:
<header class="header">黑马面面</header>2.:
-
.header {
-
height: 2.1333rem;
-
color: black;
-
text-align: center;
-
line-height: 2.1333rem;
-
border-bottom: .0267rem solid #eaeaea;
-
}
效果图:
三.导航栏(nav)部分-flex布局
1.在flex布局中,实现图片在文字上方垂直居中显示的效果:
-
.item {
-
// 必须具有flex属性
-
display: flex;
-
width: 33.33%;
-
// 纵向显示
-
flex-direction: column;
-
// 水平居中
-
align-items: center;
-
}
2..:
-
<!-- nav部分 -->
-
<nav class="nav">
-
<a href="#" class="item">
-
<img src="./icons/">
-
<span>HR面试</span>
-
</a>
-
-
<a href="#" class="item">
-
<img src="./icons/">
-
<span>笔试</span>
-
</a>
-
-
<a href="#" class="item">
-
<img src="./icons/">
-
<span>技术面试</span>
-
</a>
-
-
<a href="#" class="item">
-
<img src="./icons/">
-
<span>模拟面试</span>
-
</a>
-
-
<a href="#" class="item">
-
<img src="./icons/">
-
<span>面试技巧</span>
-
</a>
-
-
<a href="#" class="item">
-
<img src="./icons/">
-
<span>薪资查询</span>
-
</a>
-
-
</nav>
3..:
-
// nav 部分
-
.nav {
-
display: flex;
-
// 一行显示不下就换行
-
flex-wrap: wrap;
-
padding: 1.2rem 0 1.6rem 0;
-
-
.item {
-
// 必须具有flex属性
-
display: flex;
-
width: 33.33%;
-
// 纵向显示
-
flex-direction: column;
-
// 水平居中
-
align-items: center;
-
-
-
img {
-
width: 3.7067rem;
-
height: 3.7067rem;
-
-
}
-
-
span {
-
font-size: .6667rem;
-
color: #707070
-
}
-
-
// 选择前面三个加下边距
-
&:nth-child(-n + 3) {
-
margin-bottom: 1.653333rem;
-
}
-
}
-
}
导航栏(nav)前三个下面有一段距离:
4..使用:nth-child()选择器选择出前三个item:
-
// 选择前面三个加下边距
-
&:nth-child(-n + 3) {
-
margin-bottom: 1.653333rem;
-
}
四.go部分
1.:
-
<!-- go部分 -->
-
<section class="go">
-
<img src="./images/">
-
</section>
2.:
-
// go部分
-
.go {
-
margin: 0 .2667rem 0 .48rem;
-
}
五.就业指导部分(content)
1.头部(content_hd)
1.:
-
<!-- 就业指导 -->
-
<section class="content">
-
<!-- 头部 -->
-
<div class="content_hd">
-
<h4>
-
<img src="./icons/">
-
就业指导
-
</h4>
-
<a href="#" class="more">更多>></a>
-
</div>
-
</section>
2.:
-
// 就业指导部分
-
.content {
-
padding: 1.0667rem .64rem;
-
background-color: #fff;
-
margin-top: .2667rem;
-
-
.content_hd {
-
display: flex;
-
justify-content: space-between;
-
height: 1.0133rem;
-
line-height: 1.0133rem;
-
margin-bottom: 00.906667rem;
-
-
h4 {
-
margin: 0;
-
font-size: .7467rem;
-
color: #333;
-
-
img {
-
display: inline-block;
-
width: 1.0133rem;
-
height: 1.0133rem;
-
// 图片和文字默认是基线对齐,改为和中部对齐
-
vertical-align: middle;
-
}
-
}
-
-
.more {
-
font-size: .5867rem;
-
color: #999;
-
}
-
}
-
}
// 图片和文字默认是基线对齐,需要给图片添加"vertical-align"改为和中部对齐
vertical-align: middle;
2.主体(content_bd)
轮播图需要用到swiper
1.下载
2.分别复制到js和css文件夹里面 
3.在中引入css文件和js文件:
-
<!-- 引入swiper的css文件 -->
-
<link rel="stylesheet" href="css/">
-
<!-- 引入swiper的js文件 -->
-
<script src="./js/"></script>
4.官网找到类似案例,复制html结构 CSS样式 js语法.
结构:
-
<!-- 轮播图模块 -->
-
<div class="get_job_focus">
-
<!-- Swiper -->
-
<div class="swiper-container">
-
<div class="swiper-wrapper">
-
<div class="swiper-slide">Slide 1</div>
-
<div class="swiper-slide">Slide 2</div>
-
<div class="swiper-slide">Slide 3</div>
-
<div class="swiper-slide">Slide 4</div>
-
<div class="swiper-slide">Slide 5</div>
-
<div class="swiper-slide">Slide 6</div>
-
<div class="swiper-slide">Slide 7</div>
-
<div class="swiper-slide">Slide 8</div>
-
<div class="swiper-slide">Slide 9</div>
-
<div class="swiper-slide">Slide 10</div>
-
</div>
-
<!-- Add Pagination -->
-
<div class="swiper-pagination"></div>
-
</div>
-
</div>
样式:
-
// 轮播图部分
-
.get_job_focus {
-
-
html,
-
body {
-
position: relative;
-
height: 100%;
-
}
-
-
body {
-
background: #eee;
-
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-
font-size: 14px;
-
color: #000;
-
margin: 0;
-
padding: 0;
-
}
-
-
.swiper-container {
-
width: 100%;
-
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;
-
-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);
-
}
-
-
.swiper-slide-active,
-
.swiper-slide-duplicate-active {
-
transform: scale(1);
-
}
-
}
语法:
-
<script src="./js/"></script>
-
<!-- 引入swiper的js文件 -->
-
<script src="./js/"></script>
-
<script>
-
var swiper = new Swiper('.swiper-container', {
-
slidesPerView: 3,
-
spaceBetween: 30,
-
centeredSlides: true,
-
loop: true,
-
pagination: {
-
el: '.swiper-pagination',
-
clickable: true,
-
},
-
});
-
</script>
效果图:
添加箭头
分别复制到body-<div class="swiper-container">里面和script中
修改slide
-
<div class="swiper-slide">
-
<a href="#"><img src="./images/"></a>
-
<p>老师教你面试技巧</p>
-
</div>
:
-> 
-
<div class="swiper-slide">
-
<a href="#"><img src="./images/"></a>
-
<p>老师教你面试技巧</p>
-
</div>
-
-
<div class="swiper-slide">
-
<a href="#"><img src="./images/"></a>
-
<p>老师教你面试技巧</p>
-
</div>
-
-
<div class="swiper-slide">
-
<a href="#"><img src="./images/"></a>
-
<p>老师教你面试技巧</p>
-
</div>
-
<!-- 主体 -->
-
<div class="content_bd">
-
<!-- 轮播图模块 -->
-
<div class="get_job_focus">
-
<!-- Swiper -->
-
<div class="swiper-container">
-
<div class="swiper-wrapper">
-
<div class="swiper-slide">
-
<a href="#"><img src="./images/"></a>
-
<p>老师教你面试技巧</p>
-
</div>
-
-
<div class="swiper-slide">
-
<a href="#"><img src="./images/"></a>
-
<p>老师教你面试技巧</p>
-
</div>
-
-
<div class="swiper-slide">
-
<a href="#"><img src="./images/"></a>
-
<p>老师教你面试技巧</p>
-
</div>
-
</div>
-
</div>
-
<!-- 添加左右箭头 -->
-
<div class="swiper-button-next"></div>
-
<div class="swiper-button-prev"></div>
-
</div>
-
</div>
-
</section>
-
-
-
<script src="./js/"></script>
-
<!-- 引入swiper的js文件 -->
-
<script src="./js/"></script>
-
<script>
-
var swiper = new Swiper('.swiper-container', {
-
// 能够显示的slide的个数
-
slidesPerView: 2,
-
spaceBetween: 30,
-
centeredSlides: true,
-
loop: true,
-
// 添加左右箭头
-
navigation: {
-
nextEl: ".swiper-button-next",
-
prevEl: ".swiper-button-prev",
-
},
-
});
-
</script>
-
// 轮播图部分
-
.get_job_focus {
-
position: relative;
-
-
html,
-
body {
-
position: relative;
-
height: 100%;
-
}
-
-
body {
-
background: #eee;
-
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-
font-size: 14px;
-
color: #000;
-
margin: 0;
-
padding: 0;
-
}
-
-
.swiper-container {
-
height: 100%;
-
// 根据需求把宽度定位540px
-
width: 14.4rem;
-
}
-
-
.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;
-
// 其他的兄弟是0.8
-
transform: scale(0.8);
-
opacity: 0.4;
-
-
a {
-
width: 9.0133rem;
-
height: 9.0133rem;
-
-
img {
-
width: 100%;
-
height: 100%;
-
}
-
}
-
-
p {
-
font-size: .6667rem;
-
margin-top: .64rem;
-
color: #333;
-
}
-
}
-
-
// 当前选中的slide(中间的图片)
-
.swiper-slide-active,
-
.swiper-slide-duplicate-active {
-
transform: scale(1);
-
z-index: 1;
-
opacity: 1;
-
}
-
}
js部分:
-
<script src="./js/"></script>
-
<!-- 第一个是就业指导轮播图 -->
-
<script>
-
var swiper = new Swiper('.swiper-container', {
-
// 能够显示的slide的个数
-
slidesPerView: 2,
-
spaceBetween: 30,
-
centeredSlides: true,
-
loop: true,
-
// 添加左右箭头
-
navigation: {
-
nextEl: ".swiper-button-next",
-
prevEl: ".swiper-button-prev",
-
},
-
});
-
</script>
更改轮播图的宽度为540px
箭头往外拉
-
.swiper-slide {
-
text-align: center;
-
font-size: 18px;
-
background: #fff;
-
}
-
<!-- 添加左右箭头 -->
-
<div class="swiper-button-next"></div>
-
<div class="swiper-button-prev"></div>
放在<div class="swiper-container">外面,如果放在里面,会被overflow给切掉
<div class="get_job_focus"> 里面一级
并且将get_job_focus添加相对定位
六.教育学习
在swiper中找一个类似的演示模板,复制html结构 CSS样式 js语法
-
<!-- 充电学习部分 -->
-
<section class="content">
-
<!-- 头部 -->
-
<div class="content_hd">
-
<h4>
-
<img src="./icons/">
-
充电学习
-
</h4>
-
<a href="#" class="more">更多>></a>
-
</div>
-
-
<!-- 主体 -->
-
<!-- 学习模块轮播图模块 -->
-
<div class="study">
-
<!-- Swiper -->
-
<div class="swiper mySwiper">
-
<div class="swiper-wrapper">
-
<div class="swiper-slide">
-
<img src="./images/">
-
<h5>说地道英语,告别中式英语</h5>
-
<p>156人学习</p>
-
</div>
-
-
<div class="swiper-slide">
-
<img src="./images/">
-
<h5>说地道英语,告别中式英语</h5>
-
<p>156人学习</p>
-
</div>
-
-
<div class="swiper-slide">
-
<img src="./images/">
-
<h5>说地道英语,告别中式英语</h5>
-
<p>156人学习</p>
-
</div>
-
</div>
-
<div class="swiper-pagination"></div>
-
</div>
-
</div>
-
-
</section>
-
// 学习充电部分
-
.study {
-
.mySwiper {
-
padding: .2667rem;
-
}
-
-
.swiper-slide {
-
width: 7.7333rem;
-
height: 9.0667rem;
-
-
text-align: center;
-
font-size: 18px;
-
background: #fff;
-
border-radius: 0.266667rem;
-
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
-
align-items: center;
-
display: flex;
-
flex-direction: column;
-
-
h5 {
-
font-size: 0.7467rem;
-
margin: .5333rem 0;
-
font-weight: 400;
-
padding: 0 .2667rem;
-
}
-
-
p {
-
font-size: .6667rem;
-
color: #ff4400;
-
padding: 0 .2667rem;
-
}
-
-
/* Center slide text vertically */
-
// display: -webkit-box;
-
// display: -ms-flexbox;
-
// display: -webkit-flex;
-
// display: flex;
-
// -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;
-
}
-
}
js部分:
-
<!-- 第二个函数的轮播图 -->
-
<!-- Initialize Swiper -->
-
<script>
-
var swiper = new Swiper(".mySwiper", {
-
// 我们可以看到的是两个半
-
slidesPerView: 2.3,
-
spaceBetween: 30,
-
// 去掉小圆点
-
// pagination: {
-
// el: ".swiper-pagination",
-
// clickable: true,
-
// },
-
});
-
</script>
// 就业指导和充电学习部分的头部
-
// 就业指导和充电学习部分的头部
-
.content {
-
padding: 1.0667rem .64rem;
-
background-color: #fff;
-
margin-top: .2667rem;
-
-
.content_hd {
-
display: flex;
-
justify-content: space-between;
-
height: 1.0133rem;
-
line-height: 1.0133rem;
-
margin-bottom: 00.906667rem;
-
margin-bottom: .9067rem;
-
-
h4 {
-
margin: 0;
-
font-size: .7467rem;
-
color: #333;
-
-
img {
-
display: inline-block;
-
width: 1.0133rem;
-
height: 1.0133rem;
-
// 图片和文字默认是基线对齐,改为和中部对齐
-
vertical-align: middle;
-
}
-
}
-
-
.more {
-
font-size: .5867rem;
-
color: #999;
-
}
-
}
-
}
七.底部(footer)
fixed定位
-
<!-- footer部分 -->
-
<div class="footer">
-
<a href="#" class="item">
-
<img src="./icons/">
-
<p>首页</p>
-
</a>
-
-
<a href="#" class="item">
-
<img src="./icons/">
-
<p>模拟面试</p>
-
</a>
-
-
<a href="#" class="item">
-
<img src="./icons/">
-
<p>技术面试</p>
-
</a>
-
-
<a href="#" class="item">
-
<img src="./icons/">
-
<p>我的首页</p>
-
</a>
-
</div>
:
-
.footer {
-
position: fixed;
-
left: 0;
-
bottom: 0;
-
height: 110px;
-
width: 100%;
-
z-index: 1;
-
display: flex;
-
padding: 0.5333rem;
-
background-color: #fff;
-
border-top: 1px solid #ccc;
-
-
.item {
-
flex: 1;
-
display: flex;
-
flex-direction: column;
-
align-items: center;
-
-
img {
-
width: 1.04rem;
-
height: 1.0933rem;
-
}
-
-
p {
-
font-size: .64rem;
-
color: #666;
-
margin-top: .2667rem;
-
}
-
}
-
}
