结合前面所学的HTML知识的练习:
所需要的素材:logo图片
编写一个百度百科类似的网页
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>英雄联盟-百度百科</title> </head> <body> <!-- logo区 --> <div style="border:1px solid red;width:960px;margin:0 auto;"> <img alt="" src="../images/lol.jpg" width="960px"><!-- 图片宽为div设置的宽度 --> </div> <!-- 内容区 --> <div style="border:1px solid gray;width:960px;margin:0 auto;"> <h1>英雄联盟</h1> <p> 《英雄联盟》(简称LoL)是由美国<u>Riot Games</u>开发,<b>腾讯</b>游戏运营的英雄对战网游。 《英雄联盟》除了即时战略、团队战外,还拥有特色的英雄、自动匹配的战网平台,包括天赋树、召唤师系统、符文等元素。</p> <table width="70%"> <tr> <td>中文名</td> <td>英雄联盟</td> <td>发行商</td> <td><b>腾讯</b>游戏</td> </tr> <tr> <td>其他名称</td> <td>撸啊撸、lol</td> <td>发行日期</td> <td>2011年9月22日</td> </tr> <tr> <td>游戏类型</td> <td>策略、角色扮演、竞技,团队合作</td> <td>玩家人数</td> <td>多人</td> </tr> <tr> <td>游戏平台</td> <td>PC</td> <td>游戏画面</td> <td>3D</td> </tr> </table> <h2>目录</h2> <ol> <li> <a href="#a1">游戏背景</a> <ul> <li>战争学院</li> <li>德玛西亚</li> </ul> </li> <li> <a href="#a2">游戏系统</a> <ul> <li>天赋系统</li> <li>符文系统</li> </ul> </li> </ol> <h2><a name="a1">1、游戏背景</a></h2> <h3>战争学院</h3> <p> 战争学院是英雄联盟裁决瓦洛兰政治纠纷之地。这里是绝对中立的领土,严禁任何纷争。 违反者将面对学院的士</p> <p>兵和魔法。学院坐落于一座巨型水晶枢纽之上,由黑曜石、 贵金属和魔法塑形而成。它位于莫格罗恩关隘的北方入口,刚</p> <p>好位于相互敌对的城邦德玛西亚和诺克萨斯之间。除了作为英雄联盟所在地,战争学院还是瓦洛兰最权威的军事培训机构。 很多图书馆都致力于收录战争学院的英雄信息,并向所有研究者开放。</p> <h3>德玛西亚</h3> <p> 人类城邦德玛西亚坐落在瓦洛兰的西部海岸。德玛西亚人民的共同目标是通过善良和正义 让所有人都过得更好。他们认为恶毒自私如同疾病,应当从人类灵魂中根除。来到德玛西亚并定居于此的人们, 具有和本地居民一样的理想和美德。</p> <p>其他信息</p> <h2><a name="a2">2、游戏系统</a></h2> <h3>天赋系统</h3> <p> 天赋技能分为三类:攻击类、防御类、通用类,天赋技能点总共为30点。</p> <p> 攻击类:提高物理、法术攻击强化偏重攻击的召唤师技能。</p> <p> 防御类:提高物理、法术防御及抗打击回复能力,强化偏重防御和回复的召唤师技能。</p> <p> 通用类:提高召唤师其他能力,强化多用途召唤师技能,减少技能冷却时间。</p> <h3>符文系统</h3> <p> 符文有四种颜色,分别是印记(红色)、符印(黄色)、雕文(蓝色)和精华(紫色),不同的符文 类型在镶嵌时也要镶嵌到对应的符文槽里,在符文书每一页都有9个蓝槽、9个红槽、9个黄槽和3个紫槽供你镶嵌符文。</p> <p> 在游戏中,只是购买了符文是不能对召唤师所选择的英雄有任何帮助的, 你需要将符文镶嵌在符文页当中,才能使符文在游戏中产生作用。</p> </div> <!-- 版权区 --> <div style="border:1px solid red;width:960px;margin:0 auto;"> <p align="center">© 2015 Chinese 使用贴吧百科前必读|贴吧协议|贴吧百科合作平台</p> </div> </body> </html>
页面效果图: