本次展示一下游卡官网的代码与成果图
成果图如下
其中业务板块可以悬停切换图片与下面内容
代码如下
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阶段做的第一个完整大项目。
352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
