游戏网站的设计与实现（HTML和CSS实现魔兽世界官网）

我不是女神ヾ 2022-02-25 10:12 258阅读 0赞

***学习游戏网站的设计与实现（HTML和CSS实现魔兽世界官网），本文实现该系统的功能截图，HTML和CSS部分关键语句，系统功能图等供大家参考***  
整个页面是由很多很多DIV标签和ul标签构成  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE3NzQ5_size_16_color_FFFFFF_t_70]

/*部分代码如下*/
        	<div id="header">
            	<ul class="nav">
                	<li><a href="#">首页</a></li>
                    <li><a href="#">视频站</a></li>
                    <li><a href="#">新闻站</a></li>
                    <li><a href="#">图片站</a></li>
                    <li><a href="#">数据库</a></li>
                    <li><a href="#">论坛</a></li>
                </ul>
                <ul class="nav_L">
                	<li><a href="#">游戏下载</a></li>
                    <li class="nav_L_02"><a href="#">文章投稿</a></li>
                    <li class="nav_L_03"><a href="#">视频上传</a></li>
                    <li class="nav_L_04"><a href="#">魔兽论坛</a></li>
                    <li class="nav_L_05"><a href="#">截图上传</a></li>
                    <li class="nav_L_06"><a href="#">手机订阅</a></li>
                </ul> 
                <p><a href="#"></a></p>
            </div>
    
            <div id="subnav">
            	<ul>
                	<li><a href="#">副本</a></li>
                    <li><a href="#">职业</a></li>
                    <li><a href="#">专业</a></li>
                    <li><a href="#">工具</a></li>
                    <li><a href="#">新声望</a></li>
                    <li><a href="#">专题</a></li>
                    <li><a href="#">PVP</a></li>
                    <li><a href="#">直播</a></li>
                    <li><a href="#">话题</a></li>
                    <li class="last"><a href="#">官方通道</a></li>
                </ul>
            </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE3NzQ5_size_16_color_FFFFFF_t_70 1]

