Web开发基础-HTML-05

结合前面所学的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">&copy; 2015 Chinese 使用贴吧百科前必读|贴吧协议|贴吧百科合作平台</p></div>
</body>
</html>

页面效果图：

Web开发基础-HTML-05相关推荐

Web开发（一）·期末不挂之第一章·Web开发基础（不背就挂的基础知识）
Web开发基础一.网站的访问过程 ✪✪✪ 二.Web应用 ✪✪✪ 三.其他一.网站的访问过程 ✪✪✪ 网址: URL(互联网上标准资源的地址)组成部分: 协议:http:// 域名:-com/cn ...
掌握web开发基础系列--物理像素、逻辑像素、css像素
思考一下什么是物理像素?什么是css像素? 在 <掌握web开发基础系列--长度单位> 这篇文章中已经介绍过了css像素单位--px,这篇文章详细探讨一下设备物理像素和css像素之间的关 ...
提高生产力：Web开发基础平台WebCommon的设计和实现
Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...
移动Web开发基础-比例盒子
前言上篇在移动Web开发基础-百分比+flex布局方案中说到了比例盒子的实现,因为在移动端,需要适应各种屏幕宽度的设备,所以我们的图片以及其他一些元素需要根据屏幕宽度自适应的等比例缩放,这里就需要用 ...
web开发基础(html+CSS)
web开发基础 html+CSS 概念万维网概念 Web浏览器 Web服务器 URL web应用领域 B/S架构(Browser/Server) C/S架构(Client/Server) web系统 ...
（一）移动端 Web 开发基础
文章目录一.移动 Web 开发基础概念 1. 像素 (1) 分辨率 (2) 物理像素 (3) CSS 像素 (4) 设备像素比 (5) 标清屏和高清屏 (6) 缩放 (7) PPI / DPI 2. ...
web发布与html ppt,web开发基础_HTML.ppt
web开发基础_HTML Web开发基础--HTML 讲解提纲 Html简介及结构网页中的文本的使用网页中的列表使用网页中的图像的使用超文本链接网页中的多媒体的使用表格.框架及层输入表单 ...
移动Web开发基础-flexible布局方案
概述前面我们已经已经了解了两种基本的布局方案,移动Web开发基础-百分比+flex布局方案和移动Web开发基础-rem布局,其中rem布局方案和我们今天要了解的flexible布局方案是有关系的 ...
移动Web开发基础-利用VW单位适配布局
前言前面我们分享移动Web开发基础-rem布局的时候提到了两个方案.方案的最终目的都是为了形成一个"流单位". 方案一是通过媒体查询给html设置font-size,密集的断 ...
网易云课堂Web安全工程师课程分享——第二章 Web开发基础知识
第一节前端开发基础--HTML 课程回顾 Web页面通常使用哪几种语言开发? HTML结构包含哪两部分? HTML元素由哪几部分组成? 常见的HTML标签有哪些? HTML DOM是什么结构? 总结 ...

Web开发基础-HTML-05

Web开发基础-HTML-05相关推荐

最新文章

热门文章