H5C3第一个完整大项目————三国杀登录页跳转游卡官网

本次展示一下游卡官网的代码与成果图

成果图如下

其中业务板块可以悬停切换图片与下面内容

代码如下

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>Document</title><link rel="stylesheet" href="./img/swiper/swiper-bundle.min.css"><script src="./img/swiper/swiper-bundle.min.js"></script><link rel="stylesheet" href="./游卡首页.css">
</head><body><div class="all"><div class="body"><div class="header"><div class="h-b"><ul><li><a href=""><img src="./img/下载 (10).png" alt=""></a></li><li><a href=""><div class="h-first"><div class="h-box"><p class="h-font">首页</p><p class="h-english">HOME</p></div></div></a></li><li class="ul"><div class="h-second"><div class="h-box"><a href=""><p class="h-font">关于游卡</p><p class="h-english">ABOUT</p><ul class="h-qiye"><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></li></ul></a></div></div></li><li><a href=""><div class="h-box"><p class="h-font">用户中心</p><p class="h-english">USER</p></div></a></li><li><a href=""><div class="h-box"><p class="h-font">游卡商城</p><p class="h-english">SHOPPING</p></div></a></li><li class="ul"><a href=""><div class="h-second"><div class="h-box"><p class="h-font">加入游卡</p><p class="h-english">JOIN US</p><ul class="h-qiye"><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></li></ul></a></div></div></li><li class="ul"><div class="h-second"><div class="h-box"><a href=""><p class="h-font">联系我们</p><p class="h-english">CONTACT</p><ul class="h-qiye"><li><a href="">联系客服</a></li><li><a href="">合作联系</a></li><li><a href="">BISINESS</a></li><li><a href="">廉政举报</a></li><li><a href="">信用承诺</a></li><li></li></ul></a></div></div></li><li class="h-long"></li><li><a href=""><div class="h-box"><p class="h-last">登录<span>|</span>注册</p><p class="h-english">开启您的快乐旅程</p></div></a></li></ul></div></div><div class="main"><div class="m-big"><img src="./img/下载.jpg" alt=""><div class="m-two"><div class="m-f"><!-- Swiper --><div class="swiper mySwiper"><div class="swiper-wrapper"><div class="swiper-slide"><img src="./img/下载.gif" alt=""></div><div class="swiper-slide"><img src="./img/下载 (1).jpg" alt=""></div><div class="swiper-slide"><img src="./img/下载 (2).jpg" alt=""></div><div class="swiper-slide"><img src="./img/下载 (3).jpg" alt=""></div></div><div class="swiper-pagination"></div></div><!-- Initialize Swiper --><script>var swiper = new Swiper(".mySwiper", {spaceBetween: 30,centeredSlides: true,autoplay: {delay: 2500,disableOnInteraction: false,},pagination: {el: ".swiper-pagination",clickable: true,},navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});</script></div><div class="m-s"><div class="m-all"><div><span class="m-f1">最新资讯</span><span class="m-f2">NEWS</span></div><div class="m-box"><span class="m-b1">头条</span><span class="m-b2"><a href=""> 游卡全面启动品牌升级将打造中国领先的多场景文明</a></span></div><div class="san"></div><a href=""><div id="box"></div></a><div class="m-ul"><ul><li><a href=""><div class="m-li">三国杀文化月七月开启，游卡升维文化IP体验</div><div class="item">07-06</div></a></li><li><a href=""><div class="m-li"> 游卡举办BGM桌游展“德式马拉松”</div><div class="item">06-27</div></a></li><li><a href=""><div class="m-li">区政协中共界、共青团和青联界一行到访游卡 展开“青年社交互动应用的点点滴滴</div><div class="item">06-10</div></a></li><li><a href=""><div class="m-li">SCL火力全开，游卡智力电竞体系全面发力</div><div class="item">05-30</div></a></li><li><a href=""><div class="m-li">汇聚原创力量，第三届WODC硕果揭晓</div><div class="item">05-24</div></a></li></ul></div></div></div></div></div></div><div class="xbt"><div class="x-f"><span class="x-o">业务板块</span><span class="x-s">BUSINESS</span></div><ul class="item"><li><a href=""><div class="tu-o">线下桌游</div></a><ul><li class="wjw"><div class="tu-o-t"><a href=""><div class="tot-o"><img src="./img/下载 (11).png" alt=""><div class="tot-f"><div class="tot-o1"><a href="">“三国杀”系列</a></div><div class="tot-o2"><a href="">华语最大原创桌游，将三国历史与桌游完美结合，十年来好评如潮，影响深远。</a></div><div class="tot-o3"><a href="">进入官网</a></div></div></div><div class="tot-o"><img src="./img/1-2.jpg" alt=""><div class="tot-f"><div class="tot-o1"><a href="">《里斯本集市》</a></div><div class="tot-o2"><a href="">精心布置筹划，领略集市文化</a></div><div class="tot-o3"><a href="">进入官网</a></div></div></div><div class="tot-o"><img src="./img/1-3.png" alt=""><div class="tot-f"><div class="tot-o1"><a href="">《污痕圣杯：阿瓦隆的陨落》</a></div><div class="tot-o2"><a href="">宿命圣杯争夺，万物终将陨落</a></div><div class="tot-o3"><a href="">进入官网</a></div></div></div></a></div></li></ul></li><li class="b"><a href=""><div class="tu-s">线上游戏</div></a><ul class="a"><li class=""><div class="tu-s-t"><a href=""><div class="tot-o"><img src="./img/2-1.jpg" alt=""><div class="tot-f"><div class="tot-o1"><a href="">“三国杀”系列</a></div><div class="tot-o2"><a href="">华语最大原创桌游，将三国历史与桌游完美结合，十年来好评如潮，影响深远。</a></div><div class="tot-o3"><a href="">进入官网</a></div></div></div><div class="tot-o"><img src="./img/2-2.jpg" alt=""><div class="tot-f"><div class="tot-o1"><a href="">《里斯本集市》</a></div><div class="tot-o2"><a href="">精心布置筹划，领略集市文化</a></div><div class="tot-o3"><a href="">进入官网</a></div></div></div><div class="tot-o"><img src="./img/2-3.jpg" alt=""><div class="tot-f"><div class="tot-o1"><a href="">《污痕圣杯：阿瓦隆的陨落》</a></div><div class="tot-o2"><a href="">宿命圣杯争夺，万物终将陨落</a></div><div class="tot-o3"><a href="">进入官网</a></div></div></div></a></div></li></ul></li><li class="b"><a href=""><div class="tu-t">文创衍生</div></a><ul class="a"><li class="three"><div class="tu-t-t"><a href=""><div class="tot-o"><img src="./img/3-1.jpg" alt=""><div class="tot-f"><div class="tot-o1"><a href="">“三国杀”系列</a></div><div class="tot-o2"><a href="">华语最大原创桌游，将三国历史与桌游完美结合，十年来好评如潮，影响深远。</a></div><div class="tot-o3"><a href="">进入官网</a></div></div></div><div class="tot-o"><img src="./img/3-2.jpg" alt=""><div class="tot-f"><div class="tot-o1"><a href="">《里斯本集市》</a></div><div class="tot-o2"><a href="">精心布置筹划，领略集市文化</a></div><div class="tot-o3"><a href="">进入官网</a></div></div></div><div class="tot-o"><img src="./img/3-3.png" alt=""><div class="tot-f"><div class="tot-o1"><a href="">《污痕圣杯：阿瓦隆的陨落》</a></div><div class="tot-o2"><a href="">宿命圣杯争夺，万物终将陨落</a></div><div class="tot-o3"><a href="">进入官网</a></div></div></div></a></div></li></ul></li><li><a href=""><div class="tu-f">电子竞技</div></a></li></ul></div>

