<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimun-scale=1.0">
<title>黑马面面</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/swiper.min.css">
<link rel="stylesheet" href="./css/swiper-bundle.min.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<section class="wrap">
<!-- 头部区域 -->
<header>黑马面面</header>
<!-- 导航部分 -->
<div class="nav">
<a href="#" class="item" title="HR面试">
<img src="./icons/icon1.png" alt="">
<span>HR面试</span>
</a>
<a href="#" class="item" title="笔试">
<img src="./icons/icon2.png" alt="">
<span>笔试</span>
</a>
<a href="#" class="item" title="技术面试">
<img src="./icons/icon3.png" alt="">
<span>技术面试</span>
</a>
<a href="#" class="item" title="模拟面试">
<img src="./icons/icon4.png" alt="">
<span>模拟面试</span>
</a>
<a href="#" class="item" title="面试技巧">
<img src="./icons/icon5.png" alt="">
<span>面试技巧</span>
</a>
<a href="#" class="item" title="薪资查询">
<img src="./icons/icon6.png" alt="">
<span>薪资查询</span>
</a>
</div>
<!--go模块 -->
<div class="go">
<img src="./imaages/go.png" alt="">
</div>
</section>
<!-- 就业指导模块 -->
<section class="content">
<div class="con-hd">
<h4>
<img src="./icons/i2.png" alt="">
就业指导
</h4>
<a href="#" class="more">更多>></a>
</div>
<div class="get_job_focus">
<div class="swiper-container get_job_fo">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#"><img src="./imaages/pic.png" alt=""></a>
<p>老师教你应对面试技巧</p>
</div>
<div class="swiper-slide">
<a href="#"><img src="./imaages/ldh.jpg" alt=""></a>
<p></p>
</div>
<div class="swiper-slide">
<a href="#"><img src="./imaages/3.jpg" alt=""></a>
<p></p>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</section>
<section class="content">
<div class="con-hd">
<h4>
<img src="./icons/i1.png" alt="">
充电学习
</h4>
<a href="#" class="more">更多>></a>
</div>
<!-- 轮播图 -->
<div class="study">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<img src="./imaages/pic1.png" alt="">
<h4>说地道英语,告别中式英语</h4>
<p>150人学习</p>
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="./imaages/pic2.png" alt="">
<h4>说地道英语,告别中式英语</h4>
<p>150人学习</p>
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="./imaages/pic1.png" alt="">
<h4>说地道英语,告别中式英语</h4>
<p>150人学习</p>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- weibu -->
<footer class="footer">
<a href="#">
<img src="./icons/home.png" alt="">
<p>首页</p>
</a>
<a href="#">
<img src="./icons/ms.png" alt="">
<p>模拟面试</p>
</a>
<a href="#">
<img src="./icons/net.png" alt="">
<p>技术面试</p>
</a>
<a href="#">
<img src="./icons/user.png" alt="">
<p>我的首页</p>
</a>
</footer>
<script src="./js/flexible.js"></script>
<script src="./js/swiper.min.js"></script>
<script src="./js/swiper-bundle.min.js"></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",
},
});
})()
// 2
</script>
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 2.3,
spaceBetween: 20,
});
</script>
</body>
</html>
基于less+flex+rem技术的移动端页面开发
需积分: 0 93 浏览量
2023-04-05
14:47:41
上传
评论
收藏 591KB ZIP 举报
04-HeimaMM.zip （35个子文件） 
04-HeimaMM imaages 
2.jpg 33KB
pic2.png 52KB pic.png 207KB go.png 25KB pic1.png 67KB ldh.jpg 25KB 3.jpg 28KB js 
flexible.js 1KB swiper.min.js 138KB swiper-bundle.min.js 140KB css index.less 4KB normalize.css 6KB swiper-bundle.min.css 16KB index.css 3KB swiper.min.css 13KB icons icon6.png 3KB icon1.png 3KB icon4.png 3KB i1.png 703B home.png 657B ms.png 443B icon5.png 3KB 返回 (2).png 258B user.png 494B arr.png 567B icon3.png 12KB i2.png 650B 返回 (2) 拷贝.png 165B net.png 475B icon2.png 3KB
index.html 6KB fonts icomoon.woff 10KB
icomoon.svg 35KB icomoon.eot 10KB icomoon.ttf 10KB资源评论
