html仿游戏网站首页面

从CSDN上找到的资源，内含psd格式的图片文件，原出处已经找不到，希望作者看到之后觉得影响不好请联系我，我会做及时的处理。

这是第二篇练手的网站，较之第一篇无本质区别，只为熟悉html5+css的使用。该网页没有用到bootstrap，纯css制作。

效果图如下：

html代码：

  

    
 免费注册  设为主页  收藏本站	 	 
  
  

    
   
    

      
 
      
 
    
    
 
    
 
      

        
   
        
   
        
   
        
   
      
      

        

        	

            	
[ 公告 ]
                关于杭州开心棋牌个人中心
                [2009-01-01]
                
                
                
[ 公告 ]
                关于杭州开心棋牌免费抽奖免费送Q币活动
                [2009-01-01]
                
                
                
[ 公告 ]
                关于杭州开心棋牌实卡冲值	
                [2009-01-01]
                
                
                
[ 公告 ]
                杭州开心棋牌打BUG有奖活动
                [2009-01-01]
                
                
                
[ 公告 ]
                杭州开心棋牌网防骗全攻略	
                [2009-01-01]
                
                
            
        
        

        	

            	
[ 已解决 ]
                如何将250px手机密保
                [2009-01-01]
                
                
                
[ 已解决 ]
                如何修改资料
                [2009-01-01]
                
                
                
[ 未解决 ]
                密保卡使用
                [2009-01-01]
                
                
                
[ 未解决 ]
                如何将250px密保卡
                [2009-01-01]
                
                
                
[ 已解决 ]
                关于杭州开心棋牌个人中心
                [2009-01-01]
                
                
                
[ 已解决 ]
                关于修改服务大区的通知
                [2009-01-01]
                
                
                
[ 未解决 ]
                密保卡号找回
                [2009-01-01]
                
                
                
[ 已解决 ]
                关于版主言论开放的通知
                [2009-01-01]
                
                
            
        
          
        
      
      
 
      	

        	

            	
                
                
            
        
        

       		 

            	
                
                
                
                
            
        
        

     	   

            	
                
                
                
                
                
                
            
        
      
    
    

    	
        
        	关于我们
            版权信息
            隐私声明
            加入我们
            联系我们
        
        Copyright 2009-2010 www.kaixin78.net Corporation. All Rights Reserved. 开心棋牌版权所有
        ICP证 京B2-10088888
    
  
  

  	
  

css代码：

@charset "utf-8";
/* CSS Document */
img{
	margin:0;
	padding:0px;
}
#box{
	width:1000px;
	margin:auto;
}
#header{
	width:100%;
	height:115px;
	background:url(Images/bg_top_bg.jpg);
	float:left;
}
#head_right{
	width:200px;
	margin:75px 0 0 770px;
	float:left;
}
#head_right a{
	font-size:12px;
	color:#FFF;
	text-decoration:none;
}
#head_right a:hover{
	font-size:12px;
	color:white;
	text-decoration:underline;
}
#nav{
	width:976px; height:42px;
	float:left;
	margin:0 12px 10px 12px;
	background:url(Images/nav_line_bg.jpg) repeat-x
}
#home{
	margin-left:100px;
}
#mid{
	width:100%;
	height:767px;
	float:left;
	background:url(Images/bg_mid_bg1.jpg) repeat-y;
}
#mid_top_left{
	width:268px;
	height:210px;
	margin-left:12px;
	float:left;
}
#mid_top_left_up{
	width:100%;
	height:105px;
	background:url(Images/mid_left_up.jpg);
	float:left;
}
#mid_top_left_down{
	width:100%;
	height:105px;
	background:url(Images/mid_left_down.jpg);
	float:left;
}
#mid_top_right{
	width:692px;
	height:210px;
	margin-right:12px;
	float:right;
	background:url(Images/mid_top.jpg);
}
#mid_mid{
	width:100%;
	height:408px;
	float:left;
}
#mid_top_line{
	margin-left:8px;
}
#mid_mid_left{
	width:266px;
	height:408px;
	float:left;
	margin:6px 5px 0 12px;
}
#mid_mid_left_04{
	width:266px;
	float:left;
	margin:20px 0 0 0;
}
#mid_mid_mid {
width: 503px;
margin-top: 6px;
float: left;
font-family: "宋体", sans-serif;
font-size: 12px;
margin: 0 auto;
margin-top:7px;
}