/*部分代码如下*/
     <div class="boxC">
                    	<div class="boxC_header">
                        	<h2><span>头条</span><a href="#">世界等你改写：《德拉诺之王》现已正式上线</a></h2>
                            <p><a href="#">[补丁说明]</a><a href="#">[《德拉诺之王》专题]</a><a href="#">[暴雪创意广告]</a></p>
                            <h2><a href="#">艾泽拉斯旅游局上线 王大锤带你玩魔兽</a></h2>
                            <p><a href="#">[福利礼包]</a><a href="#">[周爆十七期]</a><a href="#">[嘉年华cosplay]</a></p>
                        </div>
                    	<h3><a href="#" class="current">最新资讯</a><a href="#">魔兽视频</a><a href="#" class="green">魔兽6.0</a><a href="#">图片八卦</a><a href="#">官方新闻</a></h3>
                        <ul class="list01">
                        	<li><a href="#" class="red">魔兽玩家感慨：魔兽过分追求平衡真的好吗？</a><span>04-05</span></li>
                            <li><a href="#">带你了解魔兽世界历史：奎尔萨拉斯的建立</a><span>04-05</span></li>
                            <li><a href="#">猎人起手小技巧：偷炼金石与20S橙戒BUFF</a><span>04-05</span></li>
                            <li><a href="#">魔兽玩家画作：森林中美丽的精灵与她的萌龙宠</a><span>04-05</span></li>
                            <li class="last"><a href="#">玩家原创：魔兽猎人现况及其十条金科定律</a><span>04-05</span></li>
                            <li><a href="#">玩家原创：跨越艾泽拉斯的足迹 - 幽暗城</a><span>04-05</span></li>
                            <li><a href="#">德鲁伊探索绝技：魔兽探索之德鲁伊的远征</a><span>04-04</span></li>
                            <li><a href="#">暴雪蓝帖：社区经理大谈PVP种族与阵营的平衡</a><span>04-04</span></li>
                            <li><a href="#">魔兽6.1：100个狂野之血换钱袋价值测试</a><span>04-04</span></li>
                            <li class="last"><a href="#">蓝帖：关于下调宠物对战日常NPC经验说明</a><span>04-04</span></li>
                            <li><a href="#" class="red">一代新桃换旧符！玩家谈6.2版本的期待！</a><span>04-04</span></li>
                            <li><a href="#">宠物对战玩家吟诗一首：收藏家 远去的故事</a><span>04-04</span></li>
                            <li><a href="#">暗夜女战士黑色系幻化 盾牌与肩膀完美的搭配</a><span>04-04</span></li>
                            <li><a href="#">玩家盘点：6.2最应该有的10大游戏新元素</a><span>04-03</span></li>
                            <li class="last"><a href="#">艾泽拉斯兵器库！魔兽世界又一标志性武器将现世</a><span>04-05</span></li>
                            <li><a href="#">魔兽Q史更新：泰兰德获救 怒风兄弟终结入侵</a><span>04-03</span></li>
                            <li><a href="#" class="red">你会始终坚持一个公会吗？键盘斗士14期</a><span>04-03</span></li>
                            <li><a href="#">魔兽玩家画作：鱼人节Happy Murloc's Day</a><span>04-03</span></li>
                            <li><a href="#">魔兽美食烹饪指南：人人都能做得一手好菜</a><span>04-03</span></li>
                            <li class="last"><a href="#">蓝帖：群体控制技能不适合轻易去进行改动</a><span>04-05</span></li>
                            <li><a href="#">转阵营那些事：180块出卖了自己的灵魂！</a><span>04-03</span></li>
                            <li><a href="#" class="red">玩家大疑问！谁才是德拉诺中最强大的兽人？</a><span>04-03</span></li>
                            <li><a href="#">魔兽漫画：我PVP被击飞摔死都是你们的错</a><span>04-03</span></li>
                            <li><a href="#">史诗黑石鸟德攻略：站位及输出手法细节分享</a><span>04-03</span></li>
                            <li class="last"><a href="#">战网卡更新解决办法：修改HOST文件是关键</a><span>04-03</span></li>
                        </ul>
                        <p class="boxC_more"><a href="#" class="more">更多新闻>></a></p>
                        <div class="search">
                        	<span>搜索</span>
                            <input type="text" value="输入你感兴趣的内容" class="txt" />
                            <select>
                            	<option>全文</option>
                                <option>标题</option>
                                <option>作者</option>
                            </select>
                            <input type="button" class="btn" />
                        </div>
                        <div class="boxC_lantie">
                        	<p class="p3"><a href="#" class="more">更多蓝贴>></a></p>
                            <p class="txt">暴雪蓝贴</p>
                            <ul>
                            	<li><a href="#">暴雪蓝帖：社区经理大谈PVP种族与阵营</a><span>04-04</span></li>
                                <li><a href="#">蓝帖：关于下调宠物对战日常NPC经验说</a><span>04-04</span></li>
                                <li><a href="#">蓝帖：群体控制技能不适合轻易去进行改</a><span>04-03</span></li>
                                <li><a href="#">设计师蓝推：复训证堆叠数低 鼓励经常</a><span>04-01</span></li>
                                <li><a href="#">魔兽蓝帖：对于外挂使用问题需要保持谨</a><span>03-31</span></li>
                                <li><a href="#">暴雪蓝推：将会在下个更新补丁修正传家</a><span>03-31</span></li>
                                <li><a href="#">魔兽世界29日蓝推：战友招募时光徽章也</a><span>03-30</span></li>
                                <li><a href="#">蓝推：套装徽记使用前无法显示是否为战</a><span>03-27</span></li>
                            </ul>
                        </div>
                    </div> 
    
                    <div class="boxR">
                    	<h3>数据库</h3>
                        <div class="boxR_bg">
                        	<p class="mogu"><a href="#"><span class="tu02"><img src="images/mg.jpg" /></span></a></p>
                            <ul class="boxR_tu">
                            	<li><a href="#"><img src="images/20130906-2.jpg" /></a><a href="#"></a></li>
                                <li><a href="#"><img src="images/20130522-2.jpg" /></a><a href="#"></a></li>
                                <li><a href="#"><img src="images/20130428-2.jpg" /></a><a href="#"></a></li>
                                <li><a href="#"><img src="images/20130401-2.jpg" /></a><a href="#"></a></li>
                                <li><a href="#"><img src="images/20130308-2.jpg" /></a><a href="#"></a></li>
                                <li><a href="#"><img src="images/20130217-2.jpg" /></a><a href="#"></a></li>
                                <li><a href="#"><img src="images/20121130-2.jpg" /></a><a href="#"></a></li>
                            </ul>
                        </div>
                        <h3 class="boxR_tit02">话题讨论<a href="#" class="tit_link more">更多>></a></h3>
                        <div class="boxR_bg02">
                        	<ul>
                            	<li><a href="#" class="txt_link02 red">魔兽玩家感慨：魔兽过分追求平</a></li>
                                <li><a href="#" class="txt_link02">带你了解魔兽世界历史：奎尔萨</a></li>
                                <li><a href="#" class="txt_link02">玩家原创：跨越艾泽拉斯的足迹</a></li>
                                <li><a href="#" class="txt_link02 red">一代新桃换旧符！玩家谈6.2版</a></li>
                                <li><a href="#" class="txt_link02">玩家盘点：6.2最应该有的10大</a></li>
                                <li><a href="#" class="txt_link02">魔兽Q史更新：泰兰德获救 怒风</a></li>
                                <li><a href="#" class="txt_link02">魔兽美食烹饪指南：人人都能做</a></li>
                                <li><a href="#" class="txt_link02 red">玩家大疑问！谁才是德拉诺中最</a></li>
                            </ul>
                        </div>
                        <h3 class="boxR_tit03">炉石传说<a href="#" class="tit_link more">更多>></a></h3>
                        <div class="boxR_bg02">
                        	<ul>
                            	<li><a href="#" class="txt_link02">龙族在手什么感觉 龙族卡牌集</a></li>
                                <li><a href="#" class="txt_link02">每周针对第8期 教你如何应对手</a></li>
                                <li><a href="#" class="txt_link02">黑石深渊老二黑铁竞技场攻略指</a></li>
                                <li><a href="#" class="txt_link02">熊猫人之谜 武僧即将降临炉石</a></li>
                                <li><a href="#" class="txt_link02">那些你可能不知道的卡牌别称大</a></li>
                                <li><a href="#" class="txt_link02">城管多又如何 超强大帝与克总</a></li>
                                <li><a href="#" class="txt_link02">萨满也能奇迹杀 梭哈萨2回合干</a></li>
                                <li><a href="#" class="txt_link02">新思路 人造米尔豪斯特效法爷</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE3NzQ5_size_16_color_FFFFFF_t_70 2]

