html仿游戏网站首页面

来源：互联网发布：人防构件计算软件编辑：程序博客网时间：2024/04/30 06:20

从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的元素，真正做到内容行为样式的分离。

0 0