#mid_mid_mid_news{
background: url(Images/mid_news.jpg) no-repeat;
width: 403px;
height: 120px;
_height: 130px;
padding-top: 50px;
_padding-top: 40px;
padding-left: 100px;
}
#mid_mid_mid_news_text {
width: 380px;
height: 100px;
float:left;
}
.news{
	width:100%;
	height:20px;
	float:left;
	
}
.span1{
	width:50px;
	height:20px;
	float:left;
	color:#007eff;
}
.span2{
	width:230px;
	height:12px;
	float:left;
	color:#007eff;
	margin-left:10px;
}
.span2 a{
	text-decoration:none;
	color:#007eff;
}
.span2 a:hover{
	text-decoration:underline;
}
.span3{
	width:80px;
	height:14px;
	float:right;
	color:#007eff;
}
.news_img{
	width:320px;
	height:5px;
	float:left;
}
#mid_mid_mid_que{
	width:503px;
	height:216px;
	margin-top:5px;
	background:url(Images/mid_question.jpg);
}
#question{
	width:478px;
	height:171px;
	float:left;
	margin:45px 0 0 25px;
}
.span4{
	width:70px;
	height:20px;
	float:left;
	color:#007eff;
}
.span5{
	width:230px;
	height:12px;
	float:left;
	color:#007eff;
	margin-left:5px;
}
.span5 a{
	text-decoration:none;
	color:#007eff;
}
.span5 a:hover{
	text-decoration:underline;
}
.span6{
	width:80px;
	height:14px;
	float:right;
	color:#007eff;
	margin-right:23px;
}
.question_img{
	width:376px;
	height:5px;
	float:left;
	margin-left:5px;
}
#mid_mid_right{
	width:205px;
	height:405px;
	float:left;
}
#mid_right_1{
	width:205px;
	height:123px;
	float:left;
	background:url(Images/right_01.jpg) no-repeat;
}
#mid_right_2{
	width:205px;
	height:135px;
	float:left;
	background:url(Images/right_03.jpg) no-repeat;
}
#mid_right_3{
	width:205px;
	height:145px;
	float:left;
	background:url(Images/right_02.jpg) no-repeat;
}
.game1{
	width:173px;
	height:54px;
	float:left;
	margin:50px 0 0 20px;
}
.game1 img{
	float:left;
	margin-left:2px;
	margin-top:1px;
	
}
#mid_bottom{
	width:976px;
	height:90px;
	margin-left:12px;
	margin-top:5px;

	float:left;
}
#bottom_span1{
	width:400px;
	height:20px;
	display:block;
	float:left;
	font-size:14px;
	font-weight:bold;
	margin-left:320px;
	margin-top:10px;
}
#bottom_span1 a{
	text-decoration:none;
	color:#007eff;
}
#bottom_span1 a:hover{
	text-decoration:underline;
}
#bottom_span2{
	width:600px;
	height:20px;
	display:block;
	float:left;
	font-size:13px;
	color:#6C6C6C;
	margin-left:180px;
}
#bottom_span3{
	width:400px;
	height:20px;
	display:block;
	float:left;
	color:#999;
	font-size:14px;
	margin-left:380px;
}
#footer{
	width:1000px;
	height:27px;
	float:left;
	background:url(Images/bg_bottom_bg.jpg);
}

	
	
	

文件夹我就不上传了，感兴趣的同学可以自己做着试试。

总结：

1、这三天写了两个页面，有看书照着写的，也有自己看psd文件，自己切图写的，怎么说呢，就是写完之后感觉很有成就感，书本上的东西都开始理解了，比自己看视频啊看书啊都快很多，所以做前台要多练。

2、注意命名格式的规范，w3c推荐使用div，id多了以后命名要有意义才不会出现匹配错误的情况。

3、接下来打算用bootstrap再写一静态网站，就算复习完html+css的内容了，然后开始复习javascript的一些语法，试着往自己的网站里加入一些javascript的元素，真正做到内容行为样式的分离。