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

效果图：

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

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实现静态游戏网首页（免费拿源码）相关推荐

爷青回|用Python重构【愤怒的小鸟】小游戏来啦~ 免费下载源码
62套儿童行业响应式Html5儿童慈善机构网站模板儿童公益组织企业官网模板儿童慈善CSS模板下载婴儿树儿童健康食品整站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响
62套儿童行业响应式Html5儿童慈善机构网站模板儿童公益组织企业官网模板儿童慈善CSS模板下载婴儿树儿童健康食品整站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响 ...
原创：纯手工打造CSS像素画--笨笨熊系列图标
纯手工打造CSS像素画--笨笨熊系列图标作者:冰极峰转载请注明出处在cssplay网站看到有一组CSS像素画,于是也想摩仿一下,于是在网络上找到一组头像图标,看其结构比较简单,就拿它开刀吧!先看 ...
html格子像素画,HTML_纯手工打造CSS像素画，在cssplay网站看到有一组CSS像素 - phpStudy...
纯手工打造CSS像素画在cssplay网站看到有一组CSS像素画,于是也想摩仿一下,于是在网络上找到一组头像图标,看其结构比较简单,就拿它开刀吧!先看看预览图图一基本原理: 没有什么技术含量,主 ...
20套各种风格影视动画公司响应式企业模电影上映影讯网站模板电影软件网页CSS模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应
20套各种风格影视动画公司响应式企业模电影上映影讯网站模板电影软件网页CSS模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应. 不仅仅是首页,二级页面,三级页面,登 ...
40套各种风格游戏行业网站html5模板wap手机游戏资讯网站模板游戏动漫设计公司html模板游戏公司网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应
40套各种风格游戏行业网站html5模板wap手机游戏资讯网站模板游戏动漫设计公司html模板游戏公司网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应. 不仅仅 ...
css3 烟蚊香_如何使用纯CSS实现蚊香燃烧的效果（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现传统蚊香燃烧的效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载每日前端实战系列的全部源代码请从 ...
各种风格登录页响应式html5模板 Admin后台管理系统模板手机wap登录页html模板html会员登录页面模板源码70多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码
各种风格登录页响应式html5模板 Admin后台管理系统模板手机wap登录页html模板html会员登录页面模板源码70多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码 ...
170 套各种公司网站模板软件公司网站模板企业网站模板创意设计公司网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应
170 套各种公司网站模板软件公司网站模板企业网站模板创意设计公司网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应. 不仅仅是首页,二级页面,三级页面,登陆,购 ...
200套工作室设计行业响应式Html5模板HTML5+CSS3设计网站模板简洁设计师作品展示响应式模板整洁扁平宽屏CSS3网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机se
200套工作室设计行业响应式Html5模板HTML5+CSS3设计网站模板简洁设计师作品展示响应式模板整洁扁平宽屏CSS3网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机se ...

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

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

最新文章

热门文章