<div class="last"><a href="">查看更多+</a></div></div><div class="bottom"><div class="b-all"><div class="b-left"><a href=""><div><img src="./img/下载 (2).png" alt=""></div></a><a href=""><div><img src="./img/下载 (3).png" alt=""></div></a><a href=""><div><img src="./img/下载 (4).png" alt=""></div></a><a href=""><div><img src="./img/下载 (7).png" alt=""></div></a><div class="long"></div></div><div class="b-right">抵制不良游戏<span>|</span>拒绝盗版游戏<span>|</span>注意自我保护<span>|</span>谨防受骗上当<span>|</span>适度游戏益脑<span>|</span>沉迷游戏伤身<span>|</span>合理安排时间<span>|</span>享受健康生活网络文化经营许可证 浙网文[2016]0199-099号 文网游备字[2010]C-CBG009号 游戏批准文号 科技与数字【2010】284号增值电信业务经营许可证号码 [浙B2-20160108] 杭州游卡网络技术有限公司 　版权所有</div></div></div><div class="ce"><div><img src="./img/下载 (6).png" alt=""><div><a href="">官方游卡微信</a></div><img src="./img/下载 (8).png" alt=""><div><a href="">官方游卡微博</a></div></div></div></div></div>
</body></html>

css代码

* {margin: 0px;padding: 0px;text-decoration: none;/* padding-bottom: -500px; */
}.header {width: 100%;height: 90px;position: relative;background-color: #EAEAEA;
}.header img {height: 50px;margin-top: 20px;
}.header li {float: left;list-style: none;/* background-color: aqua; */}.h-box {height: 50px;width: 130px;/* background-color: green; */margin-top: 20px;/* text-align: center; *//* vertical-align: middle; */
}.h-font {height: 25px;line-height: 25px;/* background-color: aqua; */text-align: center;font-size: 20px;color: #262626;
}.h-font:hover {color: red;
}.h-english {font-size: 14px;text-align: center;line-height: 25px;color: #BEC8D5;
}.h-last {height: 25px;line-height: 25px;/* background-color: aqua; */text-align: center;font-size: 20px;color: red;
}.h-last span {color: #BEC8D5;margin: auto 8px;width: 1px;
}.h-b {/* background-color: antiquewhite; */height: 90px;width: 1192px;margin: 0 auto;/* position: relative; */
}.h-first {width: 130px;height: 66px;/* background-color: aqua; */border-bottom: 4px solid red;margin-left: 111px;
}.h-long {width: 1px;height: 40px;background-color: #BEC8D5;position: absolute;top: 25px;left: 1055px;
}.main {background-color: #333333;position: relative;width: 100%;height: 830px;margin: 0 auto;float: left;
}.m-big {width: 1919px;height: 830px;margin: 0 auto;border-radius: 5px;/* position: relative; */z-index: 1;/* position: absolute; */}.m-two {height: 300px;width: 1200px;background-color: white;position: relative;border-radius: 5px;top: -300px;left: 370px;z-index: 99;
}.m-f {height: 300px;width: 600px;/* background-color: red; */float: left;
}html,
body {position: relative;height: 100%;
}body {/* background: #eee; */font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;
}.swiper {width: 100%;height: 100%;border-radius: 5px;
}.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;
}.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}.h-qiye li {height: 33px;width: 130px;line-height: 33px;text-align: center;/* float: left; */color: black;/* display: none; *//* position: absolute; */font-size: 14px;/* z-index: 99; */
}.h-qiye a {color: #000;
}.h-qiye a:hover {color: red;
}.h-qiye {margin-top: 20px;background-image: url(./img/下载\ \(9\).png);/* !important? */position: absolute;float: left;z-index: 999;/* display: inline-block; */display: none;
}.ul:hover .h-qiye {display: block;
}.ul {position: relative;/* margin-bottom: 20px; */
}.h-second {height: 70px;/* background-color: aqua; */
}.m-s {/* background-color: blue; *//* float: right; */height: 300px;/* width: 500px; *//* padding: 29px; *//* padding-left: 29px; *//* margin: 29px; */
}.m-f1 {font-size: 20px;font-weight: bold;
}.m-f2 {font-size: 12px;font-weight: bold;margin-left: 10px;color: #A4A4A4;
}.m-all {height: 242px;padding: 29px;/* padding-left: ; *//* background-color: aquamarine; */margin-left: 600px;
}.m-box {height: 40px;background-color: #F3F3F3;line-height: 40px;border-radius: 5px;margin-top: 13px;position: relative;
}.m-b1 {width: 70px;background-color: red;display: block;text-align: center;color: white;float: left;font-size: 20px;border-radius: 5px 0 0 5px;
}.m-b2 a {width: 415px;overflow: hidden;margin: 0 29px;font-size: 18px;text-overflow: ellipsis;white-space: nowrap;float: right;display: block;margin-top: -40px;color: red;
}.san {height: 0px;width: 0px;border-left: 10px solid red;border-right: 10px solid transparent;border-top: 8px solid transparent;border-bottom: 8px solid transparent;position: absolute;top: 80px;right: 481px;
}.m-li {/* background-color: pink; *//* float: left; *//* margin-left: 20px; */text-overflow: ellipsis;width: 448px;overflow: hidden;white-space: nowrap;color: black;
}.item {float: right;margin-top: -33px;margin-right: 33px;color: black;
}.m-ul {margin-left: 20px;
}.m-ul li {height: 33px;width: 542px;line-height: 34px;}.m-li:hover {color: red;
}.item:hover {color: red;
}#box {position: absolute;/* 定位改变位置 */top: 0;left: 10;right: 0;bottom: 30;width: 40px;height: 30px;/* 设置宽高 */margin: auto;background-color: red;border-radius: 0 5px;/* 设置边框圆角 */
}
#box::before {content: "";/* 设置一个虚拟的，不占空间的块 */position: absolute;left: 50%;top: 0;/* 设置位置为box的竖线 */width: 2px;height: 45%;/* 设置宽高 */margin-left: -1px;margin-top: 8px;/* 调整位置 */background-color: white;
}#box::after {content: "";/* 设置一个虚拟的，不占空间的块 */position: absolute;left: 0;top: 40%;/* 设置位置为box的横线 */width: 33%;height: 2px;/* 设置宽高 */margin-top: 2px;margin-left: 13px;/* 调整位置 */background-color: white;
}/* 雪碧图部分，简称xbt */
.xbt {width: 1192px;height: 1000px;/* background-color: greenyellow; */margin-top: 800px;margin: 800px auto;position: relative;
}.x-f {height: 71px;/* background-color: yellow; */padding-top: 23px;
}.x-o {height: 48px;line-height: 48px;font-weight: bold;color: #000;font-size: 20px;/* display: block; */padding-top: 43px;float: left;
}.x-s {font-size: 12px;color: #A4A4A4;font-weight: bold;/* display: block; */padding-top: 64px;padding-left: 10px;float: left;
}.x-tu {height: 100px;width:1300px;background-color: #A4A4A4;margin-top: 40px;margin-left: -10px;
}.x-tu div {float: left;
}
.x-tu div>a{color: #000;
}
.tu-o {width: 293px;height: 100px;border: 1px solid transparent;background: url(./img/下载\ \(5\).png);background-position: 0px -105px;background-repeat: no-repeat;/* background-color: aquamarine; */font-size: 20px;line-height: 90px;padding-left: 10px;margin-right: 5px;float: left;
}
.x-tu .tu-o a{
color: white;
}
.tu-s {width: 297px;height: 100px;border: 1px solid transparent;background-image: url(./img/下载\ \(5\).png);background-position: -307px -325px;background-repeat: no-repeat;color: black;font-size: 20px;line-height: 90px;padding-left: 10px;
}.tu-t {width: 297px;height: 100px;border: 1px solid transparent;background: url(./img/下载\ \(5\).png);background-position: -302px 0px;background-repeat: no-repeat;color: black;font-size: 20px;line-height: 90px;padding-left: 10px;
}
.tu-o,.tu-s,.tu-t{margin-left:0px ;
}
.tot-o{position: relative;left: -80px;
}
.tu-f {width: 287px;height: 100px;border: 1px solid transparent;background: url(./img/下载\ \(5\).png);background-position: -302px -219px;background-repeat: no-repeat;color: black;font-size: 20px;line-height: 90px;padding-left: 10px;
}
.tu-o{color: white;
}
.tu-o:hover{color: #000;
}
.tu-s:hover{color: white;
}
.tu-s:hover .tu-o{width: 297px;height: 100px;border: 1px solid transparent;background-image: url(./img/下载\ \(5\).png);background-position: -307px -325px;background-repeat: no-repeat;color: black;font-size: 20px;line-height: 90px;padding-left: 10px;
}
.tu-t:hover{color: white;
}
.tu-f:hover{color: white;
}
.three{/* height: 0; */position: absolute;top: 125px;left: 310px;
}
.b:hover .a{display: block;
}
.a{display: none;float: left;/* margin-top: 20px; *//* margin-left: 100%; */
}
.item li{width:1400px ;height: 0px;margin-left: -100px;
}
.tu-t-t{margin-top: 131px;margin-left: -300px;/* background-color: red; */}
.tot-o3 a:hover{color: red;}
.tot-o3:hover{border:1px solid red;
}
.x-f{margin-bottom: 50px;float: left;margin-left: 10px;
}
.a li{width: 1100px;
}
.tu-s-t{margin-left: -300px;
}
.item>li{width: 293px;height: 100px;
}
.item{/* background-color: red; */width: 100px;
}
.tu-s:hover .tu-s-t{display: block;
}
.tot-o {width: 390px;height: 370px;box-shadow: 1px 1px 15px 1px #EEECEC;margin-top: 30px;float: left;margin: 30px;}.tot-f {padding: 10px;position: relative;
}.tot-o1 {margin-bottom: 15px;}.tot-o1 a {color: #000;font-weight: bold;font-size: 20px;
}.tot-o2 a {color: #999999;font-size: 16px;
}.tot-o3 {border: 1px solid #999999;border-radius: 5px;width: 100px;height: 30px;position: absolute;top: 110px;left: 280px;
}.tot-o3 a {color: #999999;font-size: 14px;line-height: 30px;margin-left: 20px;
} .last {height: 150px;width: 1000px;margin: -1103px 500px 0;font-size: 18px;/* background-color: red; *//* margin-top: -1103px; *//* float: left; */line-height: 150px;text-align: center;
}.last a {color: #999999;
}.bottom {width: 1050px;height: 82px;/* background-color: aqua; */margin: 0 auto;padding-top: 30px;margin-top: -00px;/* margin-bottom: 0px; */
}.b-all {height: 52px;width: 1050px;/* margin-top:30px ; *//* background-color: blue; */margin: 0 auto;position: relative;
}.b-left {height: 52px;width: 445px;/* background-color: bisque; *//* float: left; *//* padding: 10px; */margin-left: -40px;/* line-height:52px ; */
}.b-left img {float: left;margin-left: 17px;margin-top: 18px;
}.long {width: 1px;height: 55px;border-left: 1px solid #a69dc2;margin-right: 8px;/* vertical-align: middle; *//* display: inline-block; */float: left;margin-top: 15px;/* background-color: green; */
}.b-right {height: 52px;width: 659px;/* background-color: gray; *//* float: right; *//* margin-bottom: 60px; */position: absolute;top: 15px;right: 0px;font-size: 12px;color: #888897;
}.b-right span {color: #a69dc2;padding: 0 4px;
}.xbt li {/* text-decoration: none; */list-style: none;float: left;margin-left: 10px;margin-top: 15px;/* background-color: #a69dc2; */}.xbt ul {float: left;/* background-color: aquamarine; */width: 1300px;
}.tu-o:hover {background: url(./img/下载\ \(5\).png);background-position: -302px -105px;background-repeat: no-repeat;
}
.tu-s:hover{background: url(./img/下载\ \(5\).png);background-position: -1px -325px;background-repeat: no-repeat;
}
.tu-t:hover{background: url(./img/下载\ \(5\).png);background-position: -1px -1px;background-repeat: no-repeat;
}
.tu-f:hover{background: url(./img/下载\ \(5\).png);background-position: -1px -215px;background-repeat: no-repeat;
}
.tu-o a:hover .tu-o-t {display: block;
}/* 重写 */
.ce {width: 210px;height: 461px;position: fixed;right: 60px;top: 395px;z-index: 5;background: url(./img/下载\ \(1\).png) 0 0 no-repeat;}
.ce>div{position: relative;top: 120px;
}.ce div{height:20px;width: 130px;/* background-color: red; */line-height: 20px;margin: 0 auto;text-align: center;
}
.ce a{color: red;
}

