仿腾讯盒子游戏（新手练习）
Posted 你的指尖-有改变世界的力量
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了仿腾讯盒子游戏（新手练习）相关的知识，希望对你有一定的参考价值。
效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test2</title>
<style type="text/css">
*
margin: 0;
padding: 0;
.w
width: 950px;
margin: 0 auto;
.top
width: 100%;
height: 95px;
background-color: #282828;
.logo
width: 260px;
height: 95px;
float: left;
background: url("img/logo.jpg") no-repeat;
.login
width: 230px;
float: right;
color: #ffffff;
font-family: 微软雅黑;
line-height: 95px;
.login a
/*position: relative;*/
/*top:30px;*/
text-decoration: none;
color: #fff;
font-size: 14px;
font-family: 微软雅黑;
.middle
width: 100%;
height: 507px;
background: url("img/bg.jpg") no-repeat -70px;
.middle2
width: 100%;
height: 255px;
background-color: #D3D3D4;
.middle2 ul
width: 100%;
height: 155px;
.middle2 ul li
width: 162px;
height: 160px;
list-style: none;
float: left;
/*border: 1px solid rebeccapurple;*/
margin-left: 25px;
.box
width: 162px;
height: 0px;
padding-top: 96px;
.box1
background: url("img/spr.png") no-repeat center 0px ;
.box2
background: url("img/spr.png") no-repeat center -96px;
.box3
background: url("img/spr.png") no-repeat center -192px;
.box4
background: url("img/spr.png") no-repeat center -288px;
.box5
background: url("img/spr.png") no-repeat center -384px;
.middle2 .s1
display: block;
/*margin-top: 96px;*/
width: 162px;
height: 20px;
font-size: 20px;
color: #000000;
font-weight: 900;
text-align: center;
margin-bottom: 10px;
.middle2 .s2
display: block;
width: 162px;
height: 30px;
font-size: 12px;
line-height: 18px;
color: rgba(33, 20, 37, 0.96);
.middle2 .s3
margin: 0 auto;
display: block;
width: 132px;
height: 30px;
font-size: 12px;
line-height: 18px;
color: rgba(33, 20, 37, 0.96);
.footer
width: 100%;
height: 80px;
background-color: #D3D3D4;
line-height: 40px;
font-size: 12px;
text-align: center;
color: rgba(33, 20, 37, 0.96);
</style>
</head>
<body>
<div class="top">
<div class="w">
<div class="logo"></div>
<div class="login">
<a href="#">登录</a>
|
<a href="#">论坛</a>
|
<a href="#">反馈意见</a>
</div>
</div>
</div>
<div class="middle">
</div>
<div class="middle2">
<div class="w">
<ul>
<li class="li_1">
<div class="box box1"><span class="s1">智能加速</span><span class="s2">游戏中卡、顿，不再束手无策急速游戏体验，只需轻轻一点</span></div>
</li>
<li>
<div class="box box2"><span class="s1">防掉线</span><span class="s3">7×24小时超出挂机保护不再为挂机掉线烦恼
</span></div>
</li>
<li>
<div class="box box3"><span class="s1">账号多开</span><span class="s3">账号密码轻松为你管理多开账号依然流畅不卡</span></div>
</li>
<li>
<div class="box box4"><span class="s1">礼包</span><span class="s3">多平台礼包一站式领取助你快速赚取游戏资源</span></div>
</li>
<li>
<div class="box box5"><span class="s1">全屏</span><span class="s3">新增加强型全屏功能模块免干扰，让你游戏更专注</span></div>
</li>
</ul>
</div>
</div>
<!--<hr class="hr_1"/>-->
<hr color="#ccc" />
<div class="footer">
Copyright © 1998 - 2013 Tencent. All Rights Reserved.
<br>腾讯公司 版权所有
<!--<hr>-->
<!---->
</div>
</body>
</html>以上是关于仿腾讯盒子游戏（新手练习）的主要内容，如果未能解决你的问题，请参考以下文章
#yyds干货盘点# LeetCode 腾讯精选练习 50 题：Nim 游戏