/*部分代码如下*/
    <div class="box_fben">
            		<h2 class="box_tit02"><span class="tu02"></span><span class="txt02">副本</span></h2>
            		<div class="box_fben_con01">
                		<ul class="fben_tuL">
                    		<li>
                            	<p class="fben_tuL01"><a href="#"><img src="images/index20120917.jpg" /></a><a href="#" class="touBg"></a></p>
                        		<a href="#" class="txt05 tit_link">血色大厅<br />[26—36(90 英雄)]</a>
                        	</li>
                        	<li>
                            	<p class="fben_tuL01"><a href="#"><img src="images/index20120918.jpg" /></a><a href="#" class="touBg"></a></p>
                        		<a href="#" class="txt05 tit_link">血色修道院<br />28—38(90 英雄)]</a>
                        	</li>
                        	<li>
                            	<p class="fben_tuL01"><a href="#"><img src="images/index20120919.jpg" /></a><a href="#" class="touBg"></a></p>
                        		<a href="#" class="txt05 tit_link">通灵学院<br />[38—48(90 英雄)]</a>
                        	</li>
                        	<li>
                            	<p class="fben_tuL01"><a href="#"><img src="images/index20120920.jpg" /></a><a href="#" class="touBg"></a></p>
                        		<a href="#" class="txt05 tit_link">青龙寺[85—90]</a>
                        	</li>
                        	<li>
                            	<p class="fben_tuL01"><a href="#"><img src="images/index20120921.jpg" /></a><a href="#" class="touBg"></a></p>
                        		<a href="#" class="txt05 tit_link">风暴烈酒酿造厂<br />[85—90]</a>
                        	</li>
                        	<li>
                            	<p class="fben_tuL01"><a href="#"><img src="images/index20120922.jpg" /></a><a href="#" class="touBg"></a></p>
                        		<a href="#" class="txt05 tit_link">魔古山宫殿<br />[87—90]</a>
                        	</li>
                        	<li>
                            	<p class="fben_tuL01"><a href="#"><img src="images/index20120923.jpg" /></a><a href="#" class="touBg"></a></p>
                        		<a href="#" class="txt05 tit_link">影踪禅院[87—90]</a>
                        	</li>
                        	<li>
                            	<p class="fben_tuL01"><a href="#"><img src="images/index20120924.jpg" /></a><a href="#" class="touBg"></a></p>
                        		<a href="#" class="txt05 tit_link">残阳关[90]</a>
                        	</li>
                        	<li>
                            	<p class="fben_tuL01"><a href="#"><img src="images/index20120925.jpg" /></a><a href="#" class="touBg"></a></p>
                        		<a href="#" class="txt05 tit_link">围攻砮皂寺[90] </a>
                        	</li>
                    	</ul>
                    	<ul class="fben_tuR">
                    		<li>
                            	<p class="fben_tuL02"><a href="#"><img src="images/index20120926.jpg" /></a><a href="#" class="touBg"></a></p>
                        		<a href="#" class="txt06 tit_link">恐惧之心[90]</a>
                        	</li>
                        	<li>
                            	<p class="fben_tuL02"><a href="#"><img src="images/index20120927.jpg" /></a><a href="#" class="touBg"></a></p>
                        		<a href="#" class="txt06 tit_link">永春台[90]</a>
                        	</li>
                        	<li>
                            	<p class="fben_tuL02"><a href="#"><img src="images/index20120928.jpg" /></a><a href="#" class="touBg"></a></p>
                        		<a href="#" class="txt06 tit_link">魔古山宝库[90]</a>
                        	</li>
                    
                    	</ul>
                	</div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE3NzQ5_size_16_color_FFFFFF_t_70 3]

