html仿游戏网站首页面

最新推荐文章于 2022-07-10 17:59:37 发布
最新推荐文章于 2022-07-10 17:59:37 发布
阅读量3.6k 收藏 49
点赞数 4
文章标签： css dreamweaver html5 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Irving_zhang/article/details/42174867
版权

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

北邮张博
关注
  • 4
    点赞
  • 踩
  • 49
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
一个静态html页面（游戏类官网主页）
01-26
html静态页面，游戏类官网页面，用bootstrap布局，html静态页面
制作一个简单HTML游戏网页（HTML+CSS）仿龙之谷网络游戏官网
网页设计与制作 | HTML+CSS+JS
12-31 621
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保
js html游戏仿写,天猫首页天猫超市下的选项卡(加自动轮播效果)仿写（js加jquery实现动态效果）...
weixin_35943736的博客
06-03 157
*{margin:0;padding:0;}body{font-family: "微软雅黑";font-size:16px;}ul,ol,li{list-style:none;}b,strong{font-weight:normal;}em,i{font-style:normal;}a,u{text-decoration: none;}h1,h2,h3,h4,h5,h6{font-weight: ...
首页.html,首页.html
weixin_29485887的博客
06-17 135
首页$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPath =...
【HTML期末作业】个人游戏主页--html作业
coding加油站
07-10 658
html5期末作业，html作业，js，javascript作业，个人游戏，游戏主页
网页大作业仿《原神》官网 HTML+CSS
04-23
这是一款国产游戏《原神》的介绍网站主要由“首页，宣传视频，照片墙，角色情报，玩家评论，pc端下载，关于，登录/注册”。首页用了弹性盒子，浮动布局，弹性布局并且超链接去除下划线等技术；宣传视频页面运用了...
790个易模块打包下载-2
01-24
取拼音首个字母.ec 取声调拼音模块1.0.ec 取十进制.ec 取图片尺寸.ec 取文件版本信息.ec 取系统目录.ec 取系统启动时间.ec 取系统信息.ec 取系统字体列表1.2.ec 取用户机器码模块.ec 取注册表键句柄.ec ...
790个易模块-3
01-24
取拼音首个字母.ec 取声调拼音模块1.0.ec 取十进制.ec 取图片尺寸.ec 取文件版本信息.ec 取系统目录.ec 取系统启动时间.ec 取系统信息.ec 取系统字体列表1.2.ec 取用户机器码模块.ec 取注册表键句柄.ec ...
790个易模块打包
01-24
取拼音首个字母.ec 取声调拼音模块1.0.ec 取十进制.ec 取图片尺寸.ec 取文件版本信息.ec 取系统目录.ec 取系统启动时间.ec 取系统信息.ec 取系统字体列表1.2.ec 取用户机器码模块.ec 取注册表键句柄.ec ...
ThinkSNS扩展插件之插件生成器.zip
07-14
大家想切换高亮样式可以改源码的theme变量，将插件仿discuz安装程序页面做成了向导式，减少了preview的次数，只有动态生成下拉菜单时和到第四步时才ajax请求生成预览代码，改变了表单验证的错误返回方式可以体现多个...
html5+css3实现html5游戏页面
05-28
html5+css3实现html5游戏页面这个作品来源：http://www.jq-school.com/Detail.aspx?id=487
游戏网站首页的制作
10-24
利用基础技术html、css、jQuery等制作了一个游戏网站首页。可以在此基础上进行扩展。 适合新手学习使用
HTML/CSS/JS仿英雄联盟网站.zip
12-21
有十一个游戏相关的网页，主页使用了js实现了轮播图效果和视频弹出播放的效果，登录部分使用js来验证用户和密码是否匹配（具体信息见js），其余部分的网页大部分都是网页布局的使用，对图片和文字的排版，大部分为网页外观的展示。
仿新版百度首页html模板
08-22
高仿新版百度首页html模板 DIV+CSS的 详细不多说，自己下来看就知道
HTML+CSS+JS+JQ实现LOL官网界面
08-19
HTML+CSS+JS+JQ实现LOL官网界面,大部分都实现了，比较逼真,课余时间做的，课余时间做的
html 游戏首页,30个让人玩上瘾的HTML5游戏
weixin_36457551的博客
05-30 914
30个让人玩上瘾的HTML5游戏10月 17, 2013评论 (4)SponsorHTML5代替FLASH已经很强大了，没想到还可以做HTML5游戏，这样我们不用下载游戏客户端都能玩游戏了……目前国外很多网站都使用HTML5来构建，曾经使用FLASH的网站现在也转换成HTML5网页，使用HTML5是有很大优势的，用户可以通过HTML5来构建应用程序，包括手机APP应用、网页设计、游戏图形加速、高清...
DIV布局大作业：仿悦世界游戏网站设计——仿悦世界游戏官网(6页) HTML+CSS+JavaScript web网页设计实例作业
01-04 726
HTML5期末大作业：仿悦世界游戏网站设计——仿悦世界游戏官网(6页) HTML+CSS+JavaScript web网页设计实例作业 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下
游戏官网作业html,html游戏
weixin_34829543的博客
05-30 272
3 月，跳不动了？>>>开发工具：Visual Studio Code游戏介绍：已知3个一组的方块，前面2个方块涂有相近的两种颜色，你根据这两种颜色序列的递减情况，猜测第三个方块的颜色是什么，并从下面的方块中选择你认为最接近的颜色。程序设计步骤：1.编写html代码2.编写js代码html代码编写设置css文件import url('https://fonts.googleapi...
html大作业网页代码——神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发
qq_524614081的博客
04-19 677
HTML5期末大作业：游戏官网网站设计——神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
html仿网易云网站文件分享
最新发布
12-21
网易云音乐是一个非常受欢迎的音乐分享和播放平台，在这个平台上用户可以免费分享和上传自己喜欢的音乐文件。仿照网易云网站的文件分享页面，可以使用HTML语言来实现一个简单的文件分享页面。首先，可以使用HTML来创建一个包含文件分享链接的页面，可以设置一个文件分享的标题，然后在页面中添加一个表格，用来显示文件的相关信息，比如文件名、大小、上传者等。接着，可以使用HTML的超链接标签来实现文件的下载功能，将文件名作为链接的文字内容，点击链接即可实现文件的下载。另外，还可以在页面中添加一些样式和布局的设计，让页面看起来更加美观和易于使用。在文件分享页面上还可以添加一些交互元素和动态效果，比如上传文件的进度条、文件下载的统计信息等。最后，可以通过HTML的表单元素来实现文件上传的功能，让用户可以方便地上传自己的文件分享给其他用户。总之，通过使用HTML语言，可以实现一个仿网易云网站的文件分享页面，让用户可以方便地分享和下载自己喜欢的音乐文件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值