纯手工html+css实现静态游戏网首页（免费拿源码）
生活随笔
收集整理的這篇文章主要介紹了
纯手工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实现静态游戏网首页（免费拿源码）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： lodop直接打印服务器的文件,C-Lo
- 下一篇： 保研面试注意事项