/*部分代码如下*/
    <div class="box_baik">
                	<h2>游戏百科<span class="tit02">游戏信息</span></h2>
                	<div class="box_baikL">
                    	<div class="box_bk">
                        	<p class="search02"><span>游戏百科</span><input type="text" class="txt" /><input type="button" class="btn" value="搜索" /><input type="button" class="btn btn02" value="提问" /></p>
                            <ul class="item">
                            	<li><a href="#">已解决</a></li>
                                <li><a href="#">高分悬赏</a></li>
                                <li><a href="#">精华推荐</a></li>
                                <li><a href="#">疑难问题</a></li>
                                <li class="current">未解决</li>
                            </ul>
                            <ul class="con">
                            	<li class="tit"><span class="tit01">57032条 标题</span><span>回答数</span><span>状态</span></li>
                            	<li><a href="#">玩魔兽世界主机就断电！</a><span>3</span><span>解决中</span></li>
                                <li><a href="#">魔兽世界的金币一次最少购买多少个？</a><span>3</span><span>解决中</span></li>
                                <li><a href="#">本人 战士 男 爱好PVP，求PVP22战士</a><span>3</span><span>解决中</span></li>
                                <li><a href="#">求一个我的世界服务器</a><span>3</span><span>解决中</span></li>
                                <li><a href="#">各位大师好，请教浑天不可克分金，分金</a><span>3</span><span>解决中</span></li>
                            </ul>
                            <p class="page"><a href="#">[1]</a><a href="#">[2]</a><a href="#">[3]</a><a href="#">[4]</a></p>
                        </div>
                    </div>
                    <ul class="box_baikR">
                    	<li>中文名称：魔兽世界</li>
                        <li>英文名称：World of Warcraft</li>
                        <li>代理公司：网易</li>
                        <li>游戏类型：MMORPG</li>
                        <li>游戏制作：Blizzard</li>
                        <li>大陆官方： <a href="#">点击进入</a> 暴雪战网： <a href="#">点击进入</a></li>
                        <li>暴雪官方： <a href="#">点击进入</a> 台湾官方： <a href="#">点击进入</a></li>
                        <li>专区编辑： 恩妈</li>
                    </ul>
                </div>
           </div>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE3NzQ5_size_16_color_FFFFFF_t_70]: /images/20220225/f840d00fd20c4b51bad076aea67f051f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE3NzQ5_size_16_color_FFFFFF_t_70 1]: /images/20220225/10c3be57d6d741b9bc7cc492b8857388.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE3NzQ5_size_16_color_FFFFFF_t_70 2]: /images/20220225/f442e6d847bd4fe0b1934ae68e7c988e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE3NzQ5_size_16_color_FFFFFF_t_70 3]: /images/20220225/d39a18a6653c4162b3df70f47e6521b7.png