纯手工html+css实现静态游戏网首页（免费拿源码）

最新推荐文章于 2022-10-26 23:08:25 发布
最新推荐文章于 2022-10-26 23:08:25 发布
阅读量6.8k 收藏 22
点赞数 7
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60187384/article/details/122148725
版权

效果图：

         

        主要通过浮动、定位对网页进行布局，实现鼠标悬浮图片的偏移、字体的缩放、背景颜色改变、以及动画效果等相关功能。

html部分代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./开心网.css" type="text/css"/>
</head>
<body>
<div>
    <div class="zong">
        
        <div class="header">
           <ul>
               <li>首页</li>
               <div class="right">
               <li>注册<span> |</span></li>
               <li>登录<span> |</span></li>
               <li>帮助<span> |</span></li>
               <li>更多</li>
                </div>
           </ul>
        </div>

           
        <div class="section1">
            <div class="left">
                <ul>
                    <li><img src="./kaixinwangtupian/sub-2.gif" alt=""><span>征战四方</span></li>
                    <li><img src="./kaixinwangtupian/sub-3.gif" alt=""><span>龙将</span></li>
                    <li><img src="./kaixinwangtupian/sub-4.gif" alt=""><span>弹弹堂</span></li>
                    <li><img src="./kaixinwangtupian/sub-5.gif" alt=""><span>凡人修真2</span></li>
                    <li><img src="./kaixinwangtupian/sub-6.gif" alt=""><span>一骑当先</span></li>
                    <li><img src="./kaixinwangtupian/sub-7.gif" alt=""><span>宫廷计</span></li>
                    <li><img src="./kaixinwangtupian/sub-8.gif" alt=""><span>神仙道</span></li>
                </ul>
            </div>

            <div class="center">
                <img src="./kaixinwangtupian/xdtgg_frxz2_44.jpg" alt="">
            </div>

            <div class="right">
               <form action="" method="get">
                   <h2>开心网用户登录</h2>
                   <table>
                       <tr>
                           <td>账号：</td>
                           <td><input type="text" placeholder="字母、数字的六位字符"></td>
                       </tr>
                       <tr class="only">
                           <td>密码：</td>
                           <td><input type="text" placeholder="四位数字"></td>
                       </tr>
                    </table>
                </form>
                <span><a href="">立即注册</a></span>
                <span><a href="">忘记密码</a></span>
            </div>
        </div>


        <div class="section2">
            <div class="left">
                <div class="top">
                    <span>全部游戏</span>
                    <span>战争策略|</span>
                    <span>体育经营|</span>
                    <span>社交游戏</span>
                </div>

                <div class="left1">
                    <div><img src="./kaixinwangtupian/img-4.jpg" alt="">
                        <p>三国题材横版RPG网游，丰富的</p> 
                        <p> 武将系统</p>
                        <p>类型：角色扮演</p>
                        <p>游戏人气： <span>470921</span> </p>
                    <a href="">选服</a>
                    <a href="">进入游戏</a>
                    </div>
                </div>
 
                <div class="right">
                    <div><img src="./kaixinwangtupian/img-5.jpg" alt="">
                        <p>一款不建主城不等CD，不占资</p> 
                        <p> 源，全程战斗</p>
                        <p>类型：战征策略</p>
                        <p>游戏人气： <span>8745221</span> </p>
                    <a href="">选服</a>
                    <a href="">进入游戏</a>
                    </div>
                </div>
            </div>

            <div class="right">
                <div class="title">新闻公告</div>
                <div class="bottom">
                    <ul>
                        <li>[征战四方] 开心首服·黄巾之乱</li>
                        <li>[龙将] 火爆8服·八门金</li>
                        <li>[弹弹堂] 41服开启·万人竞技</li>
                        <li>[凡人修真2] 03月08日·四海帝王</li>
                        <li>[一骑当先] 开心2服上线送黄金</li>
                        <li>[宫廷计] 03月06日·西施秘史</li>
                        <li>[凡人修真2] 03月08日·四海帝王</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="bottom">
            <div class="left">
                <h4>角色扮演</h4>
                <ul>
                    <li> <img src="./kaixinwangtupian/img-6.jpg" alt=""> 
                    <p>游戏人气：1765314</p> <p>游戏状态：<span>22区开启</span> </p>
                    <a href="">选服</a><a href="">进入游戏</a> </li>
                    <li><img src="./kaixinwangtupian/img-7.jpg" alt=""> 
                        <p>游戏人气：1245814</p> <p>游戏状态：<span>23区开启</span> </p>
                        <a href="">选服</a><a href="">进入游戏</a> </li>
                    <li><img src="./kaixinwangtupian/img-8.jpg" alt=""> 
                        <p>游戏人气：1232158</p> <p>游戏状态：<span>25区开启</span> </p>
                        <a href="">选服</a><a href="">进入游戏</a> </li>
                    <li><img src="./kaixinwangtupian/img-9.jpg" alt=""> 
                        <p>游戏人气：123745</p> <p>游戏状态：<span>18区开启</span> </p>
                        <a href="">选服</a><a href="">进入游戏</a></li>

                    <li><img src="./kaixinwangtupian/img-10.jpg" alt=""> 
                        <p>游戏人气：178501</p> <p>游戏状态：<span>火爆开启</span> </p>
                        <a href="">选服</a><a href="">进入游戏</a></li>
                    <li><img src="./kaixinwangtupian/img-11.jpg" alt=""> 
                        <p>游戏人气：983014</p> <p>游戏状态：<span>2服开启</span> </p>
                        <a href="">选服</a><a href="">进入游戏</a></li>
                    <li><img src="./kaixinwangtupian/img-12.jpg" alt=""> 
                        <p>游戏人气：745214</p> <p>游戏状态：<span>4服开启</span> </p>
                        <a href="">选服</a><a href="">进入游戏</a></li>
                    <li><img src="./kaixinwangtupian/img-13.jpg" alt=""> 
                        <p>游戏人气：654814</p> <p>游戏状态：<span>火爆开启</span> </p>
                        <a href="">选服</a><a href="">进入游戏</a></li>
                </ul>
            </div>
            <div class="right">
                <div class="top"><img src="./kaixinwangtupian/ad1.jpg" alt=""><br>
                    <img src="./kaixinwangtupian/ad2.jpg" alt=""></div>
                <div class="bottom">
                    <h4>游戏视频</h4>
                    <div class="first"><img src="./kaixinwangtupian/img-1.jpg" alt=""><p>《航海之王》麻辣<br>炫酷反穿越，英雄<br> 时尚大变身！</p></div>
                    <div class="second"><img src="./kaixinwangtupian/img-2.jpg" alt=""><p>《弹弹堂》吴克群<br>同名激情主题MV，<br>体验修真乐趣</p></div>
                </div>
            </div>

        </div>
    </div>
    <div class="over"><img src="./kaixinwangtupian/ad3.jpg" alt=""></div>
