从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" οnmοuseοver="this.src='Images/nav/nav_02.JPG'" οnmοuseοut="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" οnmοuseοver="this.src='Images/nav/nav_03.JPG'" οnmοuseοut="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" οnmοuseοver="this.src='Images/nav/nav_04.JPG'" οnmοuseοut="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" οnmοuseοver="this.src='Images/nav/nav_05.JPG'" οnmοuseοut="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" οnmοuseοver="this.src='Images/nav/nav_06.JPG'" οnmοuseοut="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的元素,真正做到内容行为样式的分离。