点击三国杀中登录即可跳转游卡首页

这就是H5C3阶段做的第一个完整大项目。

H5C3第一个完整大项目————三国杀登录页跳转游卡官网相关推荐

HTML5期末大作业：美食主题网站设计——美食零食官网响应式网页设计(6页) HTML+CSS+JavaScript
HTML5期末大作业:美食主题网站设计--美食零食官网响应式网页设计(6页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品常见网 ...
vue若依登录页跳转其他页
前言今天遇到一个情况,若依框架的登录页跳转问题,登录页下面有个注册,但是要在注册左边再加一个跳转,路由配好后点击跳转没反应,或者说是还是跳到了登录页之前不是跳的404,是我新加的一个公共路由页面, ...
Flutter Web（一）新建项目和登录页
flutter开发环境搭建略如果是新搭建好的环境,需要开启web支持和windows支持 flutter config --enable-windows-desktop flutter config ...
前端小练————三国杀登录页
html部分 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
全国志愿信息服务器,全国志愿者服务信息系统官网登录,2020全国志愿者服务信息系统官网登录注册入口预约 v1.0-手游汇...
全国志愿者服务信息系统官网登录是一款用户们都可以使用的软件,最新的志愿者的活动会在平台上不断的更新都是附近的一些内容,这个平台本身来说是非常安全可靠的.您如果有意向的话在手机上就能够轻松的报名,可以充 ...
如何利用开源项目，帮助企业免费搭建小程序官网
微信小程序是目前特别火的一款程序,也是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 企业想自己搭建简单的小程序官网,可以使用开源的一些资源进行搭建,用到的 ...
登录页跳转时保存用户信息-遇坑记
项目中遇到的问题,重新建前端界面,遇到了这个问题. 项目中使用Angular JS + admin LTE + bootstrap3 保存用户信息,我有两种思路,一个是使用Angular JS-ser ...
Python爬虫——简易模拟登录【以科文学院教务官网为例】
实战:对科文教务系统进行拦截科文学院教务系统内网地址:http://10.110.240.221/jsxsd/ 进入官网后再打开拦截. 输入一个错误的账号密码进行试探. 点击登陆按钮,进行拦截,可以 ...
微擎--登录页跳转修改
需要二开微擎框架的小伙伴可以参考下这篇文章. 上级发话,需求:登录后跳转到公众号管理页面. 熟悉微擎的都知道现在微擎登陆后默认跳转到的是系统管理页面http://www.******.cn/web/i ...

H5C3第一个完整大项目————三国杀登录页跳转游卡官网

H5C3第一个完整大项目————三国杀登录页跳转游卡官网相关推荐

最新文章

热门文章