</div>

    
</body>
</html>

html/css以及图片地址：

链接：https://pan.baidu.com/s/1M8qS_-4U6zIpOoH_ZQc9PA 
提取码：xhhy

小嘴鱼
关注
利用 HTML + CSS 肝了个游戏网站！
李南江
06-11 2125
最近有几个读者私信我说，期末有个大作业要实现一个静态网站，肝了几千行代码，手把手带你实现一个游戏静态网站。 先上两张效果图 这个网站适合初学者练手 技术点： html + css 难度系数：无 HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>《风暴英雄》官方网站_暴雪出品 明星汇聚 MOBA竞技新篇章</.
制作一个简单HTML游戏网页（HTML+CSS）米哈游 1页 带轮播图
11-30 1317
学生dreamweaver网页设计作业成品 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
一个静态html页面（游戏类官网主页）
01-26
html静态页面，游戏类官网页面，用bootstrap布局，html静态页面
学生HTML游戏网页作业作品——HTML+CSS+JavaScript魔域私服游戏HTML(1个页面)
qq3200628753的博客
08-10 200
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保......
html大作业网页代码——神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发
qq_524614081的博客
04-19 732
HTML5期末大作业：游戏官网网站设计——神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
简单的动漫网页成品 HTML+CSS静态网页作业 DW动漫网页设计与制作素材成品代做 海贼王主题网页设计制作6个页面
VX_WJ88950106的博客
08-05 4037
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 ：黑色通用的IT程序员资讯交流个人博客网站模板。喜欢的可以下载，文章页支持手机PC响应式布局。主要有： 等总共6个页面html下载。：此作品为学生个人主页网页设计题材，代码为简单学生
HTML静态网页作业——海贼王主题网页设计制作6个页面(HTML+CSS)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-06 5万+
HTML静态网页作业——海贼王主题网页设计制作6个页面(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：黑色通用的IT程序员资讯交流个人博客网站模板。喜欢的可以下载，文章页支
html+css+js基础问答
qq_43751465的博客
08-26 5231
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
HTML网页设计结课大作业~仿凡客服装商城主页纯HTML模板源码(HTML+CSS+JS)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-02 2727
HTML网页设计结课作业~服装商城主页纯HTML模板源码(HTML+CSS+JS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~ 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，~这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 一款红色的凡客诚品官网，凡客服装商城主页，时尚休闲服装店铺商城首页模板html。 此
HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-21 1万+
❉ HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了，来制作属于我们程序员的浪漫吧！ ❉ 文章目录 ❉ HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)❉ 效果演示❉ 代码文件目录一、文字修改(代码实现)
网页游戏网站源码主页
06-29
网页游戏 网站源码 网站源码主页
游戏主页代码
11-24
游戏主页的代码 主要是关于Ｕ３Ｄ的ＧＵＩ高级控件的使用。 如“GUI.Button(new Rect(width / 2 - 50, 300, 100, 30), "开始"）”就是 运用Ｂｕｔｔｏｎ控件设置开始按钮
（10）HTML-CSS网页小游戏文件资源
08-31
HTML-CSS网页小游戏文件资源
HTML5网站设计模板(静态)
09-26
简单易懂html、css、js网页。个人主页模板 。适合初学者学习的一个自己写的html页面，帮助大家了解html标签，帮助初学者学习CSS样式布局
大二学生web期末大作业 在线电影网站 HTML+CSS+JS
热门推荐
HTML网页设计 专注大学生网页设计
09-18 6万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
【HTML期末作业】个人游戏主页--html作业
coding加油站
07-10 716
html5期末作业，html作业，js，javascript作业，个人游戏，游戏主页
web前端 html+css+javascript游戏网页设计实例 (网页制作课作业)
STU网页设计
10-26 1530
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
html仿游戏网站首页面
Irving_zhang的专栏
12-26 3678
从CSDN上找到的资源，内含psd格式的图片文件，原出处已经找不到，希望作者看到之后觉得影响不好请联系我，我会做及时的处理。 这是第二篇练手的网站，较之第一篇无本质区别，只为熟悉html5+css的使用。该网页没有用到bootstrap，纯css制作。 效果图如下： html代码： 游戏网站首页 免费注册  设为主页
游戏主页官网css+js全自适应源码
模板下载
04-18 563
介绍： 游戏主页官网css+js全自适应 游戏官网源码，采用html+css+js 编制完成，自行使用修改  请勿使用记事本修改源码，不然会出现中文乱码现象！ 网盘下载地址： http://kekewangLuo.net/RuPY7mcwGAK 图片： ...
使用html+css实现一个静态页面(含源码)三个网页
最新发布
01-06
实现静态页面需要使用HTML和CSS语言。我们可以创建三个不同的网页来展示这种技能。 首先，我们可以创建一个简单的个人主页。在HTML中，我们可以使用`<div>`标签和`<h1>`标签来创建页面的标题和内容区块。然后，利用...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小嘴鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值