个人练习小览---《xx机构动态广告》

最新推荐文章于 2024-08-07 16:52:40 发布

Finca_huang

最新推荐文章于 2024-08-07 16:52:40 发布

阅读量168

点赞数

分类专栏：个人练习文章标签： html 静态界面

本文链接：https://blog.csdn.net/qq_35281096/article/details/81041618

版权

个人练习专栏收录该内容

11 篇文章 1 订阅

订阅专栏

同上一篇的广告一样，这一次不同的地方是加了动态，在每次加载的时候能够运行一次动画，运用的是fullpage.js以及animate.js。这两个js我记得我当时找的时候都是开源的，可以直接在网站上面下载。

完成时间也是2016年12月份，跟之前的作业一起制作的。耗时大概半天，因为是刚入门学HTML。

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0">
    <!--  内容正常显示   不允许用户缩放   初始比例1:1 -->
    <title>首页</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/jquery.fullPage.css">
</head>
<body>
<div id="btn" style="position: fixed; top: 0; right: 0; z-index:9">
    <video src="music.mp3" id="mp3" style="display: none"></video>
    <input type="button" value="播放" id="play">
</div>
<div id="fullpage">
<header class=" section page01">
    <img src="images/fullpage_01.jpg" class="img01">
    <img src="images/fullpage_02.jpg" class="img02">
    <img src="images/fullpage_03.jpg" class="img03">
    <img src="images/fullpage_04.jpg" class="img04">
    <h1 >广州尚德<span class="text-red">学历中心</span></h1>
    <h3 class=" animated bounceInLeft" data-wow-duration="1s">大品牌<br>大机构<br>值得信赖</h3>
    <div class="btn">
        <a href="#">点击咨询</a>
    </div>
</header>

<section class="page02 main section">
    <h1 class="text-red " >2016年成人学历<br>报考信息自助查询</h1>
    <h3 class=" animated bounceInLeft" data-wow-duration="1s">自考·成人高考·远程</h3>
    <ul>
        <li><a href="#">报考条件</a></li>
        <li><a href="#">报考条件</a></li>
        <li><a href="#">报考条件</a></li>
        <li><a href="#">报考条件</a></li>
        <li><a href="#">报考条件</a></li>
        <li><a href="#">报考条件</a></li>
        <li><a href="#">报考条件</a></li>
        <li><a href="#">报考条件</a></li>
        <li><a href="#">报考条件</a></li>
    </ul>
    <div class="btn">
        <a href="#">时间查询</a>
    </div>
</section>

<section class="page03 main section">
    <h1 >高等院校自考<br><span class="text-red">本科招生条件</span></h1>
    <p>1.中华人民共和国公民，以及港澳台同胞、海外侨胞，不受性别、年龄、学历、居住地等限制，均可报考。2.考生须通过有委托资质的正规培训机构进行审核报名。3.遵循并依据各地省委以及高等教育自考办发布的《报考简章》</p>
    <div class="news">
        <h4>考生提醒</h4>
        <p>提前报考可申请免考高数和英语
            错过需 延迟两年毕业
        </p>
    </div>
    <div class="btn">
        <a href="#">报考查询</a>
    </div>
</section>
<section class="page04 main section">
    <h1 >0基础学本科<span class="text-red">常见问题汇总</span></h1>
    <ul>
        <li><a href="#">1:哪种成人学历含金量高?</a></li>
        <li><a href="#">2.自考学历通过率高吗,难吗?</a></li>
        <li><a href="#">3:自考学费需要多少钱?后期还会有其他费用吗?</a></li>
        <li><a href="#">4:上班族也能学吗?怎么安排时间?</a></li>
        <li><a href="#">5:自考报考条件是什么?</a></li>
        <li><a href="#">6:零基础如何升本科?</a></li>
        <li><a href="#">7:初中学历也可以直接考本科吗?</a></li>
        <li><a href="#">8:报名流程是什么?需要办理什么手续?</a></li>
    </ul>
    <div class="btn">
        <a href="#">免费回电解答</a>
    </div>
