HTML5与CSS实现神途官网

html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>仿制神途官网</title><link rel="stylesheet" href="uishentu.css">
</head><body class="body-bg"><header><div class="header-div"><ul class="header-ul"><li class="header-li"><span class="cn">首页</span><br><span class="en">HOME</span></li><li class="header-li"><span class="cn">新闻中心</span><br><span class="en">NEWS</span></li><li class="header-li"><span class="cn">账号注册</span><br><span class="en">REGISTER</span></li><li class="header-li" height="75px"><div><img class="img-logo1" src="./resource/images/bannerlogo.png" alt="logo"></div></li><li class="header-li"><span class="cn">充值中心</span><br><span class="en">RECHARGE</span></li><li class="header-li"><span class="cn">下载游戏</span><br><span class="en">DOWNLOAD</span></li><li class="header-li"><span class="cn">联系我们</span><br><span class="en">CONTACT</span></li></ul></div><div><video autoplay muted loop class="shentu-div"><source src="./resource/video/shentu.mp4"></video></div></header><!-- 内容的容器 --><main class="content"><!-- 内容 --><!-- 有背景图（游戏角色）的元素 --><div class="ct-logo"><img class="img1" src="./resource/images/bannertxt2.png" alt=""><img class="img2" src="./resource/images/bannertxt1.png" alt=""><img class="img3" src="./resource/images/bannerlogo.png" alt=""></div><!-- 公告和职业 --><div class="ct-news"><!-- 新闻，职业， 技能， --><!-- 不可以放版权信息相关的 --><!-- 最新公告 --><div class="news"><img src="./resource/images/icon-news.png" alt=""><span class="roll"><span style="cursor:pointer ;" class="rollbox"><li class="item">&nbsp最新公告111111111111111111111111111111</li><li class="item">&nbsp最新公告222222222222222222222222222222</li><li class="item">&nbsp最新公告333333333333333333333333333333</li></span></span><span class="right">查看详情>></span></div><!-- 职业介绍 --><!-- 2行，每行3个元素 --><div class="row"><div class="card"><!-- 图片 --><img class="float-right" src="./resource/images/icon-new.gif" alt="" ><div class="image1"><!-- 添加二维码 --><div class="qrcode"><span>扫描二维码 下载神途手游</span><br><img class="img1"  src="./resource/images/fixed-code.png" alt=""></div></div><div class="wrapper"><!-- 职业名字 --><div class="title">神途单职业</div><!-- 开区时间 --><div class="info">开区时间：（10:00 16:00 20:00)</div><!-- 三只松鼠 --><div class="btn"><button type="button">进入官网</button><button type="button">微端下载</button><button type="button">手游下载</button></div></div></div><div class="card"><img class="float-right" src="./resource/images/icon-hot.gif" alt="" ><!-- 图片 --><div class="image2"><!-- 添加二维码 --><div class="qrcode"><span>扫描二维码 下载神途手游</span><br><img class="img1"  src="./resource/images/fixed-code.png" alt=""></div></div><div class="wrapper"><!-- 职业名字 --><div class="title">神途单职业</div><!-- 开区时间 --><div class="info">开区时间：（10:00 16:00 20:00)</div><!-- 三只松鼠 --><div class="btn"><button type="button">进入官网</button><button type="button">微端下载</button><button type="button">手游下载</button></div></div></div><div class="card"><!-- 图片 --><div class="image3"><!-- 添加二维码 --><div class="qrcode"><span>扫描二维码 下载神途手游</span><br><img class="img1"  src="./resource/images/fixed-code.png" alt=""></div></div><div class="wrapper"><!-- 职业名字 --><div class="title">神途单职业</div><!-- 开区时间 --><div class="info">开区时间：（10:00 16:00 20:00)</div><!-- 三只松鼠 --><div class="btn"><button type="button">进入官网</button><button type="button">微端下载</button><button type="button">手游下载</button></div></div></div></div><div class="row"><div class="card"><!-- 图片 --><div class="image1"><!-- 添加二维码 --><div class="qrcode"><span>扫描二维码 下载神途手游</span><br><img class="img1"  src="./resource/images/fixed-code.png" alt=""></div></div><div class="wrapper"><!-- 职业名字 --><div class="title">神途单职业</div><!-- 开区时间 --><div class="info">开区时间：（10:00 16:00 20:00)</div><!-- 三只松鼠 --><div class="btn"><button type="button">进入官网</button><button type="button">微端下载</button><button type="button">手游下载</button></div></div></div><div class="card"><!-- 图片 --><div class="image2"><!-- 添加二维码 --><div class="qrcode"><span>扫描二维码 下载神途手游</span><br><img class="img1"  src="./resource/images/fixed-code.png" alt=""></div></div><div class="wrapper"><!-- 职业名字 --><div class="title">神途单职业</div><!-- 开区时间 --><div class="info">开区时间：（10:00 16:00 20:00)</div><!-- 三只松鼠 --><div class="btn"><button type="button">进入官网</button><button type="button">微端下载</button><button type="button">手游下载</button></div></div></div><div class="card"><!-- 图片 --><div class="image6"><!-- 添加二维码 --><div class="qrcode"><span>扫描二维码 下载神途手游</span><br><img class="img1"  src="./resource/images/fixed-code.png" alt=""></div></div><div class="wrapper"><!-- 职业名字 --><div class="title">神途单职业</div><!-- 开区时间 --><div class="info">开区时间：（10:00 16:00 20:00)</div><!-- 三只松鼠 --><div class="btn"><button type="button">进入官网</button><button type="button">微端下载</button><button type="button">手游下载</button></div></div></div></div><!-- 更多版本 --><div class="ct-version"><img src="./resource/images/list-more.png" alt=""><span style="cursor:pointer;">查看更多版本</span></div><!-- 新闻中心 --><div class="news-report"><div class="img-report"><!-- 图片展示 --><img src="./resource/images/img550x310.jpg" alt=""></div><div class="text-report"><div class="span-title"><span class="span1">新闻公告</span><span class="span1">游戏特色</span><span class="span1">开合区规则</span><br><div class="intro-div"><span>推荐:</span><p>[无文案内容]请根据实际需要右键打开方式，选择软件编辑index.html中的文字</p></div><div class="list-div"><ul><li>[无文案内容]请根据实际需要右键打开方式，选择软件编辑index.html中的文字</li><li>[无文案内容]请根据实际需要右键打开方式，选择软件编辑index.html中的文字 <span class="right">08-18</span></li><li>[无文案内容]请根据实际需要右键打开方式，选择软件编辑index.html中的文字 <span class="right">08-18</span></li><li>[无文案内容]请根据实际需要右键打开方式，选择软件编辑index.html中的文字 <span class="right">08-18</span></li><li>[无文案内容]请根据实际需要右键打开方式，选择软件编辑index.html中的文字 <span class="right">08-18</span></li><li>[无文案内容]请根据实际需要右键打开方式，选择软件编辑index.html中的文字 <span class="right">08-18</span></li></ul></div></div>                 </div></div><!-- 视频中心 --><div class="video-div"><div class="span-video"><span class="cn">视频中心</span><span class="en">Videolist</span><button class="span-right"><img src="./resource/images/btn-next.png" alt=""></button><button class="span-right"><img src="./resource/images/btn-prev.png" alt=""></button></div><div class="video-img"><ul class="video-ul"><li><div class="li-div"><img src="./resource/images/video-img285x160-1.jpg" alt=""><p>图片详细</p></div></li><li><div class="li-div"><img src="./resource/images/video-img285x160-2.jpg" alt=""><p>图片详细</p></div></li><li><div class="li-div"><img src="./resource/images/video-img285x160-1.jpg" alt=""><p>图片详细</p></div></li><li><div class="li-div"><img src="./resource/images/video-img285x160-2.jpg" alt=""><p>图片详细</p></div></li></ul></div></div><!-- 装备展示  --><div class="show-equipment"><div class="eq-title"><span class="cn">装备展示</span><span class="en">Equipment</span></div><div class="eq-img"><div class="item"><img src="./resource/images/img550x309-1.gif" alt=""></div><div class="item"><img src="./resource/images/img550x309-2.gif" alt=""></div><div class="item"><img src="./resource/images/img550x309-3.gif" alt=""></div><div class="item"><img src="./resource/images/img550x309-4.gif" alt=""></div></div></div><!-- 游戏截图 --><div class="screen-game"><div class="scshot"><span class="cn">游戏截图</span><span class="en">Screenshot</span></div><div class="screenshot-div"><div class="img1"><img  src="./resource/images/btn-prev.png" alt="prev"></div><div class="box"><div class="wrapper"><div class="img2"><img src="./resource/images/jt01.gif" alt=""></div><div class="img2"><img src="./resource/images/jt02.gif" alt=""></div><div class="img2"><img src="./resource/images/jt03.gif" alt=""></div></div></div><div class="img3"><img  src="./resource/images/btn-next.png" alt="next"></div></div></div></div></div><aside class="aside-div"><div class="all-content"><div class="aside-QQ"></div><div class="aside-QQkefu"><ul><li><span class="cn">QQ客服1</span><div class="img"><img src="./resource/images/fixed-qq1.png"></div></li><li><span class="cn">QQ客服2</span><div class="img"><img src="./resource/images/fixed-qq1.png"></div></li></ul></div><div class="aside-QQqun"></div><div class="aside-group"><ul><li><span class="cn">玩家交流群1</span><div class="img"><img src="./resource/images/fixed-qq2.png"></div></li><li><span class="cn">玩家交流群2</span><div><img src="./resource/images/fixed-qq2.png"></div></li><li><span class="cn">玩家交流群3</span><div><img src="./resource/images/fixed-qq2.png"></div></li><li><span class="cn">玩家交流群4</span><div><img src="./resource/images/fixed-qq2.png"></div></li></ul></div><div class="aside-offac"><span class="cn"><strong>关注微信公众号</strong></span><img class="img" src="./resource/images/fixed-code.png"></div><div class="aside-acqrcode"></div></div></aside></main><footer class="footer-div"><div class="notice"><div class="footer-logo"></div><div class="footer-content"><span class="yellow">健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适当游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。</span><br><span class="yellow">适龄提示：本游戏适合18岁以上的成年人进入。请您确认已如实进行实名认证，为了您的健康，请合理控制游戏时间，适度娱乐，理性消费。</span><br><span class="white">著作权人：杭州神兔网络科技有限公司 | 出版单位：北京科海电子出版社 | 审批问号：新广初审[2022]2069号 | 出版物号：ISBN 978-978-458269858</span><br><span class="white">网络文化经营许可证：浙网文(2019)0606-222号 | 增值电信业务许可证：浙B2-123582854 | ICP备案：浙ICP备12597号</span></div></div></footer><div class="player"><img src="./resource/images/m.png" alt=""><audio class="audio-play" src="./resource/audio/music.mp3"></audio></div>
</body>
</html>

