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

最新推荐文章于 2023-12-17 10:40:48 发布
最新推荐文章于 2023-12-17 10:40:48 发布
阅读量6.7k 收藏 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

小嘴鱼
关注
  • 7
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
HTML5网站设计模板(静态)
09-26
简单易懂html、css、js网页。个人主页模板 。适合初学者学习的一个自己写的html页面，帮助大家了解html标签，帮助初学者学习CSS样式布局
分享24个网页游戏源代码，总有一个是你想要的
zdh13370188237的博客
02-03 1万+
网页
HTML+css制作简单游戏界面
qq_53541336的博客
08-31 3156
开学在即闲来无事在家做了一个简单的游戏开始界面，下面看看具体代码吧，其实非常的简单这里只用HTML和css做的静态页面。
使用html简单仿写一个静态的绝地求生官网首页
yunanxxx的博客
02-23 832
引入动图的标签就不能用img了，要使用,并且设置了：自动播放，静音播放，循环播放，即：autoplay， muted ，loop。5.首先我们先编辑官网的导航栏部分 ，写在header标签里的nav自命名标签中。将你下载好的图片，拖入上面建好的image文件夹中。这是我以前写的一个静态网页，算一个html入门的简单的教程。1.首先在vscode新建一个文件夹，点击如图所示，点击蓝笔圈起的图标（左边的是新建文件）也是将动态图保存到image里，红圈部分就是我们要用的动图，后缀是.mp4。
网页游戏网站源码主页
06-29
网页游戏 网站源码 网站源码主页
199的商业源码，自带火车头采集，足球赛事比分视频体育网站源码（自适应）
07-28
足球赛事比分视频体育网站源码（自适应），自适应网站带足球比分、视频、...纯手工DIV+CSS 利于SEO百度排名，全站URL静态化利于收录，H、ALT、TITLE标签合理运用，代码无沉渣，非常适合做体育资讯信息资讯新闻类站点；
高端大气婚纱影楼网站源码.zip
04-30
1：网站手工DIV css，代码精简，全站精心优化，URL一级，纯HTML静态页面，有利于优化，美工到位! 2：首页布局简单合理，图文并茂，附带后台数据，直接购买，直接上线，全部做成了DEDECMS标签调用，后台修改后，前台...
笔趣阁网站小说源码搭建
04-05
4、代码纯手工原创编写，包括CSS和JS代码，这对HTML代码要求高的站长是非常有利的，当然对SEO也是非常好的。 教程非常详细，不懂的小白看了都会 去除多余的代码 程序稳定无卡顿，笔趣阁小说整站源码+采集器+可用采集...
咨询类企业通用简洁大气的网站源码
11-27
4、网站手工DIV+css，代码精简，首页排版整洁大方、布局合理、利于SEO、图文并茂、静态HTML； 5、首页和全局重新做了全面优化，方便大家无缝使用； 安装方法：按照正常的织梦安装步骤来安装并还原数据就可以用了，...
青果校园兼职网，阿赛企业网站管理
10-09
33、手工生成前台HTML页：可以手工生成前台指定的页面，开启静态模式时候，可以自动生成新增内容页面，修改内容自动更新前台页面，人性化； 34、全自动批量HTML生成：轻轻一点，全自动生成或更新全站所有静态HTML...
HTML+CSS+JS网页设计期末课程大作业——上海旅游景点（10页）web前端开发技术 web课程设计 网页规划与设计
专注于dreamweaver网页设计制作
12-02 42
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；网页编辑方面。
游戏主页官网css+js全自适应源码
模板下载
04-18 524
介绍： 游戏主页官网css+js全自适应 游戏官网源码，采用html+css+js 编制完成，自行使用修改  请勿使用记事本修改源码，不然会出现中文乱码现象！ 网盘下载地址： http://kekewangLuo.net/RuPY7mcwGAK 图片： ...
游戏官网网页源码,css+js动态制作自适应
软件下载
02-28 1051
源码介绍： 采用html+css+js 编制完成，自行使用 请勿使用记事本 会出现中文乱码现象 网盘下载地址： https://zijiewangpan.com/swAteicrIPZ 图片:
html简单网页代码：仿王者荣耀首页 游戏网站开发 游戏官网设计与实现
12-17 1446
👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】 📂文章目
【HTML期末作业】个人游戏主页--html作业
coding加油站
07-10 685
html5期末作业，html作业，js，javascript作业，个人游戏，游戏主页
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
一个很简单很简单的静态网页(附源代码）HTML+CSS
热门推荐
小风啊吼吼吼的博客
04-13 10万+
首先声明：代码中使用的爱心特效和转动的音符这个两个效果是笔者从网上找到的…具体在哪里找的我也忘了… 其他部分是自己写的
使用html+css实现一个静态页面(含源码)三个网页
最新发布
01-06
实现静态页面需要使用HTML和CSS语言。我们可以创建三个不同的网页来展示这种技能。 首先，我们可以创建一个简单的个人主页。在HTML中，我们可以使用`<div>`标签和`<h1>`标签来创建页面的标题和内容区块。然后，利用CSS对页面的布局进行美化，比如设置背景颜色、字体样式和边框等。示例代码如下： ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <h1>欢迎来到我的个人主页</h1> <p>这是我的个人介绍。</p> </div> </body> </html> ``` ```css .container { background-color: #f2f2f2; font-family: Arial, sans-serif; padding: 20px; border: 1px solid #ccc; margin: 20px; } h1 { color: #333; } ``` 接下来，我们可以创建一个产品展示页面。同样使用HTML和CSS的方式来构建页面的结构和样式。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="product"> <img src="product.jpg" alt="产品图片"> <h2>产品名称</h2> <p>产品介绍。</p> </div> </body> </html> ``` ```css .product { text-align: center; padding: 20px; } h2 { color: #333; } ``` 最后，我们可以创建一个简单的联系页面。在这个页面中，我们可以使用表单元素`<form>`，文本框`<input>`和提交按钮来实现一个简单的联系表单。代码如下： ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <form> <label for="name">姓名：</label> <input type="text" id="name" name="name"> <label for="email">邮箱：</label> <input type="text" id="email" name="email"> <input type="submit" value="提交"> </form> </body> </html> ``` ```css form { text-align: center; padding: 20px; } input { margin: 10px; } ``` 总结而言，以上就是如何使用HTML和CSS实现三个不同的静态页面的简单示例。希望以上内容对您有所帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小嘴鱼

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

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

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

打赏作者

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

抵扣说明：

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

余额充值