前端——14.用HTML做的小练习
2024-04-18 10:21:16
案例一：
下面用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>疾风剑豪</title>
</head><body><h1>疾风剑豪</h1><strong>竞技网游《英雄联盟》中的英雄角色</strong><br /><br />相关视频<table width="800" ><tr><td><a href="https://haokan.baidu.com/v?pd=wisenatural&vid=15873938380038613505" target="_blank"><img src="https://bkimg.cdn.bcebos.com/pic/a8773912b31bb0514959d59a307adab44aede007?x-bce-process=image/resize,m_lfit,w_440,limit_1" width="350"/></a></td><td><a href="https://m.bilibili.com/video/av543631775" target="_blank"><img src="https://bkimg.cdn.bcebos.com/pic/38dbb6fd5266d0168d66f89a912bd40735fa3500?x-bce-process=image/resize,m_lfit,w_440,limit_1" width="350"/></a> </td><td><a href="https://m.bilibili.com/video/av543631775" target="_blank"><img src="https://bkimg.cdn.bcebos.com/pic/b3119313b07eca800e12f99a962397dda14483bc?x-bce-process=image/resize,m_lfit,w_440,limit_1" width="350"/></a></td></tr><tr align="center"><td><a href="https://m.bilibili.com/video/av543631775" target="_blank">技能解说</a></td><td><a href="https://m.bilibili.com/video/av543631775" target="_blank">击杀集锦</a></td><td><a href="https://haokan.baidu.com/v?pd=wisenatural&vid=15873938380038613505" target="_blank">快乐风男</a></td></tr></table><br /><p> 疾风剑豪·亚索，是MOBA竞技网游《英雄联盟》中第117位登场的英雄角色，定位为战士、刺客 </p><p> 亚索是一位近战爆发AD刺客，双突进的技能设置使得他在中单游刃有余，并且大招在队友的配合下，在团战中能够发挥至关重要的作用</p><h2>目录</h2><ol><li><a href="#1a">角色背景</a></li><li><a href="#2a">能力设定</a></li><li><a href="#3a">玩法分析</a></li><li><a href="#4a">英雄台词</a></li></ol><h2 id="1a">角色背景</h2><p> 亚索是一个百折不屈的艾欧尼亚人，也是一名身手敏捷的御风剑客。这位生性自负的年轻人，被误认为杀害长老的凶手——由于无法证明自己的清白，他出于自卫而杀死了自己的哥哥。虽然长老死亡的真相已然大白，亚索还是无法原谅自己的所作所为。他在家园的土地上流浪，只有疾风指引着他的剑刃</p><p><strong>“死亡如风，常伴吾身。”——亚索</strong></p><img src="https://bkimg.cdn.bcebos.com/pic/cb8065380cd7912397dd0c77097f4e82b2b7d0a22ad6?x-bce-process=image/resize,m_lfit,w_1280,limit_1" width="500" ><h2 id="2a">能力设定</h2><strong>百折不屈:</strong><p>亚索在移动的同时会积攒剑意—移动得越快，剑意的获取就越快。当剑意槽被充满时，在受到来自英雄或野怪的伤害的同时，亚索获得一层吸收（100 - 475)伤害（随英雄等级成长）的护盾。</p><strong>向死而生:</strong><p>亚索的暴击几率提升150%，但暴击伤害会降低10%。100%以上的暴击几率，会每1%转化为0.4额外攻击力。这个效果的计算顺序处在所有其它的暴击几率修正效果之后。</p><strong>斩钢闪:</strong><p>向前出剑，造成（20/45/70/95/120 +105%AD）物理伤害。 在命中时，斩钢闪会获得层旋风烈斩效果， 持续6秒。在积攒2层旋风烈斩效果后，斩钢闪会形成一阵能够击飞敌人的旋风。 斩钢闪被视为普通攻击：它可以暴击，附带攻击特效，会被控制效果所中断，并且它的冷却时间和施法时间都会从攻击速度上获得收益。 如果在突进的过程中施放斩钢闪，那么斩钢闪就会呈环状出剑。</p><strong>风之障壁：</strong><p>形成一个持续4秒的气流之墙，来阻挡敌方的飞行道具。</p><strong>踏前斩：</strong><p>向目标敌人突进，造成（60/70/80/90/100 +60%AP +20%额外AD）魔法伤害。每次施法都会使你的下一次突进的基础伤害提升25%，最多提升至50%。 在10秒内无法对相同敌人重复施放。 如果在途径的过程中施放斩钢闪，那么斩钢闪就会呈环状出剑。</p><strong>狂风绝息斩：</strong><p>闪烁到一个浮空的敌方英雄身边，造成（200/350/500 +150%额外AD）物理伤害，并使范围内的所有浮空的敌人在空中多停留1秒。获得满额的剑意值，但会重置旋风 烈斩的层数。 在接下来的15秒里，亚索的暴击会获得50%的额外护甲穿透加成——这个效果能够无视目标的来自装备、增益、符文的护甲值。</p><h2 id="3a">玩法分析</h2><strong>己方使用：</strong><p>你可以将敌方小兵作为踏前斩的跳板，来追杀本已逃掉的敌人；你也可以直接突进到对方英雄身上，并将敌方小兵作为撤退时的跳板。</p><p>在18级时，亚索的斩钢闪只需要从装备中获取55%攻击速度，即可到达攻击速度上限。</p><p>狂风绝息斩可以对着任何被击飞的目标施放，即使这个击飞效果是你的友军造成的。</p><strong>敌方使用：</strong><p>斩钢闪的范围非常狭窄。尽可能靠边，就能躲过这招。</p><p>当亚索的斩钢闪连续命中两次时，他的下次斩钢闪就会形成一道旋风。要观察他的增益栏，并且留心聆听相关音效，做好躲避这招的准备。</p><p>亚索在发出旋风之后最为虚弱，可以趁机逼他交战。</p><strong>英雄优势：</strong><p>进有E技能突进，退有W技能防守;既有控制、又有爆发，可谓输出与防御兼备的刺客。团战收割能力极强，AOE输出也颇为可观。</p><strong>英雄劣势：</strong><p>前期较为弱势，逆风容易酱油。操作难度太高，光是技能的多样组合就足够新手推敲半天。对于团队的要求也非常高，必须要队友创造非常好的输出环境才能发挥亚索的最大作用。</p><h2 id="4a">英雄台词</h2><table align="center" border="1" cellpadding="20" cellspacing="0" width="600"><thead><tr><th>中文</th><th>英文</th></tr></thead><tbody><tr align="center"><td>死亡如风，常伴吾身</td><td>Death is like the wind; always by my side.</td></tr><tr align="center"><td>长路漫漫，唯剑作伴</td><td>A sword's poor company for a long road.</td></tr><tr align="center"><td>吾之荣耀，离别已久</td><td>My honor left a long time ago.</td></tr><tr align="center"><td>明日安在，无人能允</td><td>No-one is promised tomorrow.</td></tr><tr align="center"><td>此剑之势，愈斩愈烈</td><td>This blade never gets any lighter.</td></tr></tbody></table></body></html>案例二：
用HTML中的div画一个五环：
代码如下：
<!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>五环</title><style>.sty1{height: 100px; width: 100%; background-color: #ccc; margin-top :10px; box-shadow: 10px 10px 10px #000;}.sty2{transform: rotate(10deg);}.sty3{height: 120px; width: 120px;border-radius: 100%;}</style>
</head>
<body style="background-color:antiquewhite;"><div style="margin-top: 280px; margin-left: 500px;"><div class="sty3" style=" background-color: red; float:left"></div><div class="sty3" style=" background-color:chocolate; margin-left: 60px; opacity: 0.8; float: left; "></div><div class="sty3" style=" background-color: aqua; margin-left: 90px; opacity: 0.8; "></div><div class="sty3" style="background-color: black; opacity: 0.8;margin-left: 40px; margin-top: -40px; float: left;"></div><div class="sty3" style="background-color:blueviolet;opacity: 0.8; margin-left: 150px; margin-top: -40px; "></div></div></body>
</html>案例三：
用HTML中的div写一个菜鸟的首页：
代码如下：
<!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>菜鸟页面</title><style>.sty1{height: 100%; width: 8%; float: left; text-align: center; line-height: 70px; color: #fff; font-size: 18px;}.sty2{float: right;text-align: center;color: #fff; line-height: 40px;margin-right: 30px;}.sty3{height: 50px; width: 100%; margin-top: 10px; text-align: center; line-height: 50px; color:#000 ;font-size: 18px;}</style>
</head>
<body><div style="height: 70px; width: 100%; background-color: black;"><div class="sty1" style="height: 100%; width: 10%; font-size: 25px;"><b>菜鸟工具</b></div><div class="sty1" >菜鸟1号</div><div class="sty1" >菜鸟2号</div><div class="sty1" >菜鸟3号</div><div class="sty1" >菜鸟4号</div><div class="sty1" >菜鸟5号</div><div class="sty1" >菜鸟6号</div><div id="div1" class="sty2" style="height: 40px; width: 70px; border-radius: 6px; margin-top: 15px; background-color: orange; font-size: 20px;" onmouseover="m1()" onmouseout="m2()" onmousedown="m3" onmouseup="m4()">搜索</div><div style="height: 40px; width: 280px; border-radius: 7px; margin-top: 15px; margin-right: 30px; background-color:#fff; float: right;line-height: 40px; text-align: left; color:#666; " contenteditable ="true">请输入内容</div></div><div style="height: 650px; width: 10%; background-color: darkgray; margin-top: 1%; float: left;"><div class="sty3 " onmouseover="a1(this)" onmouseout="a2(this)">工具1号</div><div class="sty3" onmouseover="a1(this)" onmouseout="a2(this)">工具2号</div><div class="sty3" onmouseover="a1(this)" onmouseout="a2(this)">工具3号</div><div class="sty3" onmouseover="a1(this)" onmouseout="a2(this)">工具4号</div><div class="sty3" onmouseover="a1(this)" onmouseout="a2(this)">工具5号</div><div class="sty3" onmouseover="a1(this)" onmouseout="a2(this)">工具6号</div><div class="sty3" onmouseover="a1(this)" onmouseout="a2(this)">工具7号</div><div class="sty3" onmouseover="a1(this)" onmouseout="a2(this)">工具8号</div></div><!-- 右边部分 --><div style="height: 650px; width: 89%; background-color:#fff; margin-top: 16px; margin-left: 15px; float: left;"><div style="height: 200px; width: 100%; margin-top: 10px;"><div style="height: 50px; "><div style="height: 40px; width: 100px; margin-left: 10px; border-radius: 7px;background-color: orange;float: left;text-align: center; line-height: 40px; font-size: 20px;color: #fff;"><b>热门工具</b></div><div style="height: 50px; width: 10px; border-radius: 7px;float: left;text-align: center; line-height: 40px; font-size: 20px;"><b>|</b></div><div style="height: 40px; width: 150px; border-radius: 7px;background-color:#666;float: left;text-align: center; line-height: 40px; font-size: 20px;color: #fff;"><b>自定义网址</b></div></div><div style="height: 150px; "><div style="height: 75px;"><div style="height: 75px; width: 15%; margin-left: 70px; text-align: center; line-height: 65px; float: left;">正则表达式在线测试</div><div style="height: 75px; width: 15%; text-align: center; line-height: 65px; float: left;">正则表达式在线测试</div><div style="height: 75px; width: 15%; text-align: center; line-height: 65px; float: left;">正则表达式在线测试</div><div style="height: 75px; width: 15%; text-align: center; line-height: 65px; float: left;">正则表达式在线测试</div><div style="height: 75px; width: 15%; text-align: center; line-height: 65px; float: left;">正则表达式在线测试</div><div style="height: 75px; width: 15%; text-align: center; line-height: 65px; float: left;">正则表达式在线测试</div></div><div style="height: 75px;"><div style="height: 75px; width: 15%; margin-left: 70px; text-align: center; line-height: 65px; float: left;">正则表达式在线测试</div><div style="height: 75px; width: 15%; text-align: center; line-height: 65px; float: left;">正则表达式在线测试</div><div style="height: 75px; width: 15%; text-align: center; line-height: 65px; float: left;">正则表达式在线测试</div><div style="height: 75px; width: 15%; text-align: center; line-height: 65px; float: left;">正则表达式在线测试</div><div style="height: 75px; width: 15%; text-align: center; line-height: 65px; float: left;">正则表达式在线测试</div><div style="height: 75px; width: 15%; text-align: center; line-height: 65px; float: left;">正则表达式在线测试</div></div></div></div><div style="height: 400px; width: 100%; margin-top: 40px;"><!-- 下上 --><div style="height: 50px; background-color:antiquewhite;"><div style="height: 50px; width: 120px; margin-left: 10px; text-align: center;line-height: 50px; float: left;font-size: 18px; color: #666;"><b>: : 搜索资源</b></div><div style="height: 50px; width: 10px; margin-left: -8px; text-align: center;line-height: 50px; float: left;"><b>|</b></div><div style="height: 50px; width: 100px; text-align:left;line-height: 50px; float: left;"><b>更多>></b></div></div><!-- 下中 --><div style="height: 150px; "><div style="height: 50px; width: 100%;text-align: center;line-height: 40px;"><b>Goole</b>  Bing  Github  Stack  Overflow  Baidu  Runoob</div><div style="height: 100px; width: 800px;margin-left: 350px;"><input style="height: 80px; width: 600px;"><div style="height: 80px; width:140px; background-color:gainsboro;border-radius: 10px; float: right; text-align: center; line-height: 80px; font-size: 30px;"><b>搜 索</b></div></div></div><!-- 下下 --><div style="height: 200px; "><div style="height: 95px; "><div style="height: 95px; width: 10%; margin-left: 130px; text-align: center; line-height: 85px; float: left; font-size: 23px;">Google</div><div style="height: 95px; width: 10%; text-align: center; line-height: 85px; float: left; font-size: 23px;">Google</div><div style="height: 95px; width: 10%; text-align: center; line-height: 85px; float: left; font-size: 23px;">Google</div><div style="height: 95px; width: 10%; text-align: center; line-height: 85px; float: left; font-size: 23px;">Google</div><div style="height: 95px; width: 10%; text-align: center; line-height: 85px; float: left; font-size: 23px;">Google</div><div style="height: 95px; width: 10%; text-align: center; line-height: 85px; float: left; font-size: 23px;">Google</div><div style="height: 95px; width: 10%; text-align: center; line-height: 85px; float: left; font-size: 23px;">Google</div><div style="height: 95px; width: 10%; text-align: center; line-height: 85px; float: left; font-size: 23px;">Google</div></div><div style="height: 95px; margin-top: 10px;"><div style="height: 95px; width: 10%; margin-left: 130px; text-align: center; line-height: 85px; float: left; font-size: 23px;">Google</div><div style="height: 95px; width: 10%; text-align: center; line-height: 85px; float: left; font-size: 23px;">Google</div><div style="height: 95px; width: 10%; text-align: center; line-height: 85px; float: left; font-size: 23px;">Google</div><div style="height: 95px; width: 10%; text-align: center; line-height: 85px; float: left; font-size: 23px;">Google</div><div style="height: 95px; width: 10%; text-align: center; line-height: 85px; float: left; font-size: 23px;">Google</div><div style="height: 95px; width: 10%; text-align: center; line-height: 85px; float: left; font-size: 23px;">Google</div><div style="height: 95px; width: 10%; text-align: center; line-height: 85px; float: left; font-size: 23px;">Google</div><div style="height: 95px; width: 10%; text-align: center; line-height: 85px; float: left; font-size: 23px;">Google</div></div></div></div></div>
</body>
<script>function m1(){document.getElementById("div1").style.backgroundColor = "#fb623c" }function m2(){document.getElementById("div1").style.backgroundColor = "orange"}function m3(){document.getElementById("div1").style.boxShadow = "0px 0px 5px #fff"}function m4(){document.getElementById("div1").style.boxShadow = "0px 0px 0px #2ac"}function a1(tt){tt.style.backgroundColor = "#fb623c"tt.style.color = "#fff"}function a2(tt){tt.style.backgroundColor = "darkgray"tt.style.color = "#000"}
</script>
</html>其实都很简单，但是div的使用要学会。
前端——14.用HTML做的小练习相关推荐
- Esp8266 进阶之路20 【高级篇】深入学习esp8266的esp now模式组网，仿机智云做一个小网关，实现无需网络下轻松彼此连接通讯交互数据。（附带Demo）
本系列博客学习由非官方人员 半颗心脏 潜心所力所写,不做开发板.仅仅做个人技术交流分享,不做任何商业用途.如有不对之处,请留言,本人及时更改. 序号 SDK版本 内容 链接 1 nonos2.0 搭建 ...
- python和qt哪个好_做个小的桌面用node还是QT比较好？ - Web开发 - WebDev - 水木社区...
楼主说了自己水平不高,那就专注 py 一门语言就好了.electron 这边虽然现在已经简单了很多,但也是两个进程起步,main 和 renderer 进程的 api 又不一样,renderer 只有 ...
- 前端之旅，做一点有回报的事情
本文是参加前端早读课[同说]做的分享 首先感谢情封对前端圈的辛苦付出,能坚持做好一件事真的很不容易,敬佩这份精神.2天前看到早读课的[同说]活动计划,我觉得想法真的很好,忽然情封微信邀请我参与,听到后 ...
- 前端防错以及好用小tips指南总结
@前端防錯以及好用小tips指南總結 1.一般情況下我們接收到的都是對象格式,某些情況下,需要接到後端傳過來的奇怪的字符串格式的JSON,需要解析成對象,但是有時候他們傳過來的格式有問題,會報錯 解決 ...
- 做一个小程序要多少钱？
微信小程序相信大家都已经不会陌生,我们的日常生活中也会经常使用到微信小程序,从我们出门逛街买奶茶,坐公交刷地铁,偷懒不出门买菜,都会熟练的打开微信小程序- 那么问题来了,做一个小程序到底要多少钱? ...
- 做一个小程序的完整流程
一. 引言 最近在帮朋友开发一个小程序,都说今年是小程序快速发展的一年,不懂技术的人,大部分零售店面都开始想做一个小程序帮助推广销售.虽然小程序技术门槛没那么高,但自己独立做一个小程序还是需要了解的内 ...
- 一次使用wxcharts做微信小程序图表功能采到的坑
谈一次使用wxcharts做微信小程序图表功能采到的坑 铃木千夏-前端小白 第一次写博客,记录自己采到的坑,希望下次再遇到类似的不会这么头疼,也希望你们能少走些弯路. wxcharts柱状图 从网上找 ...
- 四个在家手机就能做的小项目，100+一天【10个项目】
1.14个在家端个手机就能做的小项目,100+一天 2.成本只需30块的产品,1000不到的播放量,做到70W月的业绩 3.抖音水果代购项目,搭建管道,真正自动收益 4.靠声音怎么变现?声音搬运亦能轻 ...
- 市面上的大前端岗位到底是做什么的？
市面上的大前端岗位到底是做什么的? 大前端这个词出现了不是一天两天了,但是这个岗位到底是做什么的,到目前也是仁者见仁智者见智,今天小编就带大家解开这个岗位的神秘面纱. 其实对于所谓的[大前端]技术,市 ...
最新文章
- JavaScript编码encode和decode escape和unescape
- vscode较详细注释的汇编语言hello world 输出程序,第一个汇编程序
- shell 进入hadoop_Hadoop Shell命令
- C++ concurrency::task实现异步编程（Windows）
- c++循环执行一个函数_javascript的五种循环，作为程序员，要根据场景和性能作出选择
- apktool 在mac下的使用 -反编译安卓apk文件
- 基于hadoop构建对象存储系统_Hadoop社区正式支持腾讯云对象存储COS
- MySQL之增删改查(以查为主）
- 简单应用定时器和监听器
- Java面试必问！Spring事务扩展机制(2)
- HtmlTextWriter类的学习
- 精益标准工时软件VIOOVI：没有标准工时，别谈精益改善！
- 驱动精灵万能网卡版单文件版 v9.61
- 工作英语: Meetings
- html粘性导航原理,position:sticky粘性定位
- ECC与Pairing前沿调研
- 相亲聊什么？想要避免尬聊，就从这6个话题入手
- 南卫理公会大学计算机科学,恭喜A同学获得南卫理公会大学计算机科学专业硕士通知书...
- UVALive-6528 Disjoint water supply
- ramdisk和linux PE,[PE教程]WINPE下如何再建一个Ramdisk盘