html仿游戏网站首页面

news/2024/5/10 11:37:33/文章来源: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的元素,真正做到内容行为样式的分离。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_740898.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

bootstrap仿婚纱摄影网站首页

效果图如下&#xff1a; 代码如下&#xff1a; html&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"utf-8"> <meta name"description" content"凤凰社是一个分享感动的地方">…

关于大型网站技术演进的思考(十三)--网站静态化处理—CSI(5)

讲完了SSI&#xff0c;ESI&#xff0c;下面就要讲讲CSI了 &#xff0c;CSI是浏览器端的动静整合方案&#xff0c;当我文章发表后有朋友就问我&#xff0c;CSI技术是不是就是通过ajax来加载数据啊&#xff0c;我当时的回答只是说你的理解有点片面&#xff0c;那么到底什么是CSI技…

360极速浏览器打不开国内网站的一种解决方法

360极速浏览器打不开国内网站的一种解决方法一、问题描述二、解决办法一、问题描述 点击东北大学官方网站&#xff0c;显示您访问的网页出错了。 二、解决办法 点击右上角的三横线的图标——代理服务器——不使用代理服务器——重新打开浏览器。

小程序-下载bing网站壁纸并设为桌面

目的&#xff1a;下载cn.bing.com或http://www.bing.com/的背景图片&#xff0c;并将其设为壁纸 思路&#xff1a;根据用户输入的地址&#xff0c;首先下载对应网址的页面并解析其中的图片地址。接着下载图片&#xff0c;调用系统api将其设为壁纸。其中的下载都使用socket来实现…

LNMP网站架构方案分析

2019独角兽企业重金招聘Python工程师标准>>> LNMP&#xff08;Linux-Nginx-MySQL-PHP&#xff09;网站架构是目前国际流行的Web框架&#xff0c;该框架包括&#xff1a;Linux操作系统&#xff0c;Nginx网络服务器&#xff0c;MySQL数据库&#xff0c;PHP编程语言&am…

php网站留言,php实现网站留言板功能

