• 附录10-项目黑马面面

    目录

    1  摹客的使用

    2  使用swiper

    2.1  参数的查询

    2.2  混合使用swiper效果

    3  git提交到码云

    3.1  创建仓库

    3.4  上传至gitee

    3.4.1  配置仓库

    3.4.2  初始化仓库

    3.4.3  将本地文件放入暂存区

    3.4.4  提交到本地

    3.4.5  链接远程仓库

    3.4.6  将文件推送到gitee仓库

    3.5  gitee发布静态网站

    视频地址

    01-寒暄_哔哩哔哩_bilibili

    项目效果地址

    Document

    项目要做成这个样子

    我先放代码，代码的结构是这样的

    swiper中的内容我们后面会提到，charge_learn是充电学习的css与js，employment_guidance是就业指导的css与js

    index.html

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport"
    8.         content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    9.     <link rel="stylesheet" href="css/initialization.css">
    10.     <link rel="stylesheet" href="css/index.css">
    11.  
    12.     <link rel="stylesheet" href="css/swiper/swiper.min.css">
    13.     <link rel="stylesheet" href="css/swiper/swiper-bundle.min.css">
    14.     <link rel="stylesheet" href="css/employment_guidance/rotate.css">
    15.     <link rel="stylesheet" href="css/employment_guidance/rotate_btn.css">
    16.  
    17.     <link rel="stylesheet" href="css/charge_learn/rotate.css">
    18.  
    19.     <title>Documenttitle>
    20. head>
    21.  
    22. <body>
    23.     <section class="header">黑马面面section>
    24.     <section class="nav">
    25.         <a href="#">
    26.             <span>span>
    27.             <span>HR面试span>
    28.         a>
    29.         <a href="#">
    30.             <span>span>
    31.             <span>笔试span>
    32.         a>
    33.         <a href="#">
    34.             <span>span>
    35.             <span>技术测试span>
    36.         a>
    37.         <a href="#">
    38.             <span>span>
    39.             <span>模拟面试span>
    40.         a>
    41.         <a href="#">
    42.             <span>span>
    43.             <span>面试技巧span>
    44.         a>
    45.         <a href="#">
    46.             <span>span>
    47.             <span>薪资查询span>
    48.         a>
    49.     section>
    50.     <section class="banner">section>
    51.     <section class="teach_work">
    52.         <div class="teach_work_header">
    53.             <span><img src="images/i2.png" alt="">就业指导span>
    54.             <a href="#">更多>>a>
    55.         div>
    56.  
    57.         
    58.         <div class="swiper-container teach_work_mySwiper">
    59.             <div class="swiper-wrapper ">
    60.                 <div class="swiper-slide">
    61.                     <img src="upload/pic.png" alt="">
    62.                     <p>老师教你应对面试技巧p>
    63.                 div>
    64.                 <div class="swiper-slide">
    65.                     <img src="upload/2.jpeg" alt="">
    66.                     <p>老师教你应对面试技巧p>
    67.                 div>
    68.                 <div class="swiper-slide">
    69.                     <img src="upload/3.jpeg" alt="">
    70.                     <p>老师教你应对面试技巧p>
    71.                 div>
    72.                 <div class="swiper-slide">
    73.                     <img src="upload/4.jpeg" alt="">
    74.                     <p>老师教你应对面试技巧p>
    75.                 div>
    76.  
    77.             div>
    78.         div>
    79.         <div class="swiper-button-next swiper-button-black">div>
    80.         <div class="swiper-button-prev swiper-button-black">div>
    81.  
    82.     section>
    83.     <section class="charge_learn">
    84.         <div class="charge_learn_header">
    85.             <span><img src="images/i1.png" alt="">充电学习span>
    86.             <a href="#">更多>>a>
    87.         div>
    88.  
    89.         <div class="swiper charge_learn_mySwiper">
    90.             <div class="swiper-wrapper">
    91.                 <div class="swiper-slide">
    92.                     <img src="upload/pic1.png" alt="">
    93.                     <p>说地道英语，告别中式英语p>
    94.                     <p class="learn_people">156人学习p>
    95.                 div>
    96.                 <div class="swiper-slide">
    97.                     <img src="upload/pic2.png" alt="">
    98.                     <p>说地道英语，告别中式英语p>
    99.                     <p class="learn_people">156人学习p>
    100.                 div>
    101.                 <div class="swiper-slide">
    102.                     <img src="upload/pic1.png" alt="">
    103.                     <p>说地道英语，告别中式英语p>
    104.                     <p class="learn_people">156人学习p>
    105.                 div>
    106.             div>
    107.         div>
    108.     section>
    109.     <section class="footer">
    110.         <div>
    111.             <img src="images/home.png" alt="">
    112.             <p>首页p>
    113.         div>
    114.         <div>
    115.             <img src="images/ms.png" alt="">
    116.             <p>模拟面试p>
    117.         div>
    118.         <div>
    119.             <img src="images/net.png" alt="">
    120.             <p>技术面试p>
    121.         div>
    122.         <div>
    123.             <img src="images/user.png" alt="">
    124.             <p>我的主页p>
    125.         div>
    126.     section>
    127.  
    128. body>
    129. <script src="js/flexible.js">script>
    130.  
    131. <script src="js/swiper/swiper-bundle.min.js">script>
    132. <script src="js/swiper/swiper.min.js">script>
    133. <script src="js/employment_guidance/rotate.js">script>
    134. <script src="js/employment_guidance/rotate_btn.js">script>
    135.  
    136. <script src="js/charge_learn/rotate.js">script>
    137.  
    138. <script src="js/index.js">script>
    139.  
    140. html>

    index.less

    1. @rate:37.5;
    2.  
    3. // body {
    4. //     height:3000px!important;
    5. // }
    6. // 头部的黑马面面
    7. .header {
    8.     text-align: center;
    9.     font-size: (20rem/@rate);
    10.     margin-top: (20rem/@rate);;
    11. }
    12.  
    13. // 导航区域(六个功能)
    14.  
    15. .nav {
    16.     margin-top: (30rem/@rate);
    17.     display: flex;
    18.     flex-wrap: wrap;
    19.     height:(250rem/@rate);
    20.     a {
    21.         width:33.33333%;
    22.         display:flex;
    23.         flex-direction: column;
    24.         align-items: center;
    25.         span:nth-child(1) {
    26.             width:(69.5rem/@rate);
    27.             height:(69.5rem/@rate);
    28.             background-repeat: no-repeat;
    29.             background-size: (69.5rem/@rate) (69.5rem/@rate);
    30.         }
    31.         span:nth-child(2) {
    32.             font-size:(14rem/@rate);
    33.         }
    34.     }
    35.     a:nth-child(1) {
    36.         span:nth-child(1) {
    37.             background-image: url(../images/icon1.png);
    38.         }
    39.     }
    40.  
    41.     a:nth-child(2) {
    42.         span:nth-child(1) {
    43.             background-image: url(../images/icon2.png);
    44.         }
    45.     }
    46.     a:nth-child(3) {
    47.         span:nth-child(1) {
    48.             background-image: url(../images/icon3.png);
    49.         }
    50.     }
    51.     a:nth-child(4) {
    52.         span:nth-child(1) {
    53.             background-image: url(../images/icon4.png);
    54.         }
    55.     }
    56.     a:nth-child(5) {
    57.         span:nth-child(1) {
    58.             background-image: url(../images/icon5.png);
    59.         }
    60.     }
    61.     a:nth-child(6) {
    62.         span:nth-child(1) {
    63.             background-image: url(../images/icon6.png);
    64.         }
    65.     }
    66. }
    67.  
    68. // 横幅区域(每日十练)
    69. .banner {
    70.     width: 100%;
    71.     height:(76rem/@rate);
    72.     background-image: url(../upload/go.png);
    73.     background-repeat: no-repeat;
    74.     background-size: auto (76rem/@rate);
    75.     background-position: center center;
    76. }
    77.  
    78. // 就业指导头部
    79. .teach_work {
    80.     position: relative;
    81.     width:100%;
    82.     height:(300rem/@rate);
    83.     padding-left: (5rem/@rate);
    84.     padding-right: (5rem/@rate);
    85.     margin-top:(20rem/@rate);
    86.     .teach_work_header {
    87.         width: 100%;
    88.         display: flex;
    89.         justify-content: space-between;
    90.         height: (19rem/@rate);
    91.         line-height: (19rem/@rate);
    92.         span {
    93.             img {
    94.                 width:(19rem/@rate);
    95.                 height:(19rem/@rate);
    96.             }
    97.             font-size:(16rem/@rate);
    98.             font-weight: bolder;
    99.         }
    100.         a {
    101.             position:absolute;
    102.             right:0px;
    103.             padding-right: (5rem/@rate);
    104.             font-size:(14rem/@rate);
    105.             color: #888;
    106.         }
    107.     }
    108. }
    109.  
    110. // 充电学习头部
    111. .charge_learn {
    112.     position: relative;
    113.     width:100%;
    114.     height:(250rem/@rate);
    115.     padding-left: (5rem/@rate);
    116.     padding-right: (5rem/@rate);
    117.     .charge_learn_header {
    118.         width: 100%;
    119.         display: flex;
    120.         justify-content: space-between;
    121.         height: (19rem/@rate);
    122.         line-height: (19rem/@rate);
    123.         span {
    124.             img {
    125.                 width:(19rem/@rate);
    126.                 height:(19rem/@rate);
    127.             }
    128.             font-size:(16rem/@rate);
    129.             font-weight: bolder;
    130.         }
    131.         a {
    132.             position:absolute;
    133.             right:0px;
    134.             padding-right: (5rem/@rate);
    135.             font-size:(14rem/@rate);
    136.             color: #888;
    137.         }
    138.     }
    139. }
    140.  
    141. // 尾部
    142. .footer {
    143.     position: fixed;
    144.     bottom:0px;
    145.     width: 100%;
    146.     height: (70rem/@rate);
    147.     z-index: 999;
    148.     display: flex;
    149.     background-color: white;
    150.     div {
    151.         flex:1;
    152.         display: flex;
    153.         flex-direction: column;
    154.         justify-content: center;
    155.         align-items: center;
    156.         p {
    157.             font-size: (14rem/@rate);
    158.             margin-top: (5rem/@rate);
    159.         }
    160.         img {
    161.             width: (25rem/@rate);
    162.             height:(25rem/@rate)
    163.  
    164.         }
    165.     }
    166. }

    index.js中没有内容，没有做轮播图之外的交互动作

    charge_learn中的rotate.less

    1. @rate: 37.5;
    2.  
    3. .charge_learn {
    4.     .swiper {
    5.         width: 100%;
    6.         height: 80%;
    7.     }
    8.  
    9.     .swiper-slide {
    10.         text-align: center;
    11.         background: #fff;
    12.  
    13.         // width: (290rem/@rate);
    14.         // height: (340rem/@rate);
    15.  
    16.         /* Center slide text vertically */
    17.         display: -webkit-box;
    18.         display: -ms-flexbox;
    19.         display: -webkit-flex;
    20.         display: flex;
    21.         flex-direction: column;
    22.         -webkit-box-pack: center;
    23.         -ms-flex-pack: center;
    24.         -webkit-justify-content: center;
    25.         justify-content: center;
    26.         -webkit-box-align: center;
    27.         -ms-flex-align: center;
    28.         // -webkit-align-items: flex-start;
    29.         // align-items: flex-start;
    30.  
    31.         -webkit-align-items: center;
    32.         align-items: center;
    33.  
    34.         p {
    35.             width: 85%;
    36.             font-size:(14rem/@rate);
    37.             text-align: left;
    38.             margin-top:(5rem/@rate);
    39.         }
    40.  
    41.         .learn_people {
    42.             color: red;
    43.         }
    44.     }
    45.  
    46.     .swiper-slide img {
    47.         display: block;
    48.         width: (136rem/@rate);
    49.         height: (85.5rem/@rate);
    50.         object-fit: cover;
    51.     }
    52. }

    employment_guidance中的rotate.less

    1. @rate: 37.5;
    2.  
    3. .teach_work {
    4.     .swiper-container {
    5.         width: 80%;
    6.         height: 90%;
    7.     }
    8.  
    9.     .swiper-slide {
    10.         text-align: center;
    11.         // font-size: 18px;
    12.         background: #fff;
    13.  
    14.         /* Center slide text vertically */
    15.         display: -webkit-box;
    16.         display: -ms-flexbox;
    17.         display: -webkit-flex;
    18.         display: flex;
    19.         flex-direction: column;
    20.         -webkit-box-pack: center;
    21.         -ms-flex-pack: center;
    22.         -webkit-justify-content: center;
    23.         justify-content: center;
    24.         -webkit-box-align: center;
    25.         -ms-flex-align: center;
    26.         -webkit-align-items: center;
    27.         align-items: center;
    28.         transition: 300ms;
    29.         transform: scale(0.8);
    30.  
    31.         opacity: 0.5;
    32.         // margin-left: -20px;
    33.         // margin-right: -20px;
    34.     }
    35.  
    36.     .swiper-slide-active,
    37.     .swiper-slide-duplicate-active {
    38.         transform: scale(1);
    39.         z-index: 999;
    40.  
    41.         opacity: 1;
    42.     }
    43.  
    44.  
    45.     .swiper-slide img {
    46.         display: block;
    47.         width: (169rem/@rate);
    48.         height: (188rem/@rate);
    49.     }
    50.  
    51.  
    52.     .swiper-slide p {
    53.         font-size: (14rem/@rate);
    54.     }
    55.  
    56.     .swiper-button-black:after {
    57.         font-size: 25px;
    58.         opacity: 0.7;
    59.         // width:11px;
    60.         // height:22px;
    61.     }
    62. }

    employment_guidance的按钮也有自带的一个样式，但那个与上面的rotate.css有的地方有冲突，有的地方没用，所以后面就删掉了，不影响使用

    charge_learn中的rotate.js

    1. var swiper = new Swiper(".charge_learn_mySwiper", {
    2.     slidesPerView: 2.4,
    3.     // spaceBetween: 30,
    4.     pagination: {
    5.       el: ".swiper-pagination",
    6.       clickable: true,
    7.     },
    8. });

    employment_guidance中的ratate.js

    1. var swiper = new Swiper('.swiper-container', {
    2.   slidesPerView: 2,
    3.   // spaceBetween: 30,
    4. centeredSlides: true,
    5. loop: true,
    6.   pagination: {
    7.     el: '.swiper-pagination',
    8.     clickable: true,
    9.   },
    10. });

    employment_guidance中的ratate_btn.js

    1. var swiper = new Swiper(".teach_work_mySwiper", {
    2.   slidesPerView: 2,
    3.   // spaceBetween: 30,
    4.   loop: true,
    5.   centeredSlides: true,
    6.   pagination: {
    7.     el: ".swiper-pagination",
    8.     clickable: true,
    9.   },
    10.   navigation: {
    11.     nextEl: ".swiper-button-next",
    12.     prevEl: ".swiper-button-prev",
    13.   },
    14. });

    以上就项目的基本内容，下面我提几点需要注意的地方

    1  摹客的使用

    在视频的P471-P472 介绍了摹客的使用，这个平台可以方便开发人员对原型图进行测量，切图，并且可以生成局部的CSS代码，这个得需要正式版的PS，我这里没有，所以就不用了，感兴趣的朋友可以看一下

    摹客官网 更好的产品设计协作平台 - 摹客

    2  使用swiper

    swiper是用于做轮播图的插件，官网地址 Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

    可以在官网的这里下载一些文件

    你也可以不在这里下载，在线演示中有很多效果

    找到你需要的轮播图样式-异性的slide，之后点击在新窗口打开

    • 这里注意，如果为了图省事，最好不要混合抄，改起来会有一点儿麻烦

    按下F12后可以发现html,css与js

    现在得到了html,css与js，在html中引入css与js的正确路径

    2.1  参数的查询

    搞下来后，比如说你发现这个不知道是干什么用的

    这个时候，在swiper的API文档可以查看API|

    在这里搜索可以发现这个变量是什么，以及它的用法

    2.2  混合使用swiper效果

    在就业指导中，我们还需要两个按钮，找一找发现这个差不多

    用同样的方法搞下来，再改一改，调一调，就能用了

    charge_learn中的轮播图也是使用swiper提供的效果，使用的时候注意不要将两个轮播图给同一个类名

    3  git提交到码云

    码云是gitee，你需要先搞一个账号 Gitee - 基于 Git 的代码托管和研发协作平台

    3.1  创建仓库

    登陆后新建一个仓库

    输入名称后直接点击创建就可以了

    • 如果你不想使用git提交，需要在这里勾选初始化仓库，勾选后我们可以通过在网页上上传提交文件

    创建之后会告诉你怎么传

    3.4  上传至gitee

    安装完成后，在项目根目录下右键，点击Git Bash Here，如果不了解git可以看一下这个 git基本操作_Suyuoa的博客-CSDN博客

    3.4.1  配置仓库

    把gitee的全局设置提示粘进去就可以了

    3.4.2  初始化仓库

    输入后会发现项目路径下多了一个.git

    3.4.3  将本地文件放入暂存区

    3.4.4  提交到本地

    3.4.5  链接远程仓库

    仓库地址在这里可以看到

    我们输入这行命令

    3.4.6  将文件推送到gitee仓库

    发布成功后会在gitee仓库中看到我们刚刚上传的文件

    3.5  gitee发布静态网站

    点击服务后，然后点击Gitee Pages

    实名认证之后点击启动

    启动成功后会得到一个网址

    在连接互联网的状态下访问这个地址就可以访问我们的静态网页了

  • 相关阅读:
    java毕业设计车险销售管理系统mybatis+源码+调试部署+系统+数据库+lw
    Nginx动静分离、URLRwrite、防盗链及Https证书配置
    获取今天包括未来几天数据
    应急响应-日志分析
    Java进阶（十三）网络编程
    【刷题笔记6】LeetCode 162. 寻找峰值（二分查找优化）
    [Codeforces] games (R1200) Part.3
    QT day4
    初识Nodejs -- nodejs简介
    Python面经
  • 原文地址：https://blog.csdn.net/potato123232/article/details/126462016