开学在即闲来无事在家做了一个简单的游戏开始界面,下面看看具体代码吧,其实非常的简单这里只用HTML和css做的静态页面。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>漫溯五千年</title>
<link rel="stylesheet" href="css/public.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="Box">
<!-- 头部 -->
<div class="box1">
<!-- 用户部分 -->
<div class="box_admin">
<div class="im">
<img src="img/pic.jpeg" >
</div>
<p>用户昵称</p>
<div class="wz">
LV.1
</div>
<div class="im1">
<img src="img/box_admin_pic1.png" >
</div>
</div>
<!-- 用户部分 end-->
<div class="box_member">
<img src="img/pic7.png" >
<div class="member1">
<a href="#">会员</a>
</div>
</div>
<!-- 升等级部分 -->
<div class="box_energy">
<div class="enery1">
<div class="en1">
<img src="img/pic2.jpeg" >
</div>
<div class="en2">
<img src="img/pic3.png" >
</div>
</div>
<div class="enery2">
<div class="en1">
<img src="img/pic2.jpeg" >
</div>
<div class="en3">
<img src="img/pic4.png" >
</div>
</div>
<div class="enery3">
<div class="en1">
<img src="img/pic2.jpeg" >
</div>
<div class="en4">
<img src="img/pic5.png" >
</div>
</div>
<div class="enery4">
<a href="#"><img src="img/pic6.png" ></a>
<div class="en5">
<a href="#">首充</a>
</div>
</div>
</div>
<!-- 升等级部分 end-->
<!-- 消息显示部分 -->
<div class="box_message">
<div class="M1">
<img src="img/pic8.png" >
<div class="m1">
<a href="#">好友</a>
</div>
</div>
<div class="M2">
<img src="img/pic9.png" >
<div class="m2">
<a href="#">信息</a>
</div>
</div>
<div class="M3">
<img src="img/pic10.png" >
<div class="m3">
<a href="#">好友动态</a>
</div>
</div>
<div class="M4">
<img src="img/pic11.png" >
<div class="m4">
<a href="#">设置</a>
</div>
</div>
<div class="M5">
<img src="img/pic12.png" >
<div class="m5">
<a href="#">更多</a>
</div>
</div>
</div>
<!-- 消息显示部分 end-->
</div>
<!-- 头部 end-->
<!-- 历史闯关部分 -->
<div class="box2">
<div class="part2">
<ul class="flex-ct">
<li>
<a href="http://www.chrome.com" target="_blank">
<img src="img/pic22.png" >
</a>
</li>
<li>
<a href="http://www.chrome.com" target="_blank" >
<p>鼎足而立-三国</p>
</a>
</li>
<li>
<a href="http://127.0.0.1:8848/%E5%94%90%E4%BB%A3/index.html" >
<p>太平盛世-唐</p>
</a>
</li>
<li>
<a href="http://www.chrome.com" target="_blank" >
<p>百花齐放-宋</p>
</a>
</li>
<li>
<a href="http://www.chrome.com" target="_blank" >
<p>大疆无边-元</p>
</a>
</li>
<li>
<a href="http://www.chrome.com" target="_blank" >
<p>八府巡按-明</p>
</a>
</li>
<li>
<a href="http://www.chrome.com" target="_blank" >
<p>闭关自首-清</p>
</a>
</li>
<li>
<a href="http://www.chrome.com" target="_blank" >
<img src="img/pic22.png" >
</a>
</li>
</ul>
</div>
<div class="part3">
<div class="case">
<img src="img/pic13.png" >
<div class="word">
<a href="#">商城</a>
</div>
</div>
<div class="case1">
<img src="img/pic14.png" >
<div class="word1">
<a href="#">福利</a>
</div>
</div>
<div class="case2">
<img src="img/pic15.png" >
<div class="word2">
<a href="#">成就</a>
</div>
</div>
<div class="case3">
<img src="img/pic16.png" >
<div class="word3">
<a href="#">寻宝</a>
</div>
</div>
<div class="case4">
<img src="img/pic17.png" >
<div class="word4">
<a href="#">任务</a>
</div>
</div>
</div>
</div>
<!-- 历史闯关部分 end-->
<!-- 底部 -->
<div class="box3">
<div class="foot1">
<img src="img/pic18.png" >
<p>游戏指南</p>
</div>
<div class="foot2">
<img src="img/pic19.png" >
<p>游戏介绍</p>
</div>
<div class="foot3">
<img src="img/pic20.png" >
<p>游戏技巧</p>
</div>
<div class="foot4">
<a href="#"><img src="img/pic21.png" ></a>
</div>
</div>
<!-- 底部 end-->
</div>
</body>
</html>
public.css
*{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
ul,li,ol{
list-style: none;
}
.clear{
clear: both;
height: 0;
line-height: 0;
font-size: 0;
overflow: hidden;
}
.body{
font-family: "microsoft yahei",verdana,"pingfang sc",simsun;
}
textarea{
resize: none;
}
button,
input[type=button],
input[type=reset],
input[type=submit]
{
cursor: pointer;
}
style.css
.Box{
width: 1920px;
height: 1080px;
background: url(../img/box-GIF.gif);
background-size: 100% 100%;
margin-left: auto;
margin-right: auto;
}
.box1{
width: 1920px;
height: 100px;
}
.box_admin{
float: left;
height: 100px;
width: 280px;
}
.im img{
width: 100px;
height: 100px;
border-radius: 50%;
float: left;
}
.box_admin p{
font-size: 25px;
padding-left: 130px;
padding-top: 10px;
}
.wz {
font-size: 20px;
padding-top: 18px;
float: left;
}
.im1 img{
margin-top: 18px;
width: 140px;
height: 30px;
}
.box_member{
width: 60px;
height: 100px;
float: left;
margin-left: 20px;
}
.box_member img{
width: 50px;
height: 60px;
}
.member1 a{
font-size: 23px;
color: #f8ac09;
line-height: 40px;
}
.box_energy{
width: 760px;
height: 100px;
float: left;
margin-left: 140px;
}
.enery1 ,
.enery2 ,
.enery3{
width: 180px;
height: 40px;
margin-top: 16px;
border-radius: 50px;
border-color: #0000FF;
border-style: solid;
opacity: 0.9;
}
.enery1 ,.enery2,.enery3{
float: left;
}
.enery2,.enery3{
margin-left: 30px;
}
.en1 img{
width: 40px;
height: 40px;
cursor: pointer;
float: left;
}
.en2 img,
.en3 img,
.en4 img{
width: 40px;
height: 40px;
float: right;
cursor: pointer;
}
.enery4{
width: 60px;
height: 80px;
float: right;
}
.enery4 img{
width: 40px;
height: 40px;
margin-top: 15px;
cursor: pointer;
}
.en5 a{
font-size: 23px;
color: #CC8800;
line-height: 42px;
}
.box_message{
width: 580px;
height: 100px;
float: right;
}
.M1,
.M2,
.M4{
width: 60px;
height: 100px;
float: left;
}
.M2,
.M3
,.M4
{
margin-left: 55px;
}
.M3{
width: 100px;
height: 100px;
float: left;
}
.M5{
width: 80px;
height: 100px;
float: right;
}
.M1 img
,.M2 img
{
width: 50px;
height: 60px;
}
.M3 img{
width: 60px;
height: 50px;
margin-left: 18px;
margin-top: 8px;
}
.M4 img,
.M5 img{
width: 50px;
height: 50px;
margin-top: 8px;
}
.m1 a
,.m2 a
,.m3 a
,.m4 a
,.m5 a
{
font-size: 23px;
color: #CC8800;
line-height: 35px;
}
.box2{
width: 1920px;
height: 800px;
}
.part2{
width: 1650px;
height: 800px;
float: left;
}
.part2 ul {
display: flex;
padding-top: 260px;
justify-content: space-evenly;
}
.flex-ct{
align-items: center;
}
.part2 ul li {
background: url(../img/part2-listbg.png) no-repeat;
width: 150px;
height: 300px;
font-size: 35px;
cursor: pointer;
transition: all 1.5s;
}
@keyframes tan{
0%{
transform: translateY(0);
}
25%{
transform: translateY(-200px);
}
50%{
transform: translateY(0);
}
75%{
transform: translateY(200px);
}
100%{
transform: translateY(0);
}
}
.part2 ul li:hover{
animation: tan 3s;
}
.part2 >ul >li>a{
width: 80px;
height: 292px;
writing-mode: tb-rl;
writing-mode: vertical-rl;
text-align: center;
-webkit-display:flex;
flex-direction: column;
justify-content: center;
color: #000;
font-size: 30px;
}
.part2 a > p:hover{
color: #0000ff;
}
.part2 img{
width: 60px;
height: 60px;
}
.part3{
width: 260px;
height: 800px;
float: right;
}
.case,
.case1,
.case2,
.case3,
.case4
{
width: 120px;
height: 100px;
margin-left: auto;
}
.case{
margin-top: 80px;
}
.case1,.case2,.case3,.case4{
margin-top: 40px;
}
.case img
,.case1 img
,.case3 img
{
width: 70px;
height: 60px;
margin-left: 20px;
}
.case2 img
,.case4 img{
width: 60px;
height: 60px;
margin-left: 20px;
}
.word a
,.word1 a
,.word2 a
,.word3 a
,.word4 a{
font-size: 25px;
color: #CC8800;
line-height: 35px;
padding-left: 30px;
}
.box3{
width: 1920px;
height: 180px;
}
.foot1{
width: 260px;
height: 180px;
margin-left: 50px;
float: left;
}
.foot2
,.foot3{
width: 260px;
height: 180px;
margin-left: 100px;
float: left;
}
.foot1 img
,.foot2 img
,.foot3 img
{
width: 80px;
height: 100px;
margin-top: 80px;
float: left;
margin-right: 20px;
}
.foot3 img{
width: 100px;
height: 80px;
}
.foot1 p
,.foot2 p
,.foot3 p{
font-size: 32px;
color: #CC8800;
padding-top: 100px;
cursor: pointer;
}
.foot4{
width: 700px;
height: 200px;
float: right;
}
.foot4 img{
width: 450px;
height: 180px;
margin-left: 250px;
}
下面附上页面结果:游戏-CSDN直播