php实现网站留言板功能发布于 2016-01-14 09:57:49 | 1045 次阅读 | 评论: 10 | 来源: 网友投递PHP开源脚本语言PHP(外文名: Hypertext Preprocessor&#xff0c;中文名&#xff1a;“超文本预处理器”)是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点&#xff0c;…

拍卖网站开发新风潮?阿里的拍卖平台正在这么做

如今&#xff0c;线上拍卖成为新的风潮、司法拍卖火爆&#xff0c;网络拍卖将成为下一个电商市场&#xff0c;拍卖网站开发新风潮。 学霸的高分笔记值多少钱?1897年的可口可乐运货单你感兴趣吗?井柏然写的三行情书怎么卖?一个大学生把他的脑门当作广告位&#xff0c;你会出价…

html链接防抓取了,为防止别人轻易抓取自己网站页面,对自己网站JS进行16进制加密...

网站开发人员开发好网页在网上发布后&#xff0c;经常遇到自己辛苦开发好的静态页面被别人轻易的copy去。这时候就需要我们对网站采取一些加密措施&#xff0c;其中有一个方式&#xff1a;加密js文件&#xff01;对静态页面(html)加载的js引用文件进行加密&#xff0c;一般加密…

40水平滚动网站推荐-视差背景效果的运用(下篇)

使用视差滚动效果做网站的第一个感觉是设计网站的这个工程师水平不一般&#xff0c;做出来的网站是那么的大气&#xff0c;吸引人&#xff0c;每次我遇到这样的网站我都会从头到尾挨个点击一遍&#xff0c;他们的每个功能&#xff0c;每个细节都是那么的完美&#xff0c;往往我…

uniapp中qrcode生成二维码后传的参数不见了_【网站】你们要的二维码生成工具!...

南郡丨二维码工具将文章内容、网址链接、图片、文件等生成二维码以方便用户直接扫码查阅&#xff0c;也是我们必须掌握的技能&#xff0c;关于二维码生成工具&#xff0c;大家可以试试下面这几款工具。草料二维码丨https://cli.im/草料是大家最为熟知的二维码生成器&#xff0c…

mongoose 批量修改字段_WP菜鸟建站28:wordpress网站改域名后,批量修改图片地址...

一般情况下&#xff0c;对于一个wordpress网站的站长来说&#xff0c;不会轻易地更换自己网站的域名。因为&#xff0c;域名就相当于一个wordpress网站的身份证号&#xff0c;用户可以通过这个域名&#xff0c;就可以对号入座地找到你的网站。再一个原因&#xff0c;如果更换域…

网站优化怎样的外链能轻松收录,网站外链优化攻略

有些事情&#xff0c;让你感到很无奈&#xff0c;网站外链优化也是如此&#xff0c;往往那些很容易发布网站外链的地方&#xff0c;价值不大&#xff0c;而不容易发布外链的地方&#xff0c;一旦发布上去了&#xff0c;效果胜过几十条甚至更多的外链&#xff0c;而且可以轻松让…

Java生成sitemap网站地图

访问我的博客 sitemap 是什么&#xff1f;对应没有接触过网站 SEO 的同学可能不知道&#xff0c;这里引用一下百度站长的一段解释。 Sitemap&#xff08;即站点地图&#xff09;就是您网站上各网页的列表。创建并提交Sitemap有助于百度发现并了解您网站上的所有网页。您还可以使…

解决ASP.NET网站发布问题

目录 前言 开始 aspx.cs文件放到单独的类库项目 一个可选择勾选页面的发布工具&#xff1a;LimusicAddin 前言 Asp.net 发布分为&#xff1a;动态编译和预编译。预编译又分为&#xff1a;In Place Pre-compilation 和 Pre-compilation for Deployment。关于asp.net编译&#xf…

弊端重重的传统影楼,优兔家摄影网站赋予新生机

关键词&#xff1a;网站建设&#xff0c;H5响应式网站&#xff0c;摄影网站建设 关于优兔家 U2&#xff08;优兔家&#xff09;新派视觉摄影&#xff0c;由资深广告创意人主理&#xff0c;是一个善于挖掘个人美态的摄影团体&#xff0c;为用户提供状容造型、专业摄影、后期润饰…

html amp css自学网站,HTMLamp;CSS——网站注册页面,

HTML&CSS——网站注册页面&#xff0c;1、表单标签所有需要提交到服务器端的表单项必须使用括起来&#xff01;form 标签属性&#xff1a; action,整个表单提交的位置(可以是一个页面&#xff0c;也可以是一个后台 java 代码)method,表单提交的方式(get/post/delete……等…

HTTrack - 克隆任意网站

HTTrack可以克隆指定网站&#xff0d;把整个网站下载到本地。 可以用在离线浏览上&#xff0c;也可以用来收集信息&#xff08;甚至有网站使用隐藏的密码文件&#xff09;。 一些仿真度极高的伪网站&#xff08;为了骗取用户密码&#xff09;&#xff0c;也是使用类似工具做的。…

第13节 IIS之WEB服务器—用于发布网站

IIS之WEB网站发布服务器0 引言1 WEB服务器相关概念2 部署WEB服务器—以win2003为例2.1 安装WEB服务器软件2.2 发布静态网站2.3 发布动态网站3 一台服务器发布多个web网站—以win2003为例3.1 方法1&#xff1a;增加多个IP地址3.2 方法2&#xff1a;设置不同端口号3.3 方法3&…

iframe嵌入其他网站,如何自适应高度

终于有一周时间&#xff0c;工作不那么忙了&#xff0c;腾出手来总结下工作过程中学到的知识。 每天遇到新问题&#xff0c;解决新问题&#xff0c;但是却很少有时间去仔细研究下&#xff0c;或者总结下。攒的多了&#xff0c;就得从头捋一遍。 说下iframe自适应高度&#xff1…

【Linux系统】第13节 CentOS系统中采用Apache发布网站以及访问控制配置详解

目录1 CentOS系统中Apache的安装1.1 安装前检查1.2 配置IP地址1.3 安装及检查2 主页建立与编辑3 Apache主配置文件分析4 访问控制设定4.1 客户机地址限制4.1.1 客户机地址限制原理4.1.2 客户机地址限制示例14.1.3 客户机地址限制示例24.2 用户授权限制5 归纳参考文章1 CentOS系…