HTML+css制作简单游戏界面

开学在即闲来无事在家做了一个简单的游戏开始界面，下面看看具体代码吧，其实非常的简单这里只用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直播

HTML+css制作简单游戏界面相关推荐

html+css 制作简单QQ登录页面
HTML+css制作简单QQ登录页面这是效果图这是HTML源码 <!DOCTYPE html> <html lang="zh"><head> ...
使用html和css制作简单的网页
使用html和css制作简单的网页创作不易,可否给作者点个赞再走 html部分: /** * author 阿木木 * date 09/26 10:23 * / <html><he ...
使用HTML和css制作简单的公司介绍网页
使用HTML和css制作简单的公司介绍网页创作不易,可否给作者点个赞再走 HTML部分: /** * author 阿木木 * date 09/23 14:32 * / <html>&l ...
CSS制作简单loading动画
曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用"障眼法"做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止 ...
HTML+CSS制作简单的家乡网页 ——我的家乡介绍广东 web前端期末大作业
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
html如何做滑动门效果,div+css制作简单滑动门效果
现在流行的网站设计中,水平导航菜单占据了大壁江山.的确,无论是门户网站还是企事业单位网站,都大量的采用水平的导航菜单设计.而水平导航菜单中,又有绝大多数网站采用"滑动门"设计. 首 ...
CSS制作简单的横向菜单
1.先写一个列表,建立菜单的结构 <span style="font-size:14px;"><span style="font-size:14px;& ...
html css制作简单优惠卷
实现效果: 代码如下: <!DOCTYPE html> <html> <head><title>无标题页</title><style& ...
html和css制作简单的个人网页
/ 01 / 主题 <Jasmine> / 02 / 图摘 / 03 /
运用css制作简单的体育新闻网页
源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf- ...

HTML+css制作简单游戏界面

HTML+css制作简单游戏界面相关推荐

最新文章

热门文章