HTML制作开心网游戏静态页面

利用css样式，设置游戏网站的静态页面，先说明思路：1.先设置最上方为一个div，并且添加背景颜色（建议用取色器，这里比较草率）2.将第二个板块划分为一个div，左侧为ul，注意宽度的合理分配，并且在右边插入一个div用于存放提交表格3.下方的两块以及右侧划分两个div，注意上方文字的对齐和背景。

等待是种历练

2612人浏览 · 2022-11-07 10:39:07

等待是种历练 · 2022-11-07 10:39:07 发布

css代码：

<style>
            *{
                margin: 0px; padding: 0px;
            }
            #top1{
                position: relative;
                width: 1000px;
                height: 45px;
                border: 1px solid red;
                background-color: #f3515c;
            
            }
            #top1 p{
                float: right;
                line-height: 45px;
            padding-right: 20px;
            color: white;
            font-size: small;
            }
#top1 a{
    text-decoration: none;
    color: white;
    display: inline-block;
    line-height: 40px;
    padding-right:10px ;
}
#top1 h5{
        background: url(QQ/gameLogo.jpg) 0px 0px no-repeat;
        height: 45px;
        float: left;
}
#top1 h5 span{
    display: inline-block;
    color: #f3515c;
    background-color: white;
    margin-left: 250px;
    margin-top: 5px;
    text-align: center;
    font-size: 15px;
    line-height: 40px;
    border-radius: 5px 5px 0px 0px;
    width: 70px;
    height: 40px;
}
#top2{
    width: 1000px;
    height: 230px;
    border: 1px solid red;
}
#top2 ul{
    width: 190px;
    height: 230px;
    float: left;
}
#top2 ul li{
    display: block;
    padding-top: 1px;
    background: url(QQ/gameBg1.jpg);
}
#top2 ul li a{
    text-decoration: none;
    color: black;
    line-height: 27px;
    padding-left: 30px;
}
#topimg {
    width: 520px;
    height: 230px;
    float: left;
    padding-top: 2px;
}
.right{
    background-color: gainsboro;
    height: 230px;
    padding-left: 10px;
}
.right form h1{
    color: dimgray;
    font-size: 18px;
    display: block;
    margin-left: 2em;
    line-height: 70px;
    height: 50px;
    padding-left: 10px;
}
.a{
float: left;
    padding-left: 20px;
    padding-top: 20px;
}
.right form p{
    height: 20px;
}
.right form p:nth-of-type(3){
    padding-left: 80px;
    padding-top: 20px;
    float: left;
}
.right form p:nth-of-type(3) input{
    background-color: red;
    color: white;
    display: inline-block;
    float: left ;
    width: 70px;
    height: 30px;
    letter-spacing: 5px;
    
}
.right form p:nth-of-type(4) a{
    display: block;
    text-decoration: none ;
    float: left ;
    margin-left: 20px;
    padding-top: 20px;
    font-size: small;
}
.right form p:nth-of-type(5) a{
    display: block;
    text-decoration: none ;
    float: left ;
    margin-left: 20px;
    padding-top: 0px;
    font-size: small;
}
.top3{
    width: 1000px;
    height: 660px;
}
.topheight{
    width: 710px;
    height: 660px;
    float: left;
    padding-left: 0px;
    display: inline-block;
}
.aaa{
    border: 1px solid darkgray;
    width: 710px;
    height: 230px;
}
.bbb{
    width: 190px;
    height: 190px;
    margin: 15px;
    float: left;
    display: inline-block;
    background:url(QQ/img-4.jpg)0px 25px no-repeat;
    text-align: center;
}
.ccc{
    width: 130px;
    height: 190px;
    float: left;
    font-size: 15px;
margin-top: 30px;
}
.aa{
    border: 1px solid darkgray;
    width: 350px;
    height: 200px;
    margin-top: 20px ;
    display: inline-block;
}
.ddd{
    width: 190px;
    height: 190px;
    margin: 15px;
    float: left;
    display: inline-block;
    background:url(QQ/img-5.jpg)0px 25px no-repeat;
}
.eee{
    width: 130px;
    height: 190px;
    float: left;
    font-size: 15px;
    margin-top: 30px;
}
.topheight h3{
    background-color: #DCDCDC;
    text-align: left;
    height: 30px;
    padding-top: 20px;
    font-size: 15px;
}
.topheight h3 span{
    color: red;
}
.topheight a{
    text-decoration: none;
    color: #000000;
}
.table tr td{
    margin-top: 30px;
    padding-left: 30px;
}
.fff h1{
    font-size: 20px;
}
.fff tr:nth-of-type(2){
    text-align: center;
    color: red;
}
.fff tr:nth-of-type(3){
    font-size: 12px;
}
.fff tr:nth-of-type(4){
    font-size: 12px;
}
.fff tr:nth-of-type(7){
    text-align: center;
    color: red;
}
.fff tr:nth-of-type(8){
    font-size: 12px;
}
.fff tr:nth-of-type(9){
    font-size: 12px;
}
.top4{
    border: 1px solid darkgray;
    
}
.top5{
    border: 1px solid darkgray;
}
.bottom{
    border: 1px solid darkgray;
    padding-top: 3px;
}
.rrr{
    width: 290px;
    height: 660px;
    float: left;
    display: inline-block;
}
.rrr h1{
    border: 1px solid #DCDCDC;
    color: #B22222;
    font-size: 17px;
    height: 23px;
    line-height: 23px;
    padding-left: 8px;
    background-color: gainsboro;
}
li{
    list-style: none;
}
.rrr li{
    height: 30px;
    line-height: 30px;
    background:url(QQ/btn-04.gif)5px 8px no-repeat;
    padding-left: 45px;
    border-bottom: 1px dashed;
    font-size: 15px;
}
.rrr h2{
    border: 1px solid darkgray;
    color: #B22222;
    font-size: 17px;
    height: 23px;
    line-height: 23px;
    padding-left: 8px;
    background-color: gainsboro;
}
.yyy{
    height: 234px;
}
.cc{
    margin: 15px;
    float: left;
    
}
.dd{
    padding-top: 20px;
    font-size: 0.8em;
    color: darkblue;
    padding-bottom: 40px;
    border-bottom: 1px dashed;
}
.ee{
    padding-top: 30px;
    font-size: 0.8em;
    color: darkblue;
}
.footer{
    float: left;
    font-size: 14px;
}
.footer a{
    text-decoration: none;
    color: darkblue;
}
.footer span{
    color: darkgray;
    padding-left: 18px;
}
        </style>

