<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>黑马面面</title>
<link rel="stylesheet" href="./css/normalize.css">
<!-- 先引入css文件 放到自己css文件的上面 -->
<link rel="stylesheet" href="./css/swiper.min.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body style="font-size: 15px;">
<section class="warp">
<!-- 头部区域 -->
<header class="header">黑马面面</header>
<!-- 导航栏部分 -->
<nav class="nav">
<a href="#" class="item">
<img src="./icons/icon1.png" alt="">
<span>HR面试</span>
</a>
<a href="#" class="item">
<img src="./icons/icon2.png" alt="">
<span>笔试</span>
</a>
<a href="#" class="item">
<img src="./icons/icon3.png" alt="">
<span>技术面试</span>
</a>
<a href="#" class="item">
<img src="./icons/icon4.png" alt="">
<span>模拟面试</span>
</a>
<a href="#" class="item">
<img src="./icons/icon5.png" alt="">
<span>面试技巧</span>
</a>
<a href="#" class="item">
<img src="./icons/icon6.png" alt="">
<span>薪资查询</span>
</a>
</nav>
<!-- go模块 -->
<section class="go">
<img src="./images/go.png" alt="">
</section>
</section>
<!-- 就业指导模块 -->
<section class="content">
<!-- 头部 -->
<div class="con-hd">
<h4>
<span class="icon"><img src="./icons/i2.png" alt=""></span>
就业指导
</h4>
<a href="#" class="more">更多>></a>
</div>
<!-- 旋转木马轮播图模块 -->
<div class="get_job_focus">
<!-- Swiper -->
<div class="swiper-container get_job_fo swiper-container-initialized swiper-container-horizontal">
<div class="swiper-wrapper"
style="transition-duration: 0ms; transform: translate3d(-712.5px, 0px, 0px);">
<div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active"
data-swiper-slide-index="1" style="width: 255px; margin-right: 30px;">
<a href="#"><img src="./images/ldh.jpg" alt=""></a>
<p>老师教你应对面试技巧</p>
</div>
<div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next"
data-swiper-slide-index="2" style="width: 255px; margin-right: 30px;">
<a href="#"><img src="./images/3.jpg" alt=""></a>
<p>老师教你应对面试技巧</p>
</div>
<div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="0"
style="width: 255px; margin-right: 30px;">
<a href="#"><img src="./images/pic.png" alt=""></a>
<p>老师教你应对面试技巧</p>
</div>
<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="1"
style="width: 255px; margin-right: 30px;">
<a href="#"><img src="./images/ldh.jpg" alt=""></a>
<p>老师教你应对面试技巧</p>
</div>
<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="2"
style="width: 255px; margin-right: 30px;">
<a href="#"><img src="./images/3.jpg" alt=""></a>
<p>老师教你应对面试技巧</p>
</div>
<div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-prev"
data-swiper-slide-index="0" style="width: 255px; margin-right: 30px;">
<a href="#"><img src="./images/pic.png" alt=""></a>
<p>老师教你应对面试技巧</p>
</div>
<div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active"
data-swiper-slide-index="1" style="width: 255px; margin-right: 30px;">
<a href="#"><img src="./images/ldh.jpg" alt=""></a>
<p>老师教你应对面试技巧</p>
</div>
</div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</div>
<!-- Add Arrows 根据需求这个代码放到 container外面 添加左右箭头-->
<div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"></div>
<div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"></div>
</div>
</section>
<!-- 充电学习模块 -->
<section class="content study_con">
<!-- 头部 -->
<div class="con-hd">
<h4>
<span class="icon"><img src="./icons/i2.png" alt=""></span>
充电学习
</h4>
<a href="#" class="more">更多>></a>
</div>
<!-- 学习模块轮播图模块 -->
<div class="study">
<!-- Swiper -->
<div class="swiper-container study_fo swiper-container-initialized swiper-container-horizontal">
<div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
<div class="swiper-slide swiper-slide-active" style="width: 299.091px; margin-right: 20px;">
<img src="./images/pic1.png" alt="">
<h5>说低调英语，告别中式英语</h5>
<p>156人学习</p>
</div>
<div class="swiper-slide swiper-slide-next" style="width: 299.091px; margin-right: 20px;">
<img src="./images/pic2.png" alt="">
<h5>说低调英语，告别中式英语</h5>
<p>156人学习</p>
</div>
<div class="swiper-slide" style="width: 299.091px; margin-right: 20px;">
<img src="./images/pic1.png" alt="">
<h5>说低调英语，告别中式英语</h5>
<p>156人学习</p>
</div>
<div class="swiper-slide" style="width: 299.091px; margin-right: 20px;">
<img src="./images/pic1.png" alt="">
<h5>说低调英语，告别中式英语</h5>
<p>156人学习</p>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</div>
</div>
</section>
<footer class="footer">
<a href="#" class="item">
<img src="./icons/home.png" alt="">
<p>首页</p>
</a>
<a href="#" class="item">
<img src="./icons/ms.png" alt="">
<p>模拟面试</p>
</a>
<a href="#" class="item">
<img src="./icons/net.png" alt="">
<p>技术面试</p>
</a>
<a href="#" class="item">
<img src="./icons/user.png" alt="">
<p>
前端：黑马面面首页的制作
需积分: 0 187 浏览量
2023-07-09
18:48:04
上传
评论
收藏 516KB ZIP 举报
h5.zip （29个子文件） 
h5 js 
flexible.js 1KB swiper.min.js 138KB css index.less 5KB normalize.css 6KB index.css 4KB 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 9KB images 
2.jpg 33KB pic2.png 52KB pic.png 207KB go.png 25KB pic1.png 67KB ldh.jpg 25KB 3.jpg 28KB资源评论
