模仿实现超级课程表网页
一、作业内容
原网页链接:http://www.super.cn/
模仿网页码云链接:https://gitee.com/yourmayan/codes/8m4q2156t0orvjuxcwysz79
模仿网页链接:http://127.0.0.1:8020/HelloHBuilder/new_file.html?__hbt=1553603553969
二、网页截图
三、源代码
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="keywords" content="超级课程表,大学生必备APP,校园社交应用,大学生,校园应用,社交应用,课程表,Friday,课程表软件,表表机器人,智能机器人,表表下课聊,下课聊,超级课程表下课聊,外语学习,学习,教育,代课,代课神器,蹭课,蹭课神器,操场" /> <meta name="description" content="超级课程表,大学生必备APP,校园最火社交应用,大学生,校园应用,社交应用,课程表,Friday,课程表软件,表表机器人,智能机器人,表表下课聊,下课聊,超级课程表下课聊,操场" /> <meta name="renderer" content="webkit" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <title>超级课程表 | 大学生必备APP</title> <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> <link rel="stylesheet" type="text/css" href="http://qiniu-web.super.cn/super/0302/statics/css/common.css?v=5.0.2" /> <link rel="stylesheet" type="text/css" href="http://qiniu-web.super.cn/super/0302/statics/css/index.css?v=5.0.2" /> <style> .p-o-banner { display: block; position: absolute; top: 153px; left: 200px; } </style> </head> <body> <div id="wrap"> <div class="header"> <div class="h-center page-center clearfix"> <div class="h-c-logo-box float-left-box"> <i class="c-l-b-logo"></i> </div> <div class="float-left-box"> <img src="http://qiniu-web.super.cn/super/0302/statics/indexziy1@4x.png" style="display: block; width: 60px; margin: 10px 0 0 20px;"> </div> <ul class="h-c-nav float-right-box clearfix"> <li class="index"><a href="http://www.super.cn">首页</a></li> <li class="ke"><a target="_blank" href="http://ke.super.cn/intro/index.html">第二大学</a></li> <li class="caochang"><a target="_blank" href="http://caochang.super.cn">下课聊</a></li> <li class="club"><a target="_blank" href="http://club.super.cn">超级社团</a></li> <li class="about"><a href="http://www.super.cn/aboutus.php">关于我们</a></li> <li class="join"><a href="http://www.super.cn/joinus.php">加入我们</a></li> <li><a id="contact-btn" class="contact" href="javascript:void(0)" >联系我们<span class="icon"></span></a></li> <div id='fixed-box' class="display-none"> <div id="fixed-contact" class='open-box'> <div class='open-content'> <div class='qq-contact can-border'> <div class='clearfix'> <div class="clearfix"> <p class="qq-title float-left-box">产品投诉/客服:</p> </div> <a class='qq-btn' href="http://tieba.baidu.com/f?kw=%E8%B6%85%E7%BA%A7%E8%AF%BE%E7%A8%8B%E8%A1%A8" target="_blank">超级课程表百度贴吧</a> </div> <div class='margin-box clearfix'> <p class='qq-tel float-left-box'>QQ客服:3061694769</p> <p style='margin : 5px 22px 0 110px'><a href="http://wpa.qq.com/msgrd?v=3&uin=3061694769&site=qq&menu=yes" target="_blank" class='qq-pic' ></a></p> </div> </div> <div class='qq-contact can-border'> <div class='clearfix'> <p class='qq-title float-left-box'>学生社团合作:</p> </div> <div class='margin-box clearfix'> <p class='qq-tel float-left-box'>郑先生:</p> <p class='qq-num'><span class="q-n-icon"></span><span class="q-n-txt">181-0282-5513</span></p> </div> </div> <div class='qq-contact can-border'> <div class='clearfix'> <p class='qq-title float-left-box'>商务联系人:<span></span></p> </div> <div class='margin-box clearfix'> <p class='qq-tel float-left-box'>詹先生:694839513(QQ)</p> <p style='margin : 5px 22px 0 110px'><a href="http://wpa.qq.com/msgrd?v=3&uin=694839513&site=qq&menu=yes" target="_blank" class='qq-pic' ></a></p> </div> </div> <div class='qq-contact'> <div class='clearfix'> <p class='qq-title float-left-box'>广告投放:<span></span></p> </div> <div class='margin-box clearfix'> <p class='qq-tel float-left-box'>张女士:77044581(QQ)</p> <p style='margin : 5px 22px 0 110px'><a href="http://wpa.qq.com/msgrd?v=3&uin=77044581&site=qq&menu=yes" target="_blank" class='qq-pic' ></a></p> </div> </div> </div> </div> </div> <script> </script> </ul> </div> </div> <div class="main"> <div class="page-one"> <div class="page-center"> <img src="http://qiniu-web.super.cn/super/0302/statics/superappfont.png" class="p-o-banner"> <div class="p-o-btn-group"> <a href="javascript:void(0)" class="modal-btn b-g-btn iOS" data-modal="#iOS-modal"><span class="icon"></span><span>iPhone版</span></a> <a href="javascript:void(0)" class="modal-btn b-g-btn andriod" data-modal="#andriod-modal"><span class="icon"></span><span>Android版</span></a> </div> </div> </div> <div class="page-intro"> <div class="page-center clearfix"> <div class="p-i-box float-left-box"> <p class="i-b-icon class"></p> <p class="i-b-title">智能课表</p> <p class="i-b-detail">快捷导入课表随时看<br/>当然不止是课表</p> </div> <div class="p-i-box float-left-box"> <p class="i-b-icon study"></p> <p class="i-b-title">学习必备</p> <p class="i-b-detail">考试倒计时、笔记、查成绩<br/>更多实用功能等你去发现</p> </div> <div class="p-i-box float-left-box"> <p class="i-b-icon school"></p> <p class="i-b-title">校园动态</p> <p class="i-b-detail">新鲜事、社团活动、跳蚤市场<br/>校园热门资讯一手掌握</p> </div> <div class="p-i-box float-left-box"> <p class="i-b-icon chat"></p> <p class="i-b-title">下课聊</p> <p class="i-b-detail">热闹的大学生兴趣交友社区<br/>帮你捕捉更多小伙伴</p> </div> </div> </div> <div class="download-page display-none" id="iOS-modal"> <div class="mask"></div> <div class="d-p-wrap clearfix"> <div class="d-p-content"> <p class="p-w-title p-w-line">超级课程表iPhone V9.5.4<a href="javascript:void(0)" class="close-modal-btn icon"></a></p> <div class="p-w-line"> <a target="_blank" href="http://itunes.apple.com/cn/app/id573868981" class="p-w-btn iOS"><span class="icon"></span><span class="w-b-txt">去App Store下载</span></a> </div> <div class="p-w-code"> <p class="w-c-txt">扫描二维码下载</p> <p class="icon iOS"></p> </div> </div> </div> </div> <div class="download-page display-none" id="andriod-modal"> <div class="mask"></div> <div class="d-p-wrap clearfix"> <div class="d-p-content"> <p class="p-w-title p-w-line">超级课程表Adnroid Phone V9.5.4<a href="javascript:void(0)" class="close-modal-btn icon"></a></p> <div class="p-w-line"> <a target="_blank" href="http://download.myfriday.cn/download/Android/app-9.5.4-127-SoftwareUpdate-release.apk" class="p-w-btn andriod"><span class="icon"></span><span class="w-b-txt">下载安装包</span></a> </div> <div class="p-w-code"> <p class="w-c-txt">扫描二维码下载</p> <p class="icon andriod"></p> </div> </div> </div> </div> <a id="diaocha-box" href="dataSchool.php?periods=7"> <img src="http://qiniu-web.super.cn/super/0302/statics/img/dataSchool/logo/dataSchool7.png" /> </a> </div> <div class="footer"> <div class="f-icon-box"> <a href="http://weibo.com/u/2664302423" target="_blank" class="icon weibo"></a> <div id="weixin-btn" class="icon weixin"> <div id="footer-weixin"> <p class="icon code"></p> <p>微信扫一扫关注官方公众号</p> <p class="trangle"></p> </div> </div> <a href="http://page.renren.com/601524506" target="_blank" class="icon renren"></a> </div> <script src="http://qiniu-web.super.cn/super/0302/statics/js/jquery-1.11.0.min.js"></script> <script src="http://qiniu-web.super.cn/super/0302/statics/js/index.js?v=5.0.2"></script> <script src="http://wandoujia.com/api/wdapi.js" type="text/javascript"></script> <script type="text/javascript"> try { if (window.console && window.console.log) console.log("%c", "padding:180px 180px;line-height:400px;background:url('http://www.super.cn/statics/img/fun.jpg') no-repeat;", "\nHey man! You are FRONT-END we needed!\nNever mind. We have MONEY!\nSend E-mail To:speed @ myfriday.cn\n\n"); } catch (e) {} </script> <script src="http://zhushou.360.cn/script/360mobilemgrdownload.js"></script> <script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fcab51254ae5cf2ff649479c81093cf8d' type='text/javascript'%3E%3C/script%3E")); </script> </body> </html>