DIV布局——仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
2024-06-01 10:07:43
HTML5期末大作业：仿英雄联盟网站设计——仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码
文章目录
- HTML5期末大作业：仿英雄联盟网站设计——仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、获取更多源码
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
<title>仙剑奇缘</title>
<meta name="author" content="order by www.adminbuy.cn" />
<script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="app"> <!-- cover1 --><div class="cover1"><div class="c_content1"><div class="c_del1"></div><div class="c_cont1_main"> <img class="c_con1_title" src="picture/con1_title.png"/><div class="c_con1_box"> <img class="c_con_b_pic" src="picture/con_ewm.jpg"/><div class="c_con_b_font"><div class="c_con_b_f_title">剑舞奇缘</div><div class="c_con_b_f_title2">微信搜索公众号：</div><div class="c_con_b_f_title3">jwqysy</div><div class="c_con_b_f_title4"> <img src="picture/circle_arrow.png"/> <span>扫描立刻关注</span> </div></div></div></div></div></div><!-- cover2 --><div class="cover2"><div class="c_content2"><div class="c_del2"></div><div class="c_cont2_main"> <img class="c_con2_title" src="picture/con2_title.png"/><div class="c_con2_tab"><div class="c_con_t_t1"><ul class="phonetab"><li class="con_tab_active">Android</li><li>ios</li></ul><input class="c_con_input1" value="" type="text" placeholder="请输入您的手机号"/><div class="con2_yan"><input class="c_con_input2" value="" type="text" placeholder="请输入您的验证码"/><input class="c_con_input3" type="submit" value="获取验证码"/></div></div></div><img class="con2_btn" src="picture/con2_btn.png"/><div class="con2_list"><ul><li><img src="picture/conlist1.png"/><br>铭文寻宝卷</li><li><img src="picture/conlist2.png"/><br>御灵水晶</li><li><img src="picture/conlist3.png"/><br>银鼠坐骑</li><li><img src="picture/conlist4.png"/><br>高级美酒</li><li><img src="picture/conlist5.png"/><br>御灵水晶</li></ul></div></div></div></div><!-- cover3 --><div class="cover3"><div class="c_content3"><div class="c_del3"></div><img class="c_con3_title" src="picture/con3_title.png"><div class="c_con3_font1"> 恭喜您预约成功，测试开始后我们将第一时间通过短信通<br/>知您，并发送预约礼包兑换码，敬请期待! </div><div class="c_con3_font2"> <span>关注微信公众号获取更多礼包信息:</span> <img src="picture/con_ewm.jpg"/> </div></div></div><!-- 客服 --><div class="right_box"><div class="right_btn"><div class="right_font">展开</div><div class="left_arrow"> <img src="picture/leftarrow.png"/> </div></div><div class="right_con"><div class="right_line1"></div><div class="right_line2"></div><img class="rightbtn_ewm" src="picture/xuan_ewm.png"> <span>扫一扫关注官方微信</span><div class="right_qq"> <a href="https://jq.qq.com/?_wv=1027&k=5XbrZuQ" target="_blank"><img src="picture/rqq.png"/></a> 官方交流群 </div><div class="r_qq_hao">888888</div><div class="right_phone"> <img src="picture/rphone.png"/> 客服热线 </div><div class="r_qq_hao">010-88888888</div></div></div><!-- Nav --><div class="navtop"><div class="nav_con"> <img src="picture/logotop.jpg"/><div class="nav_font"> <span class="n_f_f1">剑舞奇缘</span><br/><span class="n_f_f2">3D玄幻情缘手游</span> </div><ul class="navul"><li> <a href="index.html">官网首页</a> <span class="hoverd1"></span><div class="diamond"></div><span class="hoverd2"></span> </li><li> <a href="news.html">新闻资讯</a> <span class="hoverd1"></span><div class="diamond"></div><span class="hoverd2"></span> </li><li> <a href="strategy">玩法攻略</a> <span class="hoverd1"></span><div class="diamond"></div><span class="hoverd2"></span> </li><li> <a href="javascript:void(alert('敬请期待！'));">资料大全</a> <span class="hoverd1"></span><div class="diamond"></div><span class="hoverd2"></span> </li></ul></div></div><!-- banner --><div class="bgbanner"> <img src="picture/bgbanner.png" width="100%"> </div><!-- gift --><div class="gift"><div class="gift_list"> <img src="picture/ewmbg.png"/> <img class="absoulte_ewm" src="picture/9096d7171f944ae38b242948e6449701.gif"/><div class="g_store"> <a href=""><img class="an_pic_one" src="picture/appstore.png"/></a> <a href=""><img class="an_pic" src="picture/android.png"/></a> </div><img class="gf_gif" src="picture/gfgift.jpg"/> <img class="g_yuyue" src="picture/yuyue.png"/> </div><div class="gift_main"><div class="g_main_left"><div class="lunbo"><div class="lun_show"> <img src="picture/lunbo1.jpg"/> <img src="picture/lunbo1.jpg"/> <img src="picture/lunbo1.jpg"/> <img src="picture/lunbo1.jpg"/> </div><div class="lun_nav"><ul><li class="liactive"></li><li class="liactive"></li><li class="liactive"></li><li class="liactive"></li></ul></div></div></div><div class="g_main_right"><div class="tab"><div class="tab_line"></div><div class="tab_line2"></div><div class="tab_more"> <a href="news.html"><img src="picture/tabmore.png" alt="more"></a> </div><div class="tab_red"> <img src="picture/red.png"/> </div><ul class="nav_ul"><li class="lidom" style="color: #A53248"> 最新 <img class="lidom_icon" src="picture/arrowup.png" style="display:block" /> </li><li class="lidom"> 新闻 <img class="lidom_icon" src="picture/arrowup.png"/> </li><li class="lidom"> 公告 <img class="lidom_icon" src="picture/arrowup.png"/> </li><li class="lidom"> 活动 <img class="lidom_icon" src="picture/arrowup.png"/> </li><li class="lidom"> 攻略 <img class="lidom_icon" src="picture/arrowup.png"/> </li></ul><!-- 须复制多个 --><div class="t_con t_con_active"><ul><li> <a href="">【新闻】1点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】1点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li></ul></div><div class="t_con"><ul><li> <a href="">【新闻】2点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】2点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li></ul></div><div class="t_con"><ul><li> <a href="">【新闻】3点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】3点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li></ul></div><div class="t_con"><ul><li> <a href="">【新闻】4点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】4点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li></ul></div><div class="t_con"><ul><li> <a href="">【新闻】5点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】5点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li><li> <a href="">【新闻】点石成金！《XXXX》拜年祭今日开启...</a> <span>01-16</span> </li></ul></div></div></div></div></div><!-- gamestart --><div class="game"><div class="game_con"> <img src="picture/gamebg.png"/> </div></div><!-- gameafter --><div class="game_after"> <!-- <img class="gameafterbg" src="picture/gameafter.jpg"/> --><div class="game_after_main"><div class="lunbo2"><div class="lun_show2"> <img src="picture/afterlun1.png"/> <img src="picture/afterlun2.png"/> <img src="picture/afterlun3.png"/> <img src="picture/afterlun4.png"/> </div><div class="lun_nav2"><ul><li class="liactive2"></li><li class="liactive2"></li><li class="liactive2"></li><li class="liactive2"></li></ul></div></div></div></div><!-- footer --><div class="footer"><div class="footer_main"> <img src="picture/companylogo.png" alt="logo"><div class="footer_font"><ul><li>广州某某信息科技有限公司版权所有</li><li>Copyright © 2013-2016 baidu.com All Rights Reserved</li><li>广州信息科技有限公司 苏ICP12345678 粤网文【2016】0788-888号</li><li>地址：南京市玄武区玄武湖 <a href="http://www.adminbuy.cn" target="_blank">网站模板</a></li></ul></div></div></div>
</div>
</body>
</html>
<script>$(function() {function r_box() {var turn = 1;$(".right_btn").click(function() {if(turn == 1) {$(".right_box").css("right","0px");$(".right_font").text("收回");$(".left_arrow").css("transform","rotate(0deg)");turn = 0;}else {$(".right_box").css("right","-118px");$(".right_font").text("展开");$(".left_arrow").css("transform","rotate(180deg)");turn = 1;}});}r_box();// 轮播1function lun(name,name2,name3) {this.i = -1;this.inter;this.name = name;this.name2 = name2;this.name3 = name3;}lun.prototype = {// 公共函数keyi: function () {this.i++if (this.i == 4) {this.i = 0}$(this.name).removeClass("active");$(this.name).eq(this.i).addClass("active");$(this.name2).css("marginLeft",(-this.i) * 100 + "%");},liClick:function() {var that = this;$(this.name).click(function() {that.i = $(this).index()-1;that.keyi();});},Interval:function() {this.inter = setInterval(this.keyi.bind(this),2500);},Hover:function() {var that = this;$(this.name3).hover(function() {clearInterval(that.inter);},function() {that.Interval();});},start:function() {this.keyi();this.Interval();this.liClick();this.Hover();}}var Lunbo = new lun(".lun_nav ul li",".lun_show",".lunbo");Lunbo.start();var Lunbo2 = new lun(".lun_nav2 ul li",".lun_show2",".lunbo2");Lunbo2.start();// tab function tabs() {$(".nav_ul li").click(function() {// $(this).index()$(".t_con").hide();$(".t_con").eq($(this).index()).fadeIn(200);$(".nav_ul li img").hide();$(".nav_ul li img").eq($(this).index()).show();$(".nav_ul li").css("color","");$(".nav_ul li").eq($(this).index()).css("color",'#A53248');});}tabs();// coverfunction Coverhide(name1,name2,n) {$(name1).click(function() {$(this).parent().parent().fadeOut(200);console.log($(this).parent().parent());});$(name2).click(function() {$(".cover"+n).fadeIn(200);});}Coverhide(".c_del1",".gf_gif",1);Coverhide(".c_del2",".g_yuyue",2);Coverhide(".c_del3","",3);// ios && 安卓function phonetb() {$(".phonetab li").click(function() {$(".phonetab li").removeClass("con_tab_active");$(this).addClass("con_tab_active");});$(".c_con_input3").click(function() {var now = 60;console.log($(".c_con_input3").val());var Stt = setInterval(function () {$(".c_con_input3").attr("disabled",true);$(".c_con_input3").css({"background":"gray","color":"#A9A9A9"});$(".c_con_input3").val(now+'s后重新发送');now--if(now < 0) {clearInterval(Stt)$(".c_con_input3").val('获取验证码');$(".c_con_input3").css({"background":"#DDDDDD","color":"black"});$(".c_con_input3").attr("disabled",false);}},1000)});}phonetb();})
</script>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码
DIV布局——仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载相关推荐
- HTML5期末大作业：仿英雄联盟网站设计——仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:仿英雄联盟网站设计--仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载 常见网页设计作业题材有 ...
- HTML5期末大作业：苏苏网站设计——仿苏苏超市(1页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:苏苏网站设计--仿苏苏超市(1页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载 常见网页设计作业题材有 个人. 美食. ...
- HTML5期末大作业：生活服务网站设计——生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:生活服务网站设计--生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载 常见网页设计作业题材有 个人 ...
- HTML+CSS静态页面网页设计作业——布偶猫(7页)带留言板 大学生简单个人静态HTML网页设计作品 DIV布局动物网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:布偶猫网站设计--布偶猫(7页)带留言板 大学生简单个人静态HTML网页设计作品 DIV布局动物网页模板代码 DW学生个人网站制作成品下载 常见网页设计作业题材有 个人. 美食. ...
- HTML5期末大作业：布偶猫网站设计——布偶猫(7页)带留言板 大学生简单个人静态HTML网页设计作品 DIV布局动物网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:布偶猫网站设计--布偶猫(7页)带留言板 大学生简单个人静态HTML网页设计作品 DIV布局动物网页模板代码 DW学生个人网站制作成品下载 常见网页设计作业题材有 个人. 美食. ...
- HTML5期末大作业：食品超市网站设计——食品超市-功能齐全(31页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:食品超市网站设计--食品超市-功能齐全(31页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载 常见网页设计作业题材有 个 ...
- HTML+CSS+JS计——仿苏苏超市(1页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:苏苏网站设计--仿苏苏超市(1页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍 文章目录 HTML5期末大作业:苏苏网站设计--仿苏苏超市(1页) 大学生简单个人 ...
- div+css静态网页设计`生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:生活服务网站设计--生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局 文章目录 HTML5期末大作业:生活服务网站设计--生活服务同城商城(33页) ...
- HTML学生个人网站作业设计：电影设计——爱影评在线电影(11页) HTML+CSS+JavaScript 简单DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
一.作品介绍 1.作品简介 :html期末大作业,dw学生网页设计作业, A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局. 2.作品编辑:作品下载后可使用任意HTML编辑软件(如:Dream ...
最新文章
- 全球及中国家用非金属材质水槽行业产销模式及投资规模预测报告2022-2027年
- Java解释XML文件的小例子
- leetcode 224. 基本计算器（栈）
- touchesEnded不响应
- 如何快速的入门Docker并且实现部署
- 中级职称的计算机考试题库,中级职称计算机考试模拟题库及答案
- Unity TUIO雷达入门
- 大数据可视化之MyBatis笔记（1）
- Ubuntu/Jetson Nano问题解决“Illegal instruction(core dumped)”
- Excel查找重复行
- mysql vchar 最大长度_mysql VARCHAR的最大长度到底是多少
- LaTex(PART X)数学公式的6种定义形式
- java计算机毕业设计H5醉美南湾湖网站设计源码+mysql数据库+系统+lw文档+部署
- 3.7V升压12V电路
- 漏洞检测之POC的学习
- 为何钓鱼网站一钓一个准？Python Django带你搭建steam钓鱼网站
- 服务器中”系统平均负载 Load average“含义学习
- 【UCell】gene signature enrichment based on the Mann-Whitney U statistics
- 武林外传-经典台词-郑昀整理版本
- C/C++Linux后台开发(入门到精通) 学习路线-架构师篇