开心网游戏界面Html

最新推荐文章于 2024-01-06 11:48:10 发布

原创

最新推荐文章于 2024-01-06 11:48:10 发布 · 6.9k 阅读

70 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #html5

文章目录

敲完心得
页面目标图
我的效果图
我敲的代码
布局分析图+图片素材

敲完心得

傍晚了，花了一下午时间，我终于终于把这个页面东凑西拼弄好了，高度还原了这个页面，怎么说呢，真的很累，就是凑，在敲代码前还是建议先构思好，你要用表格还是列表还是表单什么的，先想好布局，然后再下手，成果了就好，虽然累，但是看到结果出来那一刻还是能开心一点点的，好了，吃饭去啦。加油！

页面目标图

在这里插入图片描述

我的效果图

在这里插入图片描述

我敲的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
     
     
				margin: 0px;
				padding: 0px;
			}
			.header a{
     
     
				text-decoration: none;
				color: white;
			}
			
			.header {
     
     
				background-color:firebrick;			
				width: 1000px;
				height: 45px;
			}
			.header a:hover{
     
     
				text-decoration:underline;
				color: black;
			}
			.header p{
     
     
				float: right;
				line-height: 45px;
				padding-right: 20px;
				color: white;
			}
			.header p a {
     
     
				padding-left: 10px;
				padding-right: 10px;
			}
			.header h1{
     
     
				background: url(img/gameLogo.jpg)0px 0px no-repeat;
				height: 45px;
				float: left;
			}
			.header h1 span{
     
     
				display: inline-block;
				color: red;
				width: 120px;	
				background-color: white;
				margin-left: 246px;
				margin-top: 10px;
				text-align: center;
				font-size: 23px;
				line-height: 40px;
				border-radius: 5px 5px 0px 0px ;
			}
			.contanier{
     
     
				width:1000px;
				height: 230px;
				
			}
			.contanier ul {
     
     
				width: 190px;
				height: 230px;
				float:left;
				
			}
			.contanier ul li a{
     
     
				color: #000000;
				text-decoration: none;
				line-height: 27px;
				padding-left: 30px;
			}
			.contanier ul li{
     
     
				display: block;
				padding-top: 1px;
				background: url(img/gameBg1.jpg);
			}
            .contanier ul li a:hover{
     
     
            	text-decoration: underline;
            	color: red;
            }
            .middle{
     
     
            	width: 520px;
            	height: 230px;
            	background: url(img/img-3.jpg);
            	float: left;
            	padding-top: 2px;
            }
            .right{
     
     
            	background-color: gainsboro;
            	height: 230px;
            	
            }
            .right form h1{
     
     
            	color: dimgrey;
            	font-size: 18px;
            	display: block;
            	margin-left: 2em;
            	line-height: 70px;
                height: 50px;
                padding: 0px;
            }
            .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;
            	display: inline-block;
            	color: white;
            	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;
            }
            .right form p:nth-of-type(5) a{
     
     
            	display: block;
            	text-decoration: none;
            	float:left;
            	padding-top: 10px;
            	margin-left: 170px;
            }
            .a{
     
     
            	float: left;
            	padding-left: 20px;
            	padding-top: 20px;
            }
            .right form p a:hover{
     
     
            	text-decoration: underline;
            	color: red;
            }
            .contanier02{
     
     
            	width: 1000px;
            	height: 660px;
            }
            .lll{
     
     
            	width: 723px;
            	height: 660px;
            	/*border: 1px solid red;*/
            	float: left;
            	padding-left: 0px;
            	display: inline-block;
            }
            .rrr{
     
     
            	width:275px;
            	height: 660px;
    /*        	border: 1px solid red;*/
            	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;
            }
            .contanier02 .rrr .xxx li{
     
     
            	height: 30px;
            	line-height: 30px;
            	background: url(img/btn-04.gif)5px 8px no-repeat;
            	padding-left: 45px;
            	border-bottom: 1px dashed gainsboro;
            	font-size: 14px;          	
            }
            .rrr h2{
     
     
            	border: 1px solid #DCDCDC;color:#B2222

最低0.47元/天解锁文章