body部分代码：

<div id="top1">
 <h5><span>首页</span></h5>
			<p>
				<a href="#">注册</a>|
				<a href="#">登录</a>|
				<a href="#">帮助</a>|
				<a href="#">更多</a>
			</p>	
		</div>
		<div id="top2">
			<ul>
				<li><img src="QQ/sub-1.gif"><a href="#">侠客世界</a></li>
				<li><img src="QQ/sub-2.gif"><a href="#">征战四方</a></li>
				<li><img src="QQ/sub-3.gif"><a href="#">龙将</a></li>
				<li><img src="QQ/sub-4.gif"><a href="#">弹弹堂</a></li>
				<li><img src="QQ/sub-5.gif"><a href="#">凡人修仙2</a></li>
				<li><img src="QQ/sub-6.gif"><a href="#">一骑当先</a></li>
				<li><img src="QQ/sub-7.gif"><a href="#">宫廷计</a></li>
				<li><img src="QQ/sub-8.gif"><a href="#">神仙道</a></li>
			</ul>
			<div id="topimg">
				<img src="QQ/img-3.jpg"/>
			</div>
			<div class="right">
				<form action="#" method="post">
					<h1>用户登录界面</h1>
					<p class="a">账号:<input type="text" name="zhanghao"></p>
					<p class="a">密码:<input type="password" name="mima"></p>
					<p><input type="submit"></p>
					<p><a href="#">立即注册</a></p>
					<p ><a href="#">忘记密码</a></p>
				</form>
			</div>
		</div>
		<div class="top3">
			<div class="topheight">
				<h3 style="background-color: #DCDCDC;"><p><span>全部游戏</span>&nbsp;&nbsp;&nbsp;<a href="#">战争策略</a> | 
				<a href="#">体育经验</a> | <a href="#">社交游戏</a>  </p></h3>
				<div class="aaa">
					<dl >
						<dr >
							<div class="aa">
								<dd class="bbb"></dd>
							<dd class="ccc"> <h2>龙将</h2>
			三国题材横版RPG网游，丰富的武将系统
			<p>类型：角色扮演 </p>
			<p>游戏人气：470921</p>
			<p><img src="./QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></p></dd>
							</div>
					<div class="aa">
					<dd class="ddd"> </dd>
			<dd class="eee"><h2>征战四方</h2>
			一款不建主城不等CD，不占资源，全程战斗
			<p>类型：战征策略</p>
			<p>游戏人气：87451</p>
			<p><img src="./QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></p>
			</dd>	
					</div>		
			
						</dr>
					</dl>
				</div>
			
		
			<div class="fff">
				<div class="top4">
					
				
			<h1 style="color: brown;background-color: aliceblue;">角色扮演</h1>
			<table class="table">
				<tr>
					<td><img src="QQ/img-6.jpg"></td>
					<td><img src="QQ/img-7.jpg"></td>
					<td><img src="QQ/img-8.jpg"></td>
					<td><img src="QQ/img-9.jpg"></td>
				</tr>
				<tr>
					<td> 神仙道</td>
					<td>征战四方</td>
					<td>一骑当先</td>
					<td>洪荒神话</td>
				</tr>
				<tr>
					<td>游戏人气：117614</td>
					<td>游戏人气：1245814</td>
					<td>游戏人气：1232158</td>
					<td>游戏人气：123745</td>
				</tr>
				<tr>
					<td>游戏状态：22区开启</td>
					<td>游戏状态：23区开启</td>
					<td>游戏状态：25区开启</td>
					<td>游戏状态：18区开启</td>
				</tr>
				<tr>
					<td><img src="QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></td>
					<td><img src="QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></td>
					<td><img src="QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></td>
					<td><img src="QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></td>
				</tr>
				<tr>
					<td><img src="QQ/img-10.jpg"></td>
					<td><img src="QQ/img-11.jpg"></td>
					<td><img src="QQ/img-12.jpg"></td>
					<td><img src="QQ/img-13.jpg"></td>
				</tr>
				<tr>
					<td>龙将</td>
					<td>一球成名</td>
					<td>凡人修真2</td>
					<td>傲视开地</td>
				</tr>
				<tr>
					<td>游戏人气：178501</td>
					<td>游戏人气：983014</td>
					<td>游戏人气：745214</td>
					<td> 游戏人气：654814</td>
				</tr>
				<tr>
					<td> 游戏状态：火爆开启</td>
					<td>游戏状态：2服开启</td>
					<td>游戏状态：4服开启</td>
					<td>游戏状态：火爆开启</td>
				</tr>
				<tr>
					<td><img src="QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></td>
					<td><img src="QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></td>
					<td><img src="QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></td>
					<td><img src="QQ/btn-02.jpg"><img src="QQ/btn-03.jpg"></td>
				</tr>
			</table>
			</div>
			</div>
			</div>
			 <div class="rrr">
				 <div class="top5">
					 <h1>新闻公告</h1>
					 <ul class="lll">
						 <li>[征战四方] 开心首服·黄巾之乱</li>
						 <li>[龙将] 火爆8服·八门金</li>
						 <li>[弹弹堂] 41服开启·万人竞技</li>
						 <li>[凡人修真2] 03月08日·四海帝王</li>
						 <li>[一骑当先] 开心2服上线送黄金</li>
						 <li>[宫廷计] 03月06日·西施秘史</li>
						 <li>[神仙道] 03月05日·玄净魔影</li>
						 <li>[千军破] 48服·登录送史实名将</li>
						 <li>[大唐行镖] 全球唯一走镖页游</li>
						 <li>[范特西篮球] 疯狂纽约来啦！</li>
						 <li>[一球成名] 27服开服·王者之战</li>
						 <li>[凡人修真2] 03月08日·四海帝王</li>
					 </ul>
				 </div>
				 <div class="bottom">
					 <h2>游戏视频</h2>
					 <ul class="yyy">
						 <dl>
							 <dr>
								 <dd class="cc"><img src="QQ/img-1.jpg"></dd>
								 <dd class="dd"><a>《航海之王》麻辣炫酷反穿越，英雄时尚大变身！</a></dd>
							 </dr>
							 <dr>
							 <dd class="cc"><img src="QQ/img-2.jpg"></dd>
							 <dd class="ee"><a>《弹弹堂》吴克群同名激情主题MV，体验修真乐趣 </a></dd>
							 </dr>
						 </dl>
					 </ul>
				 </div>
			 </div>
			 <div class="footer">
				 <a href="#">关于我们</a>&nbsp;&nbsp;<a href="#">手机版</a>&nbsp;&nbsp;<a href="#">开放平台</a>&nbsp;&nbsp;<a href="#">自助广告</a>&nbsp;&nbsp;
				  <a href="#">招聘</a>&nbsp;&nbsp;<a href="#">客服</a>&nbsp;&nbsp;<a href="#">帮助</a> <span> @2013开心网   文网文[2009]157号   京ICP证080482号   京公网安备110000000003号 未成年人家长监护</span>
			 </div>

			</div>

图片素材：