</section>
<section class="page05 main section">
    <h1 ><span class="text-red">签订协议</span><br>满足条件即可退费</h1>
    <ul>
        <li><a href="#">高升本入口</a></li>
        <li><a href="#">高升本入口</a></li>
        <li><a href="#">高升本入口</a></li>
        <li><a href="#">高升本入口</a></li>

    </ul>
    <div class="btn">
        <a href="#">免费回电解答</a>
    </div>
</section>
<section class="page06 main section">
    <h1 ><span class="text-red">精选热门</span>院校专业</h1>
     <div class="slide">
    <img src="images/xx.png" class="xx">
    <h3 class="wow animated bounceInLeft" data-wow-duration="1s">会计专业</h3>
    <img src="images/hot01.png" class="hot01">
    <h5>主考院校：深圳大学</h5>
    <img src="images/xx.png" class="xx">
    <div class="btn">
        <a href="#">招生简介</a>
    </div></div>
    <div class="slide">
    <img src="images/xx.png" class="xx">
    <h3 class=" animated bounceInLeft" data-wow-duration="1s">会计专业</h3>
    <img src="images/hot02.png" class="hot02">
    <h5>主考院校：深圳大学</h5>
    <img src="images/xx.png" class="xx">
    <div class="btn">
        <a href="#">招生简介</a>
    </div>  </div>
    <div class="slide">
    <img src="images/xx.png" class="xx">
    <h3 class="wow animated bounceInLeft" data-wow-duration="1s">行政管理</h3>
    <img src="images/hot03.png" class="hot03">
    <h5>主考院校：深圳大学</h5>
    <img src="images/xx.png" class="xx">
    <div class="btn">
        <a href="#">招生简介</a>
    </div> </div>
    <div class="slide">
    <img src="images/xx.png" class="xx">
    <h3 class="wow animated bounceInLeft" data-wow-duration="1s">金融专业</h3>
    <img src="images/hot04.png" class="hot04">
    <h5>主考院校：深圳大学</h5>
    <img src="images/xx.png" class="xx">
    <div class="btn">
        <a href="#">招生简介</a>
    </div>
    </div>
</section>
<section class="page07 main section">
    <h1 >助学名额申请</h1>
    <h3 class=" animated bounceInLeft" data-wow-duration="1s">*广州市<span class="text-black">限额1000人</span>*</h3>
    <p>在这个城市，很多时候，我们怀揣梦想，却因为学历之低而被拒之门外，万余元的学费使人望而却步。</p>
    <p>尚德机构认为，让价格阻碍你追求梦想是我们的耻辱。<br>为了让人人学得起本科，
        过去十多年我们成功让学费降 到几千元，每年帮助数十万名学员考取本科。</p>
    <p>      今天我们仍不满足，再次推出“尚德励志助学计划”每位学员提交申请材料，
        <br>即可获得200~1000元不等的助学金，助您实现本科学历，拥有美好未来。</p>
    <div class="btn">
        <a href="#">在线咨询</a>
    </div>
</section>
<script src="js/wow.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

