搜索到
10
篇与
html
的结果
-
Axure Rp 10安装激活教程 项目开发时工作的流程：产品经理根据需求画原型图-->设计师根据原型图画出设计图-->前端开发工程师根据设计图实现页面样式我们作为前端开发工程师，所有的项目的距离，字号，版式等等都不是我们拍脑子做出的决定，这个要根据设计师的设计图来进行测量，然后编写我们的代码。曾经我们需要通过ps或fw来进行测量详细的数据，现在测量原型图设计图是非常方便的。设计师通过使用AxureRp等软件，可以直接给出直观标注的原型图/设计图。而我们要如何下载安装激活这个软件呢？下载连接：https://go.axure.com/download-beta点击download直接下载然后安装即可。之后我们下载激活包，来进行汉化以及激活。{hide}http://datehoer.ys168.com/ 密码666666{/hide}下载完成后首先将激活软件解压我们将第一个文件里的内容放进软件的根目录下，然后打开软件。点击右面的eniter license to continue然后点击enter license key之后我们打开第二个文件夹Keygen双击打开keygen.exe文件第一个license是随便填的，然后第二个edition选择第一个pro edition然后点击generate即可出现key。之后复制过去即可完成激活。然后就可以正常使用了，并且软件完成了汉化 -
html教程:HTML5特性 {message}空白折叠现象{/message}文字和文字之间的多个空格、换行会被折叠成一个空格。标签的内壁和文字之间的空格会被忽略。{message}转义字符{/message}如果我们要输入<p></p>标签，只是输入这两个字的话，那么应该是不可以的，所以我们就需要使用转义字符了。常见的转义字符: 转义字符意义 <小于号 >大于号 空格(不会被折叠) ©版权符号 看到这里可能有人会问了，我前面说的是p标签，怎么后面说起了lt，gt什么的呢？其实这里我们如果要显示标签符号的话，那么就需要使用转义字符了，让他转成大于号和小于号，而不是直接输入这两个符号。{message}注释{/message}为代码书写清晰的是非常重要的，因为我们写上注释会为自己日后阅读代码或他人阅读代码时提供帮助。html5的注释写法是<!-- 内容 -->如果我们有vscode的话，可以用ctrl+/来加注释或解除注释。注释是给程序员看得，而用户是看不到的。
-
html教程：meta标签之keywords,description网页关键词和描述 <meta name="description" content="菜鸟搭建的博客,与你分享我建站路上的点点滴滴,分享自己的学习经历.日常分享python,web的学习经历" /> <meta name="keywords" content="web,python,php" />简单看一下我的keywords以及description。这其实分别就是关键词和描述。他们具体有什么作用呢？合理设置网站网页的关键词和页面描述，对seo有非常重要的效果。而seo是什么？seo(search engine optimization,搜索引擎优化)利用搜索引擎的规则来提高网站在搜索引擎内的自然排名，让网站在搜索引擎的结果内占据领先位置，获得品牌收益，并且seo是不花钱的。所以设置网页的关键词以及页面描述是非常重要的一个seo手段。
-
html教程：meta标签之title <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> 我们在vscode中，通过输入！来快捷补全html骨架，会发现有一些标签是一直存在的。而这次介绍一下title标签，title标签是用来设置网页标题的。文字会显示在浏览器的标签栏上，比如说我博客的title设置的是这样的 <@title> Datehoer的Blog-个人博客-技术分享 <@/title> 那么现实的样子则是下面的样子。title标签是非常有用的，对于网站的建设来说。除了显示在浏览器的标签栏上这个功能外，title还能当作被搜索引擎收录时显示的标题，网站为了吸引用户点击，合理设置title是非常有必要的。
-
html网页音乐播放器 其实一直想在网站上加一个音乐播放器的，但是当时搜索的是谷歌浏览器无法自动播放，所以就没准备加。并且其实当时也自己写了一个播放器， 网页音乐播放器 音乐播放器 html++css+js但是由于懒得写css代码，所以比较丑，然后就没有往网站上加，但是呢，有一个是我一直不明白的地方，就是当时浏览了一个网页，发现他的音乐可以直接播放，所以今天就来研究一下。其实也就是右键检查，来进行代码的查看，然后ctrl+u查看一下源代码，搜索到刚才看的位置，然后看他的这些代码有啥玄机。然后我就发现了一个库。Github：https://github.com/DIYgod/APlayer非常nice的一个库。Aplayer是一个功能强大的HTML5音乐播放器，Metingjs基于Aplayer插件封装好的插件，开箱即用。然后我们直接贴代码就好了，毕竟是人家封装好的库了，所以可以直接使用。支持的浏览器 Chrome Firefox Safari Internet Explorer 11 Microsoft Edge 选项 默认 描述 id(编号) require 歌曲ID /播放列表ID /专辑ID /搜索关键字 server(平台) require 音乐平台： netease ， tencent ， kugou ， xiami ， baidu type（类型） require song ， playlist ， album ， search ， artist auto（支持类种 类） options 音乐链接，支持： netease ， tencent ， xiami fixed（固定模式） false 启用固定模式，默认 false mini（迷你模式） false 启用迷你模式,默认 false autoplay（自动播放） false 音频自动播放，默认 false theme(主题颜色) #2980b9 默认 #2980b9 loop（循环） all 播放器循环播放，值：“all”，one”，“none” order(顺序) list 播放器播放顺序，值：“list”，“random” preload(加载) auto 值：“none”，“metadata”，“'auto” volume（声量） 0.7 默认音量，请注意播放器会记住用户设置，用户自己设置音量后默认音量将不起作用 mutex（限制） true 防止同时播放多个玩家，在该玩家开始播放时暂停其他玩家 lrc-type（歌词） 0 歌词显示 list-folded（列表折叠） false 指示列表是否应该首先折叠 list-max-height（最大高度） 340px 列出最大高度 storage-name（储存名称） metingjs 存储播放器设置的localStorage键 具体的代码可以去看GitHub库，里面有详细的解释。简单贴一下我们的这个底部小图标的代码吧。<meting-js server="netease" type="playlist" id="60198" fixed="true" autoplay="true" loop="all" order="random" preload="auto" list-folded="ture" list-max-height="500px" lrc-type="1"> </meting-js>非常的方便，html网页音乐播放器，开箱即用。
-
html 文字水平垂直居中 其实大概在许多初学html5的人，都会有一个疑惑，我怎么将文字在div内水平垂直居中呢？下面讲解一下如何水平垂直居中。简单看一个具体的效果吧。其实一般来说，我们做到水平居中是很容易的，那么垂直居中呢？html如何做到文字垂直居中？首先看一下如何做到水平居中----->我们通过一个简单的css属性来做到，text-align:center;其实说到这个属性，我们就不得不说一下align属性了，这个可以直接在行内写上，类似于class等。不过其实这个属性已经废弃了，我们现在还是推荐使用css属性来达到想要的效果。做到了水平居中的效果，然后我们再来看一下垂直居中。这个其实是利用div的height来做到，我们首先给div定义一个height，比如说我上面的案例给的是60px，然后我们给它一个关于height的属性--line-height属性，我们给div的高度是多少，那么给line-height的高度就是多少，我们给它加上一个line-height:60px:然后就得到了上面的效果了。其实居中这个效果很容易做到，比如说我们还可以利用margin:0 auto;来做到，当然只是该属性的居中，比如说给div居中。简单看一下这个html文字水平垂直居中的代码吧。.footer { line-height: 60px; text-align: center; clear: both; height: 60px; background-color: #6cf; } <footer class="footer"> <p>网站设计案例 2020年12月</p> </footer>其实还是非常简单的，利用行内高度来做到，line-height。如果有什么疑问，可以在评论区留言，我会在看到的第一时间进行回复的。
-
浅谈HTML DOM 这个其实还是因为一道题，问html中的dom根节点是哪个。这个其实我当时第一反应是body的，但是后来一想，根节点，也就是最头上的那个，没有自己的父元素，那这个肯定是html啊，然后百度一查，发现确实是html。在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。而在dom中，标签们都属于什么节点呢？接下来看一下解析。整个文档内容是一个文档节点每个HTML中的元素是都是元素节点HTML的元素内的文本是文本节点每个HTML属性是都属于属性节点注释则是注释节点而dom中的html文档则被当作节点树了。其实这个dom说简单也是非常简单的，只要记住每个节点都有自己的匹配对象就可以了，所有的标签都是可以通过dom来获取。简单举个例子，在<title>DOM 教程</title>中，元素节点 <title>，包含值为 "DOM 教程" 的文本节点。 获取节点其实JavaScript获取节点我认为最好的是通过id来获取，document.getElementById()这个方法，通过元素的id来获取改节点，然后进行操作。随便举个例子。<div id="aaa"></div><script>document.getElementById("aaa")</script>这样也就通过ById来获取该元素了。不光可以通过id来获取对象，还可以通过class，通过tag，通过name来获取。getElementById()getElementsByTagName()getElementsByClassName()最常用的就是这三个了，其实通过原生JavaScript来获取对象不是很方便，通过jQuery来获取的话实非常容易的，不过其实各有各的好处吧。一般操纵dom的都是方法，通过方法来对对象进行操作。 appendChild() 把新的子节点添加到指定节点。 removeChild() 删除子节点。 replaceChild() 替换子节点。 insertBefore() 在指定的子节点前面插入新的子节点。 createAttribute() 创建属性节点。 createElement() 创建元素节点。 createTextNode() 创建文本节点。 getAttribute() 返回指定的属性值。 setAttribute() 把指定属性设置或修改为指定的值。 比如说通过点击来使一个div修改颜色，可以是通过.style来操作，其实也可以通过上面的方法来操作的，也可以通过setAttribute()来修改，亦或者通过在style里添加一个没人用的class，给里面添加想要的属性，然后通过document.getElementById("").classList.add("");这个来增加上那个class，这样就会使div获得该class内的属性了。其实dom可以完成所有的html操作，甚至可以只写个html框架出来，然后其余的全部都靠JavaScript来进行修改的。这个也是目前最流行的方法了，通过JavaScript来渲染页面。
-
html实现图片旋转显示背面内容 其实说是html，实际上还是要通过css来实现具体效果的，毕竟实际上html是框架，而css则是填充框架的东西。这篇文章是介绍一个简单的案例，鼠标触碰图片，然后图片发生旋转，进而展现文字。可以看一下动图演示。其实这个是 通过transform旋转以及backface-visibiliity来实现图片隐藏的 。简单介绍一下这个html实现图片旋转显示背面文字的案例思路。首先是创建一个框架，用来储存这些图片以及文字。然后将搭配的图片文字储存在同一个div里，用以日后的地位修改。然后接下来先将文字进行旋转180°，之后设置hover属性即可，之所以要设置先旋转180°是因为如果不设置的话，那么图片旋转之后实现的效果就会使反向的，文字变成反向的文字，而我们事先旋转后，再进行触碰旋转的话，则会使的文字正向了。主要用到的还是上面两个属性， 一个transform: rotateY(180deg);这个是设置内容旋转180°，然后再一个是backface-visibility: hidden;这个是隐藏旋转的内容的背面 ，也就是你旋转之后，不会显示东西，这样子可以实现上面的效果了。<style> * { margin: 0; padding: 0; } body { background-color: #0d3462; } .wutai { width: 760px; height: 220px; margin: 100px auto; } .fu { width: 170px; height: 190px; margin: 10px; transition: 1.5s; transform-style: preserve-3d; float: left; position: relative; } .fu:hover { transform: rotateY(180deg); } .box { /* position: absolute; */ width: 170px; height: 190px; position: absolute; } .face { border: 2px solid #4b2518; backface-visibility: hidden; } .hip { border: 2px solid white; background-color: #4b2518; color: white; text-align: center; transform: rotateY(180deg); backface-visibility: hidden; } </style><body> <div class="wutai"> <div class="fu"> <div class="box face"> <img src="1.jpg" alt=""> </div> <div class="box hip"> <h3>浓缩咖啡</h3> </div> </div> <div class="fu"> <div class="box face"> <img src="2.jpg" alt=""> </div> <div class="box hip"> <h3>浓缩咖啡</h3> </div> </div> <div class="fu"> <div class="box face"> <img src="3.jpg" alt=""> </div> <div class="box hip"> <h3>浓缩咖啡</h3> </div> </div> <div class="fu"> <div class="box face"> <img src="4.jpg" alt=""> </div> <div class="box hip"> <h3>浓缩咖啡</h3> </div> </div> </div></body>具体详情内容可以通过上面的代码进行自我测试，其实最容易实现效果的就是先全部复制上去，然后再将不明白的属性给加上注释，查看发生了什么变化，如果没有变化，可以先记下来然后继续注释别的内容，最后将实在不明白效果的复制到百度进行查询。如果有什么不懂的可以在评论区留言，我会在看到的第一时间进行回复的。
-
html常用名词解释 其实好多都是我们日常接触到的，但是它的实际上的意思却并不明白是啥。所以就有了这篇介绍html名词的文章。 其实最最最经常接触的就是html了，这个大家都知道是做网页用的，但是它叫什么名字呢？html叫做超文本标记语言。 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 而跟html最搭的是css，css则叫做层叠样式表。 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 这两个基本上就是组合在一起出现的。 然后在接下来就是关于js的了。 JavaScript应该算作前端最常用的脚本语言。 JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 在接下来就是JavaScript常用的框架了。 jQuery大概是最常用的一个框架了，它非常的便捷，是一个非常优秀的JavaScript框架。 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 DOM对象，这个其实在我初学的时候我以为这个是什么呢，老师一直说很难很难，而实际上这些东西吧，大概就是只要理解了就会变得不是很难，毕竟勤能补拙，这些东西如果经常使用的话，那么其实还是会一些的。 HTML DOM 定义了访问和操作 HTML 文档的标准。 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。 UI，泛指用户的操作界面 用户界面(User Interface)是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。 css3，这个其实跟html5一样，都是升级版，最新的。还有比如说JavaScript，这个其实是ECMAScript5.1版本，然后最新的是ES6了。 CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准。 css hack，这个可能就有人不知道了，css hack通过在CSS样式中加入一些特殊的符号，区别不同浏览器制作不同的CSS样式的设置，解决浏览器显示网页特效不兼容性问题。 CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。 json，这个其实许多的编程语言都会提到，简单说一下就是储存空间小的储存文件。这样说其实不准确，其实这个json是一种轻量级的数据交换格式。 JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。 cookie，cookie大概许多人都知道，这个是储存浏览器和服务器的一些交换信息的。有时也用其复数形式 Cookies，指某些网站为了辨别用户身份、跟踪session而储存在用户本地终端上的数据（通常经过加密）。后期会专门发一篇文章讲一下cookie。 Cookie，有时也用其复数形式 Cookies。类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。 svg，可缩放矢量图形，是基于可扩展标记语言XML（标准通用标记语言的子集）用于描述二维矢量图形的一种图形格式。 SVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。 以上就是一些常用的html名词了，其实也叫做专业术语。不过其实还有许多的特殊的名词，比如说vue，比如说nodejs，这些其实都是中后期开始学习的内容了。 如果有什么不懂的，可以在评论区留言，我会在看到的第一时间进行回复的。 最后说一句题外话，其实最重要的东西就是一颗学习的心，只要想学，其实完全可以自学的，毕竟现在搜索引擎这么强大，很难有找不到的东西，只要学会使用百度。
-
网页音乐播放器 音乐播放器 html+css+js 首先准备工作为jquery,html,css,javascript别的其实并不需要，而且其实JavaScript也不需要。最初是准备不适用jQuery的，但是发现用jQuery只需要几行代码就能实现的功能，而用原生的JavaScript却需要好多，而且也不容易实现，所以最后才准备使用jQuery了。jQuery的安装各位应该都会吧，如果不会的话，我放一下代码。通过使用nodejs来安装，在你的js文件夹里按住shift之后鼠标右键，选择打开powershell窗口，之后只需要输入cnmp install jquery即可亦或者直接去中文站下载也行，这里不多讲述了。列表的点击显示和隐藏就是通过jQuery来实现的，很简单，如果使用JavaScript还是那句话，麻烦。之后文字的打字机效果是通过typed这个库来实现的，github跳转 链接其实这个效果加不加都是无所谓的，只是好看了一丢丢而已，并且其实我css只是随便写了一下，完全可以稍微优化一下css。目前的效果也就是点击列表的歌曲，会自动切换音乐和图像，然后上面的目前播放的名字也会换成该音乐的名字。这个网页实现音乐播放器的功能很容易，基本上一眼就能看懂了，后期可能会加一些别的效果，并且把样子做一下，搞一下css。上下代码，然后进行一些简单的讲解吧。//js，名字我是叫的music.js// 记录图片和音乐以及正在播放的名字var mslists = ['./music/jar_of_love.mp3', './music/see_you_again.mp3', './music/sunshine_in_the_rain.mp3'];var imglists = ['http://p1.music.126.net/8jt2KnGDF0qMP9JbidOtVA==/573945069746475.jpg', 'http://p2.music.126.net/JIc9X91OSH-7fUZqVfQXAQ==/7731765766799133.jpg', 'http://p1.music.126.net/bHQlt-zzDQlsnPydiYKsHw==/109951165124500529.jpg'];var namelists = ["Jar of love", 'See you again', 'Sunshine in the rain'];// 点击隐藏和显示$(".liebiao").click(function() {if ($(".msxulie").is(":hidden")) {$(".msxulie").show();} else {$(".msxulie").hide();}});// 文字效果window.onload = function() {var typed = new Typed(".zzbf", {strings: ['', '音乐播放器正在播放:'],startDelay: 300,typeSpeed: 100,loop: true,backSpeed: 50,showCursor: true,cursorChar: '➼'});} // 点击切换音乐$(".jol").click(function() {$(".mscontrol").attr("src", mslists[0]);$(".msimg").attr("src", imglists[0]);$(".msplayingtext").html(namelists[0]);$(".mscontrol")[0].play();// suoyin = 0;// wenzixiaoguo(suoyin);});$(".sya").click(function() {$(".mscontrol").attr("src", mslists[1]);$(".msimg").attr("src", imglists[1]);$(".msplayingtext").html(namelists[1]);$(".mscontrol")[0].play();// suoyin = 1;// wenzixiaoguo(suoyin);});$(".sitr").click(function() {$(".mscontrol").attr("src", mslists[2]);$(".msimg").attr("src", imglists[2]);$(".msplayingtext").html(namelists[2]);$(".mscontrol")[0].play();// suoyin = 2;// wenzixiaoguo(suoyin);});<!-- html代码，这个的名字是无所谓的 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet" href="./css/index.css"></head><body> <div class="msplayer"> <img class="msimg" src="http://p1.music.126.net/8jt2KnGDF0qMP9JbidOtVA==/573945069746475.jpg" alt="音乐图片"> <audio controls="controls" class="mscontrol"> <source src="./music/jar_of_love.mp3"> </audio> <input type="button" value="列表" class="liebiao"> <div class="msxulie"> <ul> <li class="sya">See you again</li> <li class="jol">Jar of love</li> <li class="sitr">Sunshine in the rain</li> </ul> </div> <div class="msplaying"> <span class="zzbf"></span><span class="msplayingtext">Jar of love</span> </div> </div> <script src="./js/node_modules/jquery/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script> <script src="./js/music.js"></script></body></html>/* css代码，这个我是叫的index.css *//* 播放器位置 */.msplayer { float: left; background-color: aqua; border-radius: 20%;}/* 播放器图片 */.msplayer .msimg { margin-top: 5px; margin-left: 5px; margin-bottom: 5px; width: 60px; height: 60px; border-radius: 50%;}/* 播放器控制器 */.msplayer .mscontrol { margin-top: 5px; margin-left: 5px; margin-right: 5px; width: 200px;}/* 播放器列表按钮 */.msplayer .liebiao { position: relative; bottom: 25px;}/* 音乐列表 */.msplayer .msxulie{ text-align: center; width: 315.14px; position: absolute; display: block; background-color: bisque; top: 20px; left: 315.14px; border-radius: 20%; cursor: pointer;}/* 正在播放 */.msplaying { position: absolute; top: 0px; left: 80px; font-size: 10px;}具体代码就是上面的这些了，比较需要注意的就是js里面的那个记录图片，音乐以及名字的那三个数组，如果文件是储存在本地的话，记得他们的位置是相对于那个html文件的，而不是js文件，所以记得修改一下，我之前就是相对于js文件所以一直报错，哈哈。然后再就是那个音乐播放的效果，不能更改里面的source的src值，因为更改了这个不会让页面重新读取数据，而应该修改外面的audio的src值，这个是我百度查了好久没看到，然后自己测试的时候误打误撞出来的，然后在就是点击列表里的音乐名字，就会切歌，这个实现其实还是很容易的$(".mscontrol").attr("src",mslists[0]);$(".msimg").attr("src",imglists[0]);$(".msplayingtext").html(namelists[0]);$(".mscontrol")[0].play();第一行是获取audio的src值，把他设置为我们数组里的值，第二行是更改图片，第三行是修改名字，最后一行其实加不加无所谓的，就是一个自动播放效果，如果换歌就进行自动播放。然后我那两行注释是修改那个typed的效果的，但是发现函数执行了就很难停止，所以就给注释掉了，效果也是很容易的，就是将那个typed效果创建成一个函数，之后调用即可，然后在里面设置一个变量用于接受我们传递的参数就好了，不过目前来说不会怎么停止已经运行的函数，所以这个想法就搁浅了。css代码没什么难度吧，应该，就是简单的浮动定位效果，把列表给浮动过去，然后html也是没什么难度的，自己看一眼就好了。如果有什么不懂的可以在评论区评论，我会在看到的第一时间回复的。
