HTML5期末大作业
文章目录
HTML5期末大作业一、作品展示二、文件目录三、代码实现四、获取更多源码一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /><meta name="format-detection" content="telephone=no" /><meta name="apple-mobile-web-app-capable" content="yes" /><title>首页</title><link rel="stylesheet" type="text/css" href="css/public.css"/><link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css"/><link rel="stylesheet" type="text/css" href="css/style.css"/><script type="text/javascript" src="js/jquery1.11.3.min.js"></script><script type="text/javascript" src="js/vue.min.js"></script><script type="text/javascript" src="js/jquery.bxslider.min.js"></script><script type="text/javascript" src="js/index.js"></script><script type="text/javascript" src="js/public.js"></script></head><body><!--top--><div id="top"><div class="topHead"><div class="wrap clearfloat"><h2>{{topData.topHead}}</h2><div class="topHeadCont clearfloat"><p>{{topData.topQQ}}</p><div class="topHeadContW"><!--登录前--><div class="topHeadInner topHeadBefor"><a class="topLogin" href="javascript:;">{{topData.topLogin[0]}}</a> <span>|</span> <a class="topRegister" href="javascript:;">{{topData.topLogin[1]}}</a></div><!--登录后--><div class="topHeadInner topHeadBefore" style="display: none;">您好！【云腾 （ID:7980046 <em class="ico1">等级：12</em>）】<span>|</span><a class="topExit" href="javascript:;">【退出】</a><span>|</span> <em class="ico2">金币：100</em> <span>|</span> <em class="ico3">银行：100</em> <span>|</span> 成长值：0</div></div></div></div></div><div class="topNav"><div class="wrap clearfloat"><div class="logo"><a href="index.html"><img src="picture/logo.png"/></a></div><nav><ul class="clearfloat"><li class="active"><a href="index.html">{{topData.navText[0]}}</a></li><li><a href="news.html">{{topData.navText[1]}}</a></li><li><a href="game.html">{{topData.navText[2]}}</a></li><li><a href="cooperation.html">{{topData.navText[3]}}</a></li><li><a href="gift.html">{{topData.navText[4]}}</a></li><li><a href="user.html">{{topData.navText[5]}}</a></li><li><a href="rank.html">{{topData.navText[6]}}</a></li></ul></nav></div><div class="muen"><span class="muenX"></span><span class="muenY"></span><span class="muenZ"></span></div></div></div><!--/top--><!--登录、注册--><div class="loginWrap" id="login"><div class="loginTan loginTanL"><span class="loginClose"></span><h2>{{loginData.loginText[0]}}</h2><div class="loginInner"><div class="loginInput"><input type="text" name="" id="" value="" placeholder="账号 / 手机号"/></div></div><div class="loginInner"><div class="loginInput"><input type="password" name="" id="" value="" placeholder="请输入密码"/></div></div><div class="loginInner loginInnerYz clearfloat"><div class="loginInput"><input type="text" name="" id="" value="" placeholder="验证码"/></div><span><img src="picture/yzm_img.jpg"></span></div><div class="loginMark clearfloat"><p><span class="chooseBtn"></span><label>{{loginData.passwordText[0]}}</label></p><a href="">{{loginData.passwordText[1]}}</a></div><button class="loginSure">{{loginData.loginName[0]}}</button><div class="loginBottom"><a class="logoBack1" href="javascript:;">{{loginData.loginBototm[0]}}</a></div></div><div class="loginTan loginTanR"><span class="loginClose"></span><h2>{{loginData.loginText[1]}}</h2><div class="loginInner"><div class="loginInput"><input type="text" name="" id="" value="" placeholder="手机号"/></div></div><div class="loginInner"><div class="loginInput"><input type="password" name="" id="" value="" placeholder="密码"/></div></div><div class="loginInner"><div class="loginInput"><input type="text" name="" id="" value="" placeholder="推荐人ID"/></div></div><div class="loginInner"><div class="loginInput"><input type="text" name="" id="" value="" placeholder="昵称"/></div></div><div class="loginInner loginInnerYz clearfloat"><div class="loginInput"><input type="text" name="" id="" value="" placeholder="验证码"/></div><span><img src="picture/yzm_img.jpg"></span></div><div class="loginInner loginInnerYz clearfloat"><div class="loginInput"><input type="text" name="" id="" value="" placeholder="短信验证码"/></div><span>{{loginData.loginYz}}</span></div><button class="loginSure">{{loginData.loginName[1]}}</button><div class="loginBottom"><a class="logoBack2" href="javascript:;">{{loginData.loginBototm[1]}}</a></div></div></div><!--/登录、注册--><!--banner--><div class="banner" id="banner"><ul class="bannerSlider"><li><a href=""><img src="picture/banner_img.jpg"/></a></li><li><a href=""><img src="picture/banner_img.jpg"/></a></li><li><a href=""><img src="picture/banner_img.jpg"/></a></li></ul></div><!--/banner--><div class="main" id="main"><div class="homeGame"><div class="wrap"><div class="homeTit"><h2>{{ titleText[0].title }}</h2><p><em>{{ titleText[0].subTitle }}</em></p><span></span></div><div class="homeGameWrap"><ul class="homeGameList clearfloat"><li v-for='(item,index) in homeGame'><a href=""><div class="pic"><img :src="item.img"/></div></a><div class="homeGameBg"><div class="homeGameBgW"><div class="homeGameBgWrit"><h3>{{item.title}}</h3><p v-html="item.text"></p><a href="">{{item.writ}}</a></div></div></div></li></ul><a class="moreHome" href="">{{moreText}}</a></div></div></div><div class="homeGift"><div class="wrap"><div class="homeTit homeTitFFF"><h2>{{ titleText[1].title }}</h2><p><em>{{ titleText[1].subTitle }}</em></p><span></span></div><div class="homeGiftWrap"><ul class="homeGiftList clearfloat"><li v-for="(item,index) in homeGift"><div class="homeGiftInner"><div class="pic"><img :src="item.img"/></div><h3>{{item.title}}</h3><p v-html="item.text"></p><h4><span>{{item.num}}</span></h4></div><a href="">{{convertText}}</a></li></ul></div></div></div><div class="homeNews"><div class="wrap clearfloat"><div class="left homeNewsWrap"><div class="homeNewsTit"><em>{{titleHead[0].title}}</em><span>{{titleHead[0].subTitle}}</span></div><div class="homeNewsInner clearfloat"><ul class="left"><li class="m-list-flex" v-for="(item,index) in homeNews[0]"><div class="time"><span>{{item.timeNum}}</span><span>{{item.timeDate}}</span></div><div class="m-cell-bd"><h3 class="single-line"><a href="">{{item.title}}</a></h3><p class="multi-line">{{item.text}}</p></div></li></ul><ul class="right"><li class="m-list-flex" v-for="(item,index) in homeNews[1]"><div class="time"><span>{{item.timeNum}}</span><span>{{item.timeDate}}</span></div><div class="m-cell-bd"><h3 class="single-line"><a href="">{{item.title}}</a></h3><p class="multi-line">{{item.text}}</p></div></li></ul></div></div><div class="right homeRankWrap"><div class="homeNewsTit"><em>{{titleHead[1].title}}</em><span>{{titleHead[1].subTitle}}</span></div><ul class="homeRankList"><li class="m-list-flex clearfloat" v-for="(item,index) in homeRank"> <span v-html="item.num"></span><p class="m-cell-bd single-line">{{item.title}}</p><em>{{item.text}}</em></li></ul></div></div></div><div class="homeLink"><div class="wrap"><div class="homeTit homeTit0092ff"><h2>{{ titleText[2].title }}</h2><p><em>{{ titleText[2].subTitle }}</em></p><span></span></div></div></div></div><div class="homeLinkBox"><div class="wrap"><div class="baner homeLinkWrap"><ul class="homeLinkSlider clearfloat"><!--<li v-for="(item,index) in homeLink"><a href=""><img :src="item.img"/></a></li>--><li><a href="/"><img src="picture/home_link_img1.png" /></a></li><li><a href=""><img src="picture/home_link_img2.png"/></a></li><li><a href=""><img src="picture/home_link_img3.png"/></a></li><li><a href=""><img src="picture/home_link_img4.png"/></a></li><li><a href=""><img src="picture/home_link_img5.png"/></a></li><li><a href=""><img src="picture/home_link_img4.png"/></a></li><li><a href=""><img src="picture/home_link_img1.png"/></a></li><li><a href=""><img src="picture/home_link_img3.png"/></a></li><li><a href=""><img src="picture/home_link_img5.png"/></a></li><li><a href=""><img src="picture/home_link_img2.png"/></a></li></ul></div></div></div><!--footer--><div id="footer"><div class="wrap clearfloat"><div class="ewm"><img src="picture/ewm.jpg"/><p>{{footerEwm}}</p></div><div class="left footerM"><p>{{footerText[0]}}</p><p>{{footerText[1]}}</p><p>{{footerText[2]}}</p></div><div class="left"><ul><li v-for='(item,index) in footerInfor'><span v-bind:class="'ico' + (index+1)"></span><em v-html="item.text"></em></li></ul></div></div></div><!--/footer--></body><script type="text/javascript">$('.bannerSlider').bxSlider({'auto':true,'controls':false,'touchEnabled':true,'pager':true,'speed':1000,'pause':3000,})$('.homeLinkSlider').bxSlider({'auto':true,'controls':true,'touchEnabled':true,'pager':false,'slideWidth': '218','minSlides': 2,'maxSlides': 5,'moveSlides': 2,'speed':600,})</script></html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码
div+css静态网页设计游戏网站设计——仿君海游戏官网(13页) HTML+CSS大作业_ 手游网页制作作业_网游网页设计...
