移动端黑马面面案例（技术方案，代码规范，目录规范，蓝湖/摹客协作平台，适配方案简介，初始化文件，swiper插件使用，index.html，index.less，index.css）

于 2022-10-24 15:41:10 发布
阅读量410 收藏 1
点赞数
分类专栏： 《移动端布局》第二站 文章标签： 代码规范 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Junyi727/article/details/127440920
版权
这是一个移动端网页的示例，采用HTML、CSS和JavaScript实现，使用了Swiper插件创建轮播图效果。页面包含导航栏、轮播模块和内容展示区，展示了在不同场景如就业指导和充电学习中的应用。代码中包含了初始化文件、样式规范和适配方案，通过调整图片和文字布局以适应不同设备。
摘要由CSDN通过智能技术生成

由于水平太菜了，跟着做案例都没做好，一堆的bug，但是不发布觉得有点可惜，就这样吧

移动端黑马面面案例

技术方案

代码规范

目录规范

蓝湖/摹客协作平台

适配方案简介

初始化文件

swiper插件使用

index.html

<!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">
    <title>黑马面面</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- swiper -->
    <link rel="stylesheet" href="./css/swiper.min.css">
</head>
<body>
    <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">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/3.jpg" alt="">
                        </a>
                        <p>老师教你应对技巧</p>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/ldh.jpg" alt="">
                        </a>
                        <p>老师教你应对技巧</p>
                    </div>
                    <div class="swiper-slide">
                        <a href="#">
                            <img src="./images/2.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>
                <span class="icon">
                    <img src="./icons/i1.png" alt="" />
                </span> 
                充电学习
            </h4>
            <a href="#" class="more">更多>></a>
        </div>
        <!-- 充电学习轮播图 -->
        <div class="study">
            <!-- Swiper -->
            <div class="swiper-container study_fo">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./images/pic1.png" alt="">
                        <h5>我是老六，贝雷塔老六</h5>
                        <p>1369人觉得很六</p>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/pic1.png" alt="">
                        <h5>我是老六，贝雷塔老六</h5>
                        <p>1369人觉得很六</p>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/pic1.png" alt="">
                        <h5>我是老六，贝雷塔老六</h5>
                        <p>1369人觉得很六</p>
                    </div>
                </div>
                <!-- <div class="swiper-pagination"></div> -->
            </div>
        </div>
    </section>

    <!-- swiper插件 -->
    <script src="js/flexible.js"></script>
    <script src="js/swiper.min.js"></script>
    <script>
        (function() {
                var swiper = new Swiper('.get_job_fo', {
                // 轮播图能够显示的个数
                slidesPerView: 2,
                spaceBetween: 30,
                centeredSlides: true,
                loop: true,
                // 左右箭头
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
        })();
        // 第二个函数
        (function() {
            // 如果有多个轮播图，要进行修改类名
            var swiper = new Swiper(".study__fo", {
            slidesPerView: 2.2,
            spaceBetween: 20,
        });
        })();
    </script>
</body>
</html>

index.less

body {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    height: 2000px;
    background-color: #F2F4F7;
} 
a {
    text-decoration: none;
    color: #707070;
}
img {
    width: 100%;
    vertical-align: middle;
}
// 屏幕约束，最大750px
@media  screen and (min-width: 750px) {
    html {
        font-size: 37.5px!important;
    }
}
.warp {
    background-color: #fff;
    padding-bottom: 1.2rem;
}
.header {
    height: 2.1333rem;
    border-bottom: 1px solid #EAEAEA;
    text-align: center;
    line-height: 2.1333rem;
    font-size: .9333rem;
    color: #1c1c1c;
}
// 导航栏部分
.nav {
    display: flex;
    flex-wrap: wrap;
    padding: 1.2rem 0 1.6rem 0;
    .item {
        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.6533rem;
        }
    }
}
// go模块
.go {
    margin: 0 .2667rem 0 .48rem;
}
// 就业指导模块
.content {
    padding: 1.0667rem .64rem;
    background-color: #fff;
    margin-top: .2667rem;
    .con-hd {
        display: flex;
        justify-content: space-between;
        height: 1.0133rem;  
        line-height: 1.0133rem;
        margin-bottom: .9067rem;
        h4 {
            margin: 0;
            font-size: .7467rem;
            color: #333;
            .icon {
                display: inline-block;
                width: 1.0133rem;
                height: 1.0133rem;
            }
        }
        .more {
            font-size: .5867rem;
            color: #999;
        }
    }
}
.get_job_focus {
    position: relative;
    .swiper-container {
        
        width: 14.4rem;
        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;
        // 没加也有效果
        flex-direction: column;
        transition: 300ms;
        //  将图缩放为0.8
        transform: scale(0.8);
        // 将图片设置透明
        opacity: 0.4;
        a {
            width: 9.0133rem;
            height: 10.0267rem;
            img {
                width: 100%;
                height: 100%;
            }
        }
        p {
            width: 9.0133rem;
            font-size: .6667rem;
            margin-top: .64rem;
            color: #333;
        }
    }
    // 当前的图缩放为1
    .swiper-slide-active,
    .swiper-slide-duplicate-active{
        // 将最顶上的图片单独拿出来设置不一样的数值
        transform: scale(1);
        // 把层叠设为最高即可压住左右图片
        z-index: 999;
        opacity: 1;
    }
}
.study {
    .study_fo {
        padding: 0.2667rem;
    }
    .swiper-slide {
        font-size: 18px;
        background: #fff;
        width: 7.7333rem;
        height: 9.0667rem;
        border-radius: .2667rem;
        box-shadow: 0 0px 10px rgba(0, 0, 0, .1);
        h5 {
            font-size: .6933rem;
            margin: .5333rem 0;
            font-weight: 400;
            padding: 0 .2667rem;
        }
        p {
            font-size: .6933rem;
            color: #FF4400;
            padding: 0 .2667rem;
        }
    }

}

index.css

body {
  min-width: 320px;
  max-width: 750px;
  margin: 0 auto;
  height: 2000px;
  background-color: #F2F4F7;
}
a {
  text-decoration: none;
  color: #707070;
}
img {
  width: 100%;
  vertical-align: middle;
}
@media screen and (min-width: 750px) {
  html {
    font-size: 37.5px !important;
  }
}
.warp {
  background-color: #fff;
  padding-bottom: 1.2rem;
}
.header {
  height: 2.1333rem;
  border-bottom: 1px solid #EAEAEA;
  text-align: center;
  line-height: 2.1333rem;
  font-size: 0.9333rem;
  color: #1c1c1c;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  padding: 1.2rem 0 1.6rem 0;
}
.nav .item {
  display: flex;
  width: 33.33%;
  flex-direction: column;
  align-items: center;
}
.nav .item img {
  width: 3.7067rem;
  height: 3.7067rem;
}
.nav .item span {
  font-size: 0.6667rem;
  color: #707070;
}
.nav .item:nth-child(-n+3) {
  margin-bottom: 1.6533rem;
}
.go {
  margin: 0 0.2667rem 0 0.48rem;
}
.content {
  padding: 1.0667rem 0.64rem;
  background-color: #fff;
  margin-top: 0.2667rem;
}
.content .con-hd {
  display: flex;
  justify-content: space-between;
  height: 1.0133rem;
  line-height: 1.0133rem;
  margin-bottom: 0.9067rem;
}
.content .con-hd h4 {
  margin: 0;
  font-size: 0.7467rem;
  color: #333;
}
.content .con-hd h4 .icon {
  display: inline-block;
  width: 1.0133rem;
  height: 1.0133rem;
}
.content .con-hd .more {
  font-size: 0.5867rem;
  color: #999;
}
.get_job_focus {
  position: relative;
}
.get_job_focus .swiper-container {
  width: 14.4rem;
  height: 100%;
}
.get_job_focus .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;
  transition: 300ms;
  transform: scale(0.8);
  opacity: 0.4;
}
.get_job_focus .swiper-slide a {
  width: 9.0133rem;
  height: 10.0267rem;
}
.get_job_focus .swiper-slide a img {
  width: 100%;
  height: 100%;
}
.get_job_focus .swiper-slide p {
  width: 9.0133rem;
  font-size: 0.6667rem;
  margin-top: 0.64rem;
  color: #333;
}
.get_job_focus .swiper-slide-active,
.get_job_focus .swiper-slide-duplicate-active {
  transform: scale(1);
  z-index: 999;
  opacity: 1;
}
.study .study_fo {
  padding: 0.2667rem;
}
.study .swiper-slide {
  font-size: 18px;
  background: #fff;
  width: 7.7333rem;
  height: 9.0667rem;
  border-radius: 0.2667rem;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
}
.study .swiper-slide h5 {
  font-size: 0.6933rem;
  margin: 0.5333rem 0;
  font-weight: 400;
  padding: 0 0.2667rem;
}
.study .swiper-slide p {
  font-size: 0.6933rem;
  color: #FF4400;
  padding: 0 0.2667rem;
}

程序员shy
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员shy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值