<script>
    $(document).ready(function(){
        $('#fullpage').fullpage({
            verticalCentered:false,
            navigation:false,
            navigationPosition:"left",
            navigationTooltips:["01","02","03","04"],
            slidesNavigation:true,
            afterLoad:function (anchorLink,index) {
                if(index === 1){
                            $(".page01 h1").addClass("animated bounce wow");
                            $(".page01 .img01").addClass("animated flash wow");
                            $(".page01 .img02").addClass("animated flash wow");
                            $(".page01 .img03").addClass("animated flash wow");
                            $(".page01 .img04").addClass("animated flash wow");
                            $(".page01 .btn").addClass("animated slideInRight wow")

                }
                else if (index === 2)
                {
                    $(".page02 h1").addClass("animated bounce wow");
                    $(".page02 .btn").addClass("animated slideInRight wow");
                    $(".page02  h3").addClass("animated flipInY wow");
                    $(".page02  ul li").addClass("animated bounceIn wow");
                }
                else if (index === 3)
                {
                    $(".page03 h1").addClass("animated bounce wow");
                    $(".page03  h3").addClass("animated flipInY wow");
                    $(".page03  h4").addClass("animated lightSpeedIn wow");
                    $(".page03  p").addClass("animated rotateIn wow");
                    $(".page03  .news").addClass("animated slideInDown wow");
                    $(".page03 .btn").addClass("animated slideInRight wow");
                }
                else if (index === 4)
                {
                    $(".page04 h1").addClass("animated bounce wow");
                    $(".page04 .btn").addClass("animated slideInRight wow");
                    $(".page04  ul li:nth-child(2n-1)").addClass("animated slideInLeft wow");
                    $(".page04  ul li:nth-child(2n)").addClass("animated slideInRight wow");
                }
                else if (index === 5)
                {
                    $(".page05 h1").addClass("animated bounce wow");
                    $(".page05 .btn").addClass("animated slideInRight wow");
                    $(".page05  ul li:nth-child(2n)").addClass("animated slideInLeft wow");
                    $(".page05  ul li:nth-child(2n-1)").addClass("animated slideInRight wow");
                }
                else if (index === 6)
                {
                    $(".page06 h1").addClass("animated bounce wow");
                    $(".page06 .btn").addClass("animated slideInRight wow");
                    $(".page06  h3").addClass("animated flipInY wow");
                    $(".page06  h5").addClass("animated flash wow");
                    $(".page06 .hot01").addClass("animated shake wow");
                    $(".page06 .hot02").addClass("animated shake wow");
                    $(".page06 .hot03").addClass("animated shake wow");
                    $(".page06 .hot04").addClass("animated shake wow");
                }
                else if (index === 7)
                {
                    $(".page07 h1").addClass("animated bounce wow");
                    $(".page07 .btn").addClass("animated slideInRight wow");
                    $(".page07  h3").addClass("animated flipInY wow");
                    $(".page07  p").addClass("animated rotateIn wow");
                }
            }

        });

    });


    var mp3=document.getElementById("mp3");
    var play=document.getElementById("play");

    play.οnclick=function(){

        if (this.value=="播放")
        {
            mp3.play();
            this.value="暂停";
        }
        else
        {
            mp3.pause();
            this.value="播放";
        }


    };
</script>
    </div>
</body>
</html>

主要的css

body,html{
    font-family: "微软雅黑";
    font-size: 20px;
    max-width: 32rem;
    min-width: 15rem;
}
header{
    max-width: 32rem;
    min-width: 15rem;
    margin: auto;
    text-align: center;
}
a{
    text-decoration: none;
}
img{
    border: none;
    vertical-align: middle;
}
.page01 img{
    display: block;
    width: 80%;
    margin: auto;
}
.page01{
    text-align: center;
    overflow: hidden;
    background: #fafafa;
}
.page01 h1{
    font-size: 1.65rem;
    color: #3a3a3a;
    margin-top: 0rem;
}
.page01 h3{
    font-size: 1rem;
    color: #3a3a3a;
    font-weight: normal;
    line-height: 1.65rem;
}
.btn{
    margin: 2.9rem 0rem 2.85rem 0rem;
    text-align: center;
}
.btn a{
    font-size: 1rem;
    color: #fff;
    background-color: #2c3242;
    padding: 0.5rem 1.15rem;
    text-decoration: none;
    display: inline-block;
}
.text-red{
    color: #e93a57 !important;
}
.text-black{
    color: black !important;
}