JavaScript部分

最新通知滚动

游戏截图部分左右滚动切换图片

</script><script type="text/javascript">let el=document.querySelector('.roll .rollbox');_animation(el)// 隔一段时间移动一行// 封装功能// 功能描述：移动一个行高function _animation(elem){var offset=0;// var height=60;// 使用定时器// 每200毫秒执行一次var tim=setInterval(function(){offset+=5;elem.style.top=`-${offset}px`;if(offset == 40){// 当offset达到一定程度的时候停止// clearInterval(tim);offset=0;}},250)}// audiovar audio_play = document.querySelector(".player .audio-play")var audio_box = document.querySelector(".player")audio_box.addEventListener("click",function(){if(audio_play.paused){audio_play.play();}else{audio_play.pause();}})// 滚动轮播图
var el2 = document.querySelector(".content .screen-game .screenshot-div .box .wrapper")
console.log("el2 =  ", el2)var t2 = setInterval(function(){// 01-复制第一行元素，加到最后面console.log("第一个元素", el.children[0])// 复制元素var newline = el2.children[0].cloneNode(true)// 把复制的元素加到最后面el2.append(newline)// 02-滚动到显示第二张// 1100 是元素的宽度_animation_left(el2, 1100)}, 3000)    // 数字控制每次滚动的间隔function _animation_left(elem , iLeft){var offset = 0 ;// 使用定时器var tim = setInterval( function(){offset += 150// 修改 left 属性模拟滚动 -150pxelem.style.left = `-${offset }px`if( offset > iLeft ){// 当offset  达到一定程度的时候停止clearInterval( tim )// 停止的时候，把已经滚动完的元素删除掉elem.children[0].remove()elem.style.left = `-${0}px`}}, 200)  // 每20毫秒执行一次
}</script>

CSS部分

.body-bg {background-image: url(./resource/images/bg-body.jpg);background-repeat: repeat-y;width: auto;padding: 0 0;margin: 0;
}.header-div {position: fixed;width: 1903px;height: 80px;margin: 0;left: 0;z-index: 666;/* margin-bottom: 0; */background-color: #1e363a80;text-align: center;
}.header-div .header-ul {float: left;width: 1400px;list-style: none;margin-right: 0px;margin-left: 397px;margin-top: 20px;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
}.header-div .header-ul .header-li {float: left;height: 60px;width: 150px;margin-left: 0;
}.header-div .header-ul .header-li .cn {font-size: 20px;color: white;
}.header-div .header-ul .header-li .cn:hover {cursor: pointer;color: #12454e;
}.header-div .header-ul .header-li .en {font-size: 12px;color: #064742;
}.header-div .header-ul .header-li .en:hover {cursor: pointer;color: #34eea7;
}.header-div .header-ul .header-li .img-logo1 {height: 89px;position: absolute;top: 12px;left: 903px;
}.shentu-div {width: 1903px;height: 972px;position: absolute;top: 0;left: 0;z-index: -99;
}body .content .ct-logo .img1 {left: 22%;top: 130px;position: relative;width: 10%;
}body .content .ct-logo .img2 {position: relative;right: -50%;top: 420px;width: 22%;
}body .content .ct-logo .img3 {position: absolute;top: 20%;right: 22%;width: 15%;
}body .content .ct-news {padding: 0px 14%;height: 500px;top: 480px;position: relative;
}body .content .ct-news .news {line-height: 22px;background-color: rgba(255, 255, 255, 0.575);padding: 5px 10px;
}body .content .ct-news .news .roll {display: inline-block;overflow: hidden;height: 25px;
}body .content .ct-news .news .roll .rollbox {position: relative;
}body .content .ct-news .news .roll .rollbox .item {line-height: 22px;list-style: none;
}body .content .ct-news .news img {top: 5px;position: relative;
}body .content .ct-news .news .right {float: right;color: #7eb4b1;cursor: pointer;
}body .content .ct-news .row {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;margin-top: 20px;
}body .content .ct-news .row .card {width: 30%;border: 1px solid #b1ddd6;text-align: center;position: relative;background-color: white;
}body .content .ct-news .row .card .float-right {position: absolute;right: -6px;top: 0;
}body .content .ct-news .row .card .image1 {background-image: url("./resource/images/img386x200-1.jpg");height: 250px;background-size: cover;
}body .content .ct-news .row .card .image1:hover .qrcode {display: block;
}body .content .ct-news .row .card .image1 .qrcode {background-color: #6cc9c488;height: 250px;display: none;
}body .content .ct-news .row .card .image1 .qrcode span {text-align: center;font-size: 20px;line-height: -2px;color: aliceblue;
}body .content .ct-news .row .card .image1 .qrcode .img1 {padding: 10px;width: 180px;height: 180px;margin-top: 1px;
}body .content .ct-news .row .card .image2 {background-image: url("./resource/images/img386x200-2.jpg");height: 250px;background-size: cover;
}body .content .ct-news .row .card .image2:hover .qrcode {display: block;
}body .content .ct-news .row .card .image2 .qrcode {background-color: #6cc9c488;height: 250px;display: none;
}body .content .ct-news .row .card .image2 .qrcode span {text-align: center;font-size: 20px;line-height: -2px;color: aliceblue;
}body .content .ct-news .row .card .image2 .qrcode .img1 {padding: 10px;width: 180px;height: 180px;margin-top: 1px;
}body .content .ct-news .row .card .image3 {background-image: url("./resource/images/img386x200-3.jpg");height: 250px;background-size: cover;
}body .content .ct-news .row .card .image3:hover .qrcode {display: block;
}body .content .ct-news .row .card .image3 .qrcode {background-color: #6cc9c488;height: 250px;display: none;
}body .content .ct-news .row .card .image3 .qrcode span {text-align: center;font-size: 20px;line-height: -2px;color: aliceblue;
}body .content .ct-news .row .card .image3 .qrcode .img1 {padding: 10px;width: 180px;height: 180px;margin-top: 1px;
}body .content .ct-news .row .card .image6 {background-image: url("./resource/images/img386x200-1.jpg");height: 250px;background-size: cover;
}body .content .ct-news .row .card .image6:hover .qrcode {display: block;
}body .content .ct-news .row .card .image6 .qrcode {background-color: #6cc9c488;height: 250px;display: none;
}body .content .ct-news .row .card .image6 .qrcode span {text-align: center;font-size: 20px;line-height: -2px;color: aliceblue;
}body .content .ct-news .row .card .image6 .qrcode .img1 {padding: 10px;width: 180px;height: 180px;margin-top: 1px;
}body .content .ct-news .row .card .wrapper {padding: 20px 0;
}body .content .ct-news .row .card .wrapper .title {font-size: 28px;font-weight: 700;
}body .content .ct-news .row .card .wrapper .info {color: #a3a3a3;
}body .content .ct-news .row .card .wrapper .btn {padding: 10px 0;
}body .content .ct-news .row .card .wrapper .btn button {background-color: #2e7f82;color: white;padding: 5px 10px;outline: none;border: none;
}body .content .ct-news .row .card .wrapper .btn button:hover {cursor: pointer;background-color: #54b17ba4;
}body .content .ct-news .ct-version {line-height: 50px;background-color: aliceblue;margin-top: 20px;height: 50px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;top: 5px;left: 5px;
}body .content .ct-news .ct-version img {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;margin-top: 5px;
}body .content .ct-news .ct-version span {position: absolute;font-size: 20px;left: 894px;color: #7eb4b1;text-align: center;
}body .content .ct-news .news-report {margin-top: 30px;width: 1372px;height: 450px;float: left;
}body .content .ct-news .news-report .img-report {width: 590px;height: 362px;margin-top: 20px;background-image: url(./resource/images/bg-imgbox590x362.png);display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;float: left;
}body .content .ct-news .news-report .img-report img {width: 480px;height: 300px;padding: 30px 52px;
}body .content .ct-news .news-report .text-report {width: 757px;height: 362px;margin-left: 20px;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;
}body .content .ct-news .news-report .text-report .span-title {border-bottom: 1px solid #b1ddd6;height: 45px;
}body .content .ct-news .news-report .text-report .span-title .span1 {font-size: 20px;color: #2e7f82;padding: 10px 15px;display: inline-block;
}body .content .ct-news .news-report .text-report .span-title .span1:active {background-color: #2e7f82;color: white;
}body .content .ct-news .news-report .text-report .intro-div {width: 757px;height: 30px;background-color: #65b3af4d;margin-top: 10px;display: -webkit-box;display: -ms-flexbox;display: flex;
}body .content .ct-news .news-report .text-report .intro-div span {width: 50px;padding-left: 5px;background-color: white;font-size: 18px;line-height: 18px;color: #2e7f82;padding-top: 5px;
}body .content .ct-news .news-report .text-report .intro-div span:active {background-color: #2e7f82;color: white;
}body .content .ct-news .news-report .text-report .intro-div p {font-size: 13px;margin-top: 5px;color: #2e7f82;
}body .content .ct-news .news-report .list-div {width: 732px;height: 250px;margin-top: 5px;float: left;
}body .content .ct-news .news-report .list-div ul {padding: 0;
}body .content .ct-news .news-report .list-div ul li {border-bottom: 1px solid #b1ddd6;list-style: none;font-size: 15px;margin-top: 10px;line-height: 36px;color: #2e7f82;
}body .content .ct-news .news-report .list-div ul li .right {font-size: 15px;line-height: 36px;color: #2e7f82;float: right;
}body .content .video-div {width: 1372px;height: 280px;margin-top: 10px;float: left;
}body .content .video-div .span-video .span-right {float: right;margin: 0px 7px;
}body .content .video-div .span-video .span-right img {width: 15px;height: 30px;
}body .content .video-div .span-video .cn {font-size: 30px;color: #2e7f82;font-weight: 600;
}body .content .video-div .span-video .en {font-size: 15px;color: #2e7f82;margin-left: 5px;
}body .content .video-div .span-video::before {content: "";width: 10px;height: 30px;top: 5px;display: inline-block;background-color: #2e7f82;position: relative;margin-right: 15px;
}body .content .video-div .video-img {width: 1422px;height: 190px;margin-top: 20px;
}body .content .video-div .video-img .video-ul {padding: 0;
}body .content .video-div .video-img .video-ul li {list-style: none;display: inline;margin-left: 30px;
}body .content .video-div .video-img .video-ul li .li-div {width: 285px;height: 190px;float: left;padding: 0;margin-left: 40px;
}body .content .video-div .video-img .video-ul li .li-div p {font-size: 15px;line-height: 25px;width: 285px;margin: 0;padding: 5px 0;color: white;text-align: center;background-color: #2e7f82;
}body .content .show-equipment .eq-title .cn {font-size: 30px;color: #2e7f82;font-weight: 600;
}body .content .show-equipment .eq-title .en {font-size: 15px;color: #2e7f82;margin-left: 5px;
}body .content .show-equipment .eq-title::before {content: "";width: 10px;height: 30px;top: 5px;display: inline-block;background-color: #2e7f82;position: relative;margin-right: 15px;
}body .content .show-equipment .eq-img {width: 1422px;height: 750px;
}body .content .show-equipment .eq-img .item {float: left;width: 590px;height: 362px;margin: 18px 40px;display: inline;background-image: url(./resource/images/bg-imgbox590x362.png);
}body .content .show-equipment .eq-img .item img {padding: 30px 18px;
}body .content .screen-game {width: 1372px;height: 730px;margin: 20px 0;
}body .content .screen-game .scshot {float: left;
}body .content .screen-game .scshot .cn {font-size: 30px;color: #2e7f82;font-weight: 600;
}body .content .screen-game .scshot .en {font-size: 15px;color: #2e7f82;margin-left: 5px;
}body .content .screen-game .scshot::before {content: "";width: 10px;height: 30px;top: 5px;display: inline-block;background-color: #2e7f82;position: relative;margin-right: 15px;
}body .content .screen-game .screenshot-div {width: 1200px;height: 690px;background-image: url(./resource/images/bg-jietu-imgbox.png);margin-top: 10px;margin-left: -3px;float: left;left: 50px;position: relative;
}body .content .screen-game .screenshot-div .img1 {float: left;width: 50px;height: 50px;position: relative;left: 0px;top: 260px;
}body .content .screen-game .screenshot-div .box {width: 1100px;height: 620px;position: relative;top: 25px;left: 3px;overflow: hidden;
}body .content .screen-game .screenshot-div .box .wrapper {width: 1100px;height: 620px;display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;left: 3px;
}body .content .screen-game .screenshot-div .box .wrapper .img2 {float: left;
}body .content .screen-game .screenshot-div .img3 {float: right;position: relative;right: 0px;bottom: 355px;
}body .content .aside-div {width: 220px;height: 570px;background-image: url(./resource/images/fixedboxbg.png);position: absolute;right: 1%;top: 64%;float: left;
}body .content .aside-div .all-content {width: 172px;height: 523px;position: relative;left: 25px;top: 22px;float: left;
}body .content .aside-div .all-content .aside-QQ {width: 172px;height: 46px;background-image: url(./resource/images/title-qq.png);float: left;
}body .content .aside-div .all-content .aside-QQkefu {width: 172px;height: 80px;float: left;
}body .content .aside-div .all-content .aside-QQkefu ul {width: 172px;height: 40px;float: left;margin-left: -28px;
}body .content .aside-div .all-content .aside-QQkefu ul li {list-style: none;width: 172px;line-height: 26px;
}body .content .aside-div .all-content .aside-QQkefu ul li .cn {font-size: 15px;color: #2e7f82;
}body .content .aside-div .all-content .aside-QQkefu ul li img {float: left;margin-top: -24px;margin-left: 68px;
}body .content .aside-div .all-content .aside-QQqun {width: 172px;height: 46px;float: left;background-image: url(./resource/images/title-qun.png);
}body .content .aside-div .all-content .aside-group {width: 172px;height: 160px;float: left;
}body .content .aside-div .all-content .aside-group ul {width: 172px;height: 40px;float: left;margin-left: -28px;
}body .content .aside-div .all-content .aside-group ul li {list-style: none;width: 172px;line-height: 26px;
}body .content .aside-div .all-content .aside-group ul li .cn {font-size: 10px;color: #2e7f82;
}body .content .aside-div .all-content .aside-group ul li img {float: left;margin-top: -24px;margin-left: 68px;
}body .content .aside-div .all-content .aside-offac {width: 172px;height: 125px;float: left;text-align: center;margin-top: -29px;
}body .content .aside-div .all-content .aside-offac .cn {font-size: 17px;color: #2e7f82;line-height: 39px;
}body .content .aside-div .all-content .aside-offac img {float: left;width: 120px;height: 120px;margin-top: 0px;margin-left: 20px;background-color: #2e7f82;border: 6px solid rgba(5, 97, 100, 0.5);border-radius: 20px;
}body .content .aside-div .all-content .aside-acqrcode {width: 172px;height: 40px;float: left;background-image: url(./resource/images/backtop.png);margin-top: 50px;
}.footer-div {background-color: #2e7f82;width: 1903px;height: 280px;position: relative;top: 3300px;
}.footer-div .notice .footer-logo {width: 200px;height: 138px;background-image: url(./resource/images/footerlogo.png);position: relative;top: 62px;left: 270px;
}.footer-div .notice .footer-content {width: 1000px;position: relative;top: -70px;left: 520px;margin: 0;
}.footer-div .notice .footer-content .yellow {color: #bee652d8;font-size: 15px;line-height: 30px;
}.footer-div .notice .footer-content .white {color: #b1ddd6;font-size: 15px;line-height: 30px;
}.player {width: 50px;height: 50px;position: absolute;right: 10px;top: 200px;cursor: pointer;
}
/*# sourceMappingURL=uishentu.css.map */

HTML5与CSS实现神途官网相关推荐

前端搭建（HTML+CSS+JS）游戏官网（或其它）页面------实例与代码（示例：游戏官网界面）
前端搭建(HTML+CSS+JS)游戏官网(或其它)页面------实例与代码(示例:游戏官网界面) 注意:网页中的示例图片均出自米哈游–原神官网设计,如侵权,联系博主立马进行删除. 目标:网页实现前 ...
web网页设计与制作-html+css+js实现企业官网展示
web网页设计与制作-html+css+js实现企业官网展示主要使用原生HTML.CSS.JavaScript编写的一个静态企业官网展示类型的网站. 文件目录 assets:静态资源目录: favi ...
上海疯狂神途适用于android设备,上海疯狂神途官网版
上海疯狂神途官网版是一款非常好玩的角色.热血.传奇类型的手游,全民骑战驰骋中州,双面灵枪周年巨献,为你带来激情无限的战斗乐趣,行会争霸荣耀天下,看看谁才是最为强大的存在,谁的行会能在这片大陆上称霸,冬 ...
单职业网站上那找服务器,神途发布网：六月新服盘点
原标题:神途发布网:六月新服盘点 --不知道上哪找好玩又热闹的服务器?快看这里. 老玩家们因为工作忙碌没法玩电脑,所以近几年玩传奇的人越来越少,但是神途却能完美的解决这个问题.神途三端数据互通,不存在 ...
Html5+Css实战前端小米官网左侧导航（思路+详解+素材）
实战后的效果大家好,我是小叶同学,如今都大二了,跟着学校老师只学到皮毛,不如自己自学,说起来也惭愧,今天实战Html+CSS小米官网左侧导航开发,后面也会一点点对小米官网全部开发,欢迎前来坐坐沙发 ...
HTML5作业：施华洛世奇-网站设计--官网设计
1.引言你是否有过相关设计结课作业,课程设计无处下手,网页要求的总数量太多?没有合适的模板?数据库,java,python,vue,html作业复杂工程量过大?毕设毫无头绪等等一系列问题.你想要解决 ...
美团html页面代码,html+css+js制作美团官网
[实例简介] 该美团官网用html+css+js实现,对于前端新手来说,也可以去找类似的官网练练手,对自己帮助还是很大的,其中的很多细节错误都可以在锻炼中修改.希望该项目对大家有帮助,下载了的朋友顺便 ...
大神免费官网激活下载project2016专业版最牛教程攻略
project2016作为最牛逼的项目管理软件,project2016可以保证您的项目,资源和团队井井有条,步入正轨,使用project2016,你可以几乎轻松地从任意位置规划和协作处理项目.但是很多 ...
html+css复刻NIKE官网静态页面（一）
nike的官网比较简洁,是我喜欢的风格,那么,复刻nike官网要怎么入手呢? html部分对一个网页进行复刻,我们应该先从结构下手. 这是初步的结构的分析,在html中我们可以用div或者secti ...

HTML5与CSS实现神途官网

HTML5与CSS实现神途官网相关推荐

最新文章

热门文章