从CSDN上找到的资源，内含psd格式的图片文件，原出处已经找不到，希望作者看到之后觉得影响不好请联系我，我会做及时的处理。
这是第二篇练手的网站，较之第一篇无本质区别，只为熟悉html5+css的使用。该网页没有用到bootstrap，纯css制作。
效果图如下：
html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>游戏网站首页</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="box">
<div id="header">
<div id="head_right"> <a href="#">免费注册</a> <a href="#">设为主页</a> <a href="#">收藏本站</a> </div>
</div>
<div id="mid">
<div id="nav"> <a href="#" title="首页" id="home" runat="server"> <img src="Images/nav/nav_01.JPG" border="0" /></a><img src="Images/nav_line.jpg" border="0" /><a href="#" title="充值中心"><img src="Images/nav/nav_022.JPG" border="0" onmouseover="this.src='Images/nav/nav_02.JPG'" onmouseout="this.src='Images/nav/nav_022.JPG'"/></a><img src="Images/nav_line.jpg" border="0" /><a href="#" title="新闻公告"><img src="Images/nav/nav_033.JPG" border="0" onmouseover="this.src='Images/nav/nav_03.JPG'" onmouseout="this.src='Images/nav/nav_033.JPG'"/></a><img src="Images/nav_line.jpg" border="0" /><a href="#" title="游戏下载"><img src="Images/nav/nav_044.JPG" border="0" onmouseover="this.src='Images/nav/nav_04.JPG'" onmouseout="this.src='Images/nav/nav_044.JPG'"/></a><img src="Images/nav_line.jpg" border="0" /><a href="#" title="游戏排行"><img src="Images/nav/nav_055.JPG" border="0" onmouseover="this.src='Images/nav/nav_05.JPG'" onmouseout="this.src='Images/nav/nav_055.JPG'"/></a><img src="Images/nav_line.jpg" border="0" /><a href="#" title="新手帮助"><img src="Images/nav/nav_066.JPG" border="0" onmouseover="this.src='Images/nav/nav_06.JPG'" onmouseout="this.src='Images/nav/nav_066.JPG'"/></a> </div>
<div id="mid_top_left">
<div id="mid_top_left_up"> </div>
<div id="mid_top_left_down"> </div>
</div>
<div id="mid_top_right"> </div>
<div id="mid_mid"> <img id="mid_top_line" src="Images/line.jpg"/>
<div id="mid_mid_left">
<div id="mid_mid_left_01"> <a href="#"> <img src="Images/left_c_01.jpg" border="0"></a> </div>
<div id="mid_mid_left_02"> <a href="#"> <img src="Images/left_c_02.jpg" border="0"></a> </div>
<div id="mid_mid_left_03"> <a href="#"> <img src="Images/left_c_03.jpg" border="0"></a> </div>
<div id="mid_mid_left_04"> <a href="#"> <img src="Images/left_kf.jpg" border="0"></a> </div>
</div>
<div id="mid_mid_mid">
<div id="mid_mid_mid_news">
<div id="mid_mid_mid_news_text">
<div class="news"><span class="span1">[ 公告 ]</span>
<span class="span2"><a href="#">关于杭州开心棋牌个人中心</a></span>
<span class="span3">[2009-01-01]</span>
<img class="news_img" src="Images/news_line.jpg" width="320px" height="5px">
</div>
<div class="news"><span class="span1">[ 公告 ]</span>
<span class="span2"><a href="#">关于杭州开心棋牌免费抽奖免费送Q币活动</a></span>
<span class="span3">[2009-01-01]</span>
<img class="news_img" src="Images/news_line.jpg" width="320px" height="5px">
</div>
<div class="news"><span class="span1">[ 公告 ]</span>
<span class="span2"><a href="#">关于杭州开心棋牌实卡冲值</a></span>
<span class="span3">[2009-01-01]</span>
<img class="news_img" src="Images/news_line.jpg" width="320px" height="5px">
</div>
<div class="news"><span class="span1">[ 公告 ]</span>
<span class="span2"><a href="#">杭州开心棋牌打BUG有奖活动</a></span>
<span class="span3">[2009-01-01]</span>
<img class="news_img" src="Images/news_line.jpg" width="320px" height="5px">
</div>
<div class="news"><span class="span1">[ 公告 ]</span>
<span class="span2"><a href="#">杭州开心棋牌网防骗全攻略</a></span>
<span class="span3">[2009-01-01]</span>
<img class="news_img" src="Images/news_line.jpg" width="320px" height="5px">
</div>
</div>
</div>
<div id="mid_mid_mid_que">
<div id="question">
<div class="news"><span class="span4">[ 已解决 ]</span>
<span class="span5"><a href="#">如何将250px手机密保</a></span>
<span class="span6">[2009-01-01]</span>
<img class="question_img" src="Images/question_line.jpg" width="376px" height="5px">
</div>
<div class="news"><span class="span4">[ 已解决 ]</span>
<span class="span5"><a href="#">如何修改资料</a></span>
<span class="span6">[2009-01-01]</span>
<img class="question_img" src="Images/question_line.jpg" width="376px" height="5px">
</div>
<div class="news"><span class="span4">[ 未解决 ]</span>
<span class="span5"><a href="#">密保卡使用</a></span>
<span class="span6">[2009-01-01]</span>
<img class="question_img" src="Images/question_line.jpg" width="376px" height="5px">
</div>
<div class="news"><span class="span4">[ 未解决 ]</span>
<span class="span5"><a href="#">如何将250px密保卡</a></span>
<span class="span6">[2009-01-01]</span>
<img class="question_img" src="Images/question_line.jpg" width="376px" height="5px">
</div>
<div class="news"><span class="span4">[ 已解决 ]</span>
<span class="span5"><a href="#">关于杭州开心棋牌个人中心</a></span>
<span class="span6">[2009-01-01]</span>
<img class="question_img" src="Images/question_line.jpg" width="376px" height="5px">
</div>
<div class="news"><span class="span4">[ 已解决 ]</span>
<span class="span5"><a href="#">关于修改服务大区的通知</a></span>
<span class="span6">[2009-01-01]</span>
<img class="question_img" src="Images/question_line.jpg" width="376px" height="5px">
</div>
<div class="news"><span class="span4">[ 未解决 ]</span>
<span class="span5"><a href="#">密保卡号找回</a></span>
<span class="span6">[2009-01-01]</span>
<img class="question_img" src="Images/question_line.jpg" width="376px" height="5px">
</div>
<div class="news"><span class="span4">[ 已解决 ]</span>
<span class="span5"><a href="#">关于版主言论开放的通知</a></span>
<span class="span6">[2009-01-01]</span>
<img class="question_img" src="Images/question_line.jpg" width="376px" height="5px">
</div>
</div>
</div>
</div>
<div id="mid_mid_right">
<div id="mid_right_1">
<div class="game1">
<a href="#"><img src="Images/right_01_01.jpg"></a>
<a href="#"><img src="Images/right_01_03.jpg"></a>
<a href="#"><img src="Images/right_01_02.jpg"></a>
</div>
</div>
<div id="mid_right_2">
<div class="game1">
<a href="#"><img src="Images/right_03_01.jpg"></a>
<a href="#"><img src="Images/right_03_03.jpg"></a>
<a href="#"><img src="Images/right_03_02.jpg"></a>
<a href="#"><img src="Images/right_03_04.jpg"></a>
<a href="#"><img src="Images/right_03_05.jpg"></a>
</div>
</div>
<div id="mid_right_3">
<div class="game1">
<a href="#"><img src="Images/right_02_01.jpg"></a>
<a href="#"><img src="Images/right_02_03.jpg"></a>
<a href="#"><img src="Images/right_02_02.jpg"></a>
<a href="#"><img src="Images/right_02_04.jpg"></a>
<a href="#"><img src="Images/right_02_05.jpg"></a>
</div>
</div>
</div>
</div>
<div id="mid_bottom">
<img src="Images/bottom_line.jpg" width="976" height="12"px>
<span id="bottom_span1">
<a href="#">关于我们</a>
<a href="#">版权信息</a>
<a href="#">隐私声明</a>
<a href="#">加入我们</a>
<a href="#">联系我们</a>
</span>
<span id="bottom_span2">Copyright 2009-2010 www.kaixin78.net Corporation. All Rights Reserved. 开心棋牌版权所有</span>
<span id="bottom_span3">ICP证 京B2-10088888</span>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
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的元素，真正做到内容行为样式的分离。