.main h1{
    font-size: 1.5rem;
    text-align: center;
    color: #3a3a3a;
}
.main h3{
    font-size: 1rem;
    color: #3a3a3a;
    font-weight: normal;
    text-align: center;
}
.main p{
    width: 90%;
    margin: auto;
    font-size: 0.7rem;
    color: #3a3a3a;
    line-height: 1.1rem;
}
.page02{
    overflow: hidden;
}
.page02 ul{
    padding: 0;
    font-size: 0rem;
    text-align: center;
    width: 12.725rem;
    margin: auto;
}
.page02 ul li{
    list-style: none;
    display: inline-block;
    margin-bottom: 0.1rem;
    margin-right: 0.1rem;
}
.page02 ul li:nth-child(3n){
    margin-right: 0;
}
.page02 ul li:nth-child(2n) a{
    background-color: #df6363;
}
.page02 ul li:nth-child(3) a{
    background-color: #7ac470;
}
.page02 ul li:nth-child(8) a{
    background-color: #7ac470;
}
.page02 ul li:nth-child(6) a{
    background-color: #66c5e4;
}
.page02 ul li a{
    display: block;
    width: 4.175rem;
    height: 1.55rem;
    background-color: #646363;
    color: #fff;
    font-size: 0.65rem;
    text-align: center;
    line-height: 1.55rem;
}
.page03{
    background: #f1f1f1;
    overflow: hidden;
}
.page03 .news{
    width: 10.5rem;
    height: 4.55rem;
    border: 1px solid #3a3a3a;
    margin: 1.5rem auto 0 auto;
    text-align: center;
}
.page03 .news h4{
    margin: -0.8rem 0 0 0;
    font-size: 1.2rem;
    color: #3a3a3a;
    background: #f1f1f1;
    display: inline-block;
    position: relative;
    top: -0.6rem;
    padding: 0rem 0.5rem;
}
.page04{
    overflow: hidden;
}
.page04 h1{
    font-size: 1.25rem;
    margin-top: 2rem;
}

.page04 ul{
    list-style: none;
    padding: 0;
}
.page04 ul li{
    margin-bottom:0.25rem;
}
.page04 ul li a{
    display: block;
    background-color: #eaeaea;
    margin:auto;
    width: 90%;
    height: 1.25rem;
    line-height: 1.25rem;
    color: #3a3a3a;
    font-size: 0.9rem;
    text-indent: 0.5rem;
}
.page04 ul li:nth-child(2n) a{
    background-color: #ed3654;
}
.page05{
    background: #f1f1f1;
    overflow: hidden;
}
.page05 h1{
    font-size: 1.25rem;
    margin-top: 2rem;
}
.page05 ul{
    padding: 0rem;
    width: 12rem;
    margin: auto;
    overflow: hidden;
    font-size: 0rem;
}
.page05 ul li{
    list-style: none;
    float: left;
    width: 50%;
    margin-bottom: 0.78rem;
}
.page05 ul li:nth-child(2n)a{
    margin-left: 0.85rem;
}
.page05 ul li a{
    display: block;
    width: calc(100% - 0.425rem);
    text-align: center;
    line-height:1.25rem;
    color: #3a3a3a;
    font-size: 0.7rem;
    height: 1.25rem;
    border: 1px solid #3a3a3a;
}
.page06{
    background-color: #fef5da;
    overflow: hidden;
    text-align: center;
    height: 40rem;

}
.page06 .xx{
    display: block;
    margin:auto;
}
.page06 .hot01{
    display: block;
    width: 80%;
    margin: auto;
}
.page06 .hot02{
    display: block;
    margin: auto;
    width: 80%;
}
.page06 .hot03{
     display: block;
     margin: auto;
     width: 80%;
 }
.page06 .hot04{
      display: block;
      margin: auto;
      width: 80%;
  }
.page06 h1{
    font-size: 1.65rem;
    margin-top: 1rem;
}
.page07 {
    overflow: hidden;
    background-color: #c12d3b;
    text-align: center;
}
.page07 h1{
    font-size: 1.25rem;
    margin-top: 2rem;
    color: white;
    margin-bottom: 1rem;
}
.page07 p {
    color: white;
    margin-bottom: 1rem;

}
.page07 h3 {
    color: white;
}
.page07 p+p{
    margin-top:1rem;
}

展示部分效果（iphone4）

有个播放的按钮原因应该是当时想一打开就响起音乐，但是还没有学会关于音乐的js。

第二个加了动态的静态页面、

Finca_huang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
个人练习小览---《xx机构动态广告》

同上一篇的广告一样，这一次不同的地方是加了动态，在每次加载的时候能够运行一次动画，运用的是fullpage.js以及animate.js。这两个js我记得我当时找的时候都是开源的，可以直接在网站上面下载。完成时间也是2016年12月份，跟之前的作业一起制作的。耗时大概半天，因为是刚入门学HTML。index.html&lt;!DOCTYPE html&gt;&lt;html lang="zh-c...
复制链接

扫一扫