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

同上一篇的广告一样，这一次不同的地方是加了动态，在每次加载的时候能够运行一次动画，运用的是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="data:images/fullpage_01.jpg" class="img01"><img src="data:images/fullpage_02.jpg" class="img02"><img src="data:images/fullpage_03.jpg" class="img03"><img src="data: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="data:images/xx.png" class="xx"><h3 class="wow animated bounceInLeft" data-wow-duration="1s">会计专业</h3><img src="data:images/hot01.png" class="hot01"><h5>主考院校：深圳大学</h5><img src="data:images/xx.png" class="xx"><div class="btn"><a href="#">招生简介</a></div></div><div class="slide"><img src="data:images/xx.png" class="xx"><h3 class=" animated bounceInLeft" data-wow-duration="1s">会计专业</h3><img src="data:images/hot02.png" class="hot02"><h5>主考院校：深圳大学</h5><img src="data:images/xx.png" class="xx"><div class="btn"><a href="#">招生简介</a></div>  </div><div class="slide"><img src="data:images/xx.png" class="xx"><h3 class="wow animated bounceInLeft" data-wow-duration="1s">行政管理</h3><img src="data:images/hot03.png" class="hot03"><h5>主考院校：深圳大学</h5><img src="data:images/xx.png" class="xx"><div class="btn"><a href="#">招生简介</a></div> </div><div class="slide"><img src="data:images/xx.png" class="xx"><h3 class="wow animated bounceInLeft" data-wow-duration="1s">金融专业</h3><img src="data:images/hot04.png" class="hot04"><h5>主考院校：深圳大学</h5><img src="data: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。

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

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

小程序也能接广告了，微信小程序广告位投放指南!
小程序也能接广告了,微信小程序广告位投放指南! 3月15日消息,据爆料,微信已经开始秘密测试在小程序中投放广告,并且流传出了一份<微信小程序广告位投放指引>,意味着微信小程序已经准备开启广 ...
工厂模式与抽象工厂模式小览（一）
一.文章来由一天看完 hf设计模式中的工厂模式,略微还有点消化不了,于是打算好好探究一下.其实不仅仅是这两个模式之间容易混淆,他们各自的定义也是挺绕的,下面我就仔细回过头翻书+查阅资料,重新捋一捋 ...
python小工具myqr生成动态二维码
python小工具myqr生成动态二维码 (一)安装 (二)使用 (一)安装命令: pip install myqr 安装完成后,就可以在命令行中输入 myqr 查看下使用帮助: myqr --he ...
微信小程序修改数组中的元素_微信小程序——this.setData()动态修改数组中的某一值...
微信小程序--this.setData()动态修改数组中的某一值S8v编程技术_踩坑日志_进阶指南_无知人生大家是不是都觉得微信小程序的开发方式和 vue react 这种框架的开发方式很像?S8v ...
微信小程序+.NET(九) 小程序之简单的广告拦截
微信小程序之简单的广告拦截导语:我们在web-view内嵌网上的某些网站比如我内嵌的小说网站,会包含某些影响使用和含有诱导链接的垃圾广告,这时我们该怎么处理呢? 首先,要是自己写的网站,就可 ...
NE(Network Embedding)论文小览
#NE(Network Embedding)论文小览自从word2vec横空出世,似乎一切东西都在被embedding,今天我们要关注的这个领域是Network Embedding,也就是基于一个G ...
如何除去暴风影音的左上边广告和下角动态广告
去除左上角的各种广告超链接 1.首先是stormliv.exe的后台进程开始→运行 →msconfig 先打开"服务",找到Contrl center of Strom Media ...
uni-app 微信小程序根据角色动态的更改底部tabbar
文章目录 1. 需求背景 1.1 源码下载 2. 问题前提及思路 3. 开始撸 3.1 设置 `tabbar.js` 配置不同角色不同的菜单 3.2 设置 `page.json` 3.3 vue 配置 ...
推荐｜NE(Network Embedding)论文小览，附21篇经典论文和代码
文章转自:NE(Network Embedding)论文小览,附21篇经典论文和代码自从word2vec横空出世,似乎一切东西都在被embedding,今天我们要关注的这个领域是Network Em ...

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

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

最新文章

热门文章