超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
详细介绍编辑
由来
超文本标记语言
万维网上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。[1]
定义
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，
超文本标记语言
它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
语言特点
超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：
简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
书写方式
Html编辑工具它其实是文本，它需要浏览器的解释，它的编辑器大体可以分为三种，
基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样就方便浏览器认出直接解释执行了。
半所见即所得软件，
如：FCK-Editer、E-webediter等在线网页编辑器；
尤其推荐：Sublime Text代码编辑器（由Jon Skinner开发，Sublime Text 2收费但可以无限期试用）。
所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如：
AMAYA（出品单位：万维网联盟）；
FRONTPAGE（出品单位：微软）；
Dreamweaver（出品单位：Adobe）。
所见即所得软件与半所见即所得的软件相比，开发速度更快，效率更高，且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂，不利于大型网站的多人协作和精准定位等高级功能的实现。
字符集
字符集在网页中除了可显示常见的美国信息交换标准代码（外语缩写：ASCII）字符和汉字外，HTML还有许多特殊字符，它们一起构成了HTML字符集。有2种情况需要使用特殊字符，一是网页中有其特殊意义的字符，二是键盘上没有的字符。HTML字符可以用一些代码来表示，代码可以有2种表示方式。即字符代码（命名实体）和数字代码（编号实体）。字符代码以“&”符开始，以分号";"结束，其间是字符名，如®。数字代码也以“&#”符开始，以分号";"结束，其间是编号，如?。
整体结构编辑
一个网页对应多个HTML文件，超文本标记语言文件以.htm（磁盘操作系统DOS限制的外语缩写）为扩展名或.html（外语缩写）为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。
超文本标记语言标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：
），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。
标记符,说明该文件是用超文本标记语言（本标签的中文全称）来描述的,
HTML代码它是文件的开头;而,则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。
头部内容
关于HTML (4张)
；这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符，其中标题标记符用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用作书签和收藏清单。
设置文档标题和其它在网页中不显示的信息，比如direction方向、语言代码Language Code（实体定义!ENTITY % i18n）、指定字典中的元信息、等等。
以下表格列出了 HTML head 元素：
标签
描述
定义了文档的信息
</p><p>定义了文档的标题</p><p><base></p><p>定义了页面链接标签的默认链接地址</p><p><link></p><p>定义了一个文档和外部资源之间的关系</p><p><meta></p><p>定义了HTML文档中的元数据</p><p><script></p><p>定义了客户端的脚本文件</p><p><style></p><p>定义了HTML文档的样式文件</p><p>主体内容</p><p>超文本标记语言<body></body>；，网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。</p><p> </p><p>发展历史</p><p>超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）：</p><p>HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时</p><p>HTML 3.2——1997年1月14日，W3C推荐标准</p><p>html 5</p><p>HTML 4.0——1997年12月18日，W3C推荐标准</p><p>HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准</p><p>HTML 5——2014年10月28日，W3C推荐标准[4] （详见本处参考资料）</p><p>ISO/IEC 15445:2000（“ISO HTML”）——2000年5月15日发布，基于严格的HTML 4.01语法，是国际标准化组织和国际电工委员会的标准。</p><p>Wijmo是基于HTML5、jQuery、CSS3和SVG的一个控件包，能够满足构建当今Web系统的需求。基于Wijmo，您的系统运行将更加快速和流畅，外观也会更加引人入胜。Wijmo中所有新的控件都是在符合最新的UI设计潮流的基础上，对新的以及改良后的主题进行封装。优美的、专业的控件外观会让您的应用程序引人注目。比如 ComponentOne Studio for ASP .NET Wijmo 控件包内置的6个主题，同时可以使用jQuery UI项目提供的 30 多个主题，甚至可以使用 ThemeRoller 创建属于您自己的系统主题。</p><p>HTML没有1.0版本是因为当时有很多不同的版本。有些人认为蒂姆·伯纳斯-李的版本应该算初版，这个版本没有IMG元素。当时被称为HTML+的后续版的开发工作于1993年开始，最初是被设计成为“HTML的一个超集”。第一个正式规范为了和当时的各种HTML标准区分开来，使用了2.0作为其版本号。HTML+的发展继续下去，但是它从未成为标准。</p><p>HTML3.0规范是由当时刚成立的W3C于1995年3月提出，提供了很多新的特性，例如表格、文字绕排和复杂数学元素的显示。虽然它是被设计用来兼容2.0版本的，但是实现这个标准的工作在当时过于复杂，在草案于1995年9月过期时，标准开发也因为缺乏浏览器支持而中止了。3.1版从未被正式提出，而下一个被提出的版本是开发代号为Wilbur的HTML 3.2，去掉了大部分3.0中的新特性，但是加入了很多特定浏览器，例如Netscape和Mosaic的元素和属性。HTML对数学公式的支持最后成为另外一个标准MathML。</p><p>HTML 4.0同样也加入了很多特定浏览器的元素和属性，但是同时也开始“清理”这个标准，把一些元素和属性标记为过时，建议不再使用它们。HTML的未来和CSS结合会更好。</p><p>HTML 5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发布。</p><p>XHTML1.0——发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布。</p><p>XHTML 1.1，于2001年5月31日发布，W3C推荐标准。</p><p>XHTML 2.0，W3C工作草案。</p><p>XHTML 5，从XHTML 1.x的更新版，基于HTML 5草案。</p><p>HTML4.01 是常见的版本。</p><p> </p><p>相关要求</p><p><br> </p><p>HTML在编辑超文本标记语言文件和使用有关标记符时有一些约定或默认的要求。</p><p> </p><p>文本标记语言源程序的文件扩展名默认使用htm（磁盘操作系统DOS限制的外语缩写为扩展名）或html（外语缩写为扩展名），以便于操作系统或程序辨认，除自定义的汉字扩展名。在使用文本编辑器时，注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。</p><p> </p><p>超文本标记语言源程序为文本文件，其列宽可不受限制，即多个标记可写成一行，甚至整个文件可写成一行；若写成多行，浏览器一般忽略文件中的回车符（标记指定除外）；对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号（实体符）“ （注意此字母必须小写，方可空格）”表示非换行空格；表示文件路径时使用符号“/”分隔，文件名及路径描述可用双引号也可不用引号括起。</p><p> </p><p>标记符中的标记元素用尖括号括起来，带斜杠的元素表示该标记说明结束；大多数标记符必须成对使用，以表示作用的起始和结束；标记元素忽略大小写，即其作用相同，但完整的空格可使用特殊符号“ （注意此字母必须小写，方可空格）”；许多标记元素具有属性说明，可用参数对元素作进一步的限定，多个参数或属性项说明次序不限，其间用空格分隔即可；一个标记元素的内容可以写成多行。</p><p> </p><p>标记符号，包括尖括号、标记元素、属性项等必须使用半角的西文字符，而不能使用全角字符。</p><p> </p><p>HTML注释由"<!--"号开始，由符号”-->“结束结束，例如<!--注释内容-->。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号，即被标识为注释，不予显示。</p><p>常见实体</p><p><br> </p><p> 显示结果</p><p> 描述</p><p> 实体名称</p><p> 实体编号</p><p> 空格</p><p> </p><p> <</p><p> 小于号</p><p> <</p><p> << p=""><!--</p><p> ></p><p> 大于号</p><p> ></p><p> ></p><p> &</p><p> 和号</p><p> &</p><p> &</p><p> "</p><p> 引号</p><p> "</p><p> "</p><p> ''</p><p> 撇号</p><p> ' (IE不支持)</p><p> ''</p><p> ￠</p><p> 分</p><p> ¢</p><p> ￠</p><p> ￡</p><p> 镑</p><p> £</p><p> ￡</p><p> ￥</p><p> 日元</p><p> ¥</p><p> ￥</p><p> ?</p><p> 欧元</p><p> €</p><p> €</p><p> §</p><p> 小节</p><p> §</p><p> §</p><p> ?</p><p> 版权</p><p> © ?</p><p> ?</p><p> 注册商标</p><p> ®</p><p> ?</p><p> ? 商标</p><p> ™</p><p> ?</p><p> ×</p><p> 乘号</p><p> ×</p><p> ×</p><p> ÷</p><p> 除号</p><p> ÷</p><p> ÷</p><p> </p><p> </p><p>标记</p><p>数据类型</p><p>html示例超文本标记语言定义了多种数据类型的元素内容，如脚本数据和样式表的数据，和众多类型的属性值，包括ID、名称、URI、数字、长度单位、语言、媒体描述符、颜色、字符编码、日期和时间等。所有这些数据类型都是专业的字符数据。</p><p>类型描述</p><p>为了说明文档使用的超文本标记语言标准，所有超文本标记语言文档应该以“文件类型声明”（外语全称加缩写<!DOCTYPE>）开头，引用一个文件类型描述或者必要情况下自定义一个文件类型描述。举例来说：</p><p>HTML 5由于没定义一个文档类型定义（外语缩写：DTD），只包含根元素的它所以如此简单。</p><p>公共标识符</p><p>系统标识符</p><p>说明</p><p>-//W3C//DTD HTML 4.0//EN[3] </p><p>超文本标记语言（版本：4.0）、万维网联盟。</p><p>-//W3C//DTD HTML 4.01//EN </p><p>超文本标记语言（版本：4.01）、万维网联盟。</p><p>1</p><p><!DOCTYPE HTML></p><p>这个声明说明文档服从超文本标记语言 4.01的严格文件类型描述，这个标准是严格结构化的，使用层叠样式表（外语缩写：CSS）来做格式化。有时是否存在一个合适的文件类型描述会影响一个浏览器显示网页的方式。</p><p>除了超文本标记语言 4.01的严格文件类型描述之外，超文本标记语言 4.01也提供“过渡”和“框架集”文件类型描述。</p><p>过渡文件类型描述是向严格的文件类型描述过渡的缓冲。</p><p>框架集文件类型描述则针对包含框架元素的网页。</p><p>元素</p><p><html><ml> 创建一个超文本标记语言文档。</p><p><head></head> （头）设置文档标题和其它在网页中不显示的信息，比如direction方向、语言代码Language Code（见实体定义!ENTITY % i18n）、指定字典中的元信息、等等。</p><p><BASE> 文档中不能被该站点辨识的其它所有链接源的URL（统一资源定位器）</p><p><LINK> 定义一个链接和源之间的相互关系，比如引用一个层叠样式表（英文缩写：css）、做一个链接到一个脚本、为某文件做一个链接（可打印的版本）、文档特定的工具栏/菜单。</p><p><script></script>脚本语句标签，比如引用一个javascript脚本。</p><p><body></body>文档体，文档的可见部分。</p><p><title> 设置文档的标题。
当然，如果不使用以上基本框架结构，而直接使用在实体部分中出现的标记符，在浏览器下也可以解释执行。
内容描述
最大的标题（一号标题）
预先格式化文本 （英文全称：PREformatted）
下划线（英文全称：Underline）
黑体字 （英文全称：Bold）
斜体字 （英文全称：Italics）
打字机风格的字体
引用，通常是斜体
强调文本（通常是斜体加黑体、英文全称：EMphasize）
<> 加重文本（通常是斜体加黑体）
设置字体大小从1到7，颜色使用名字或RGB（中文全称：红绿蓝）的十六进制值
基准字体标记
字体加大
字体缩小
加删除线
键盘字（英文全称：KeyBoarD）
范例（英文全称：SAMPle）
变量（英文全称：VARiable）
向右缩排（向右缩进、块引用）
述语定义（英文全称：DeFiNe）
地址标记
上标字 （英文全称：SUPerscript）
下标字（英文全称：SUBscript）
<![CDATA[...]]>；固定宽度字体（在文件中空白、换行、定位功能有效）
<![CDATA[...</plaintext>；固定宽度字体（不执行标记符号）</p><p><listing>...<sting> 固定宽度小字体</p><p><font color=00ff00>...</font>；字体 颜色</p><p><font size=1>...</font>；字体 大小等于1（最小）。</p><p><font style =''font-size:100 px''>...</font>；字体 样式等于无限增大（100像素）</p><p>格式标志标签</p><p><p></p> 创建一个段落 （英文全称：Paragraphs）</p><p><p align=""> 将段落按左、中、右对齐</p><p><br/>定义新行</p><p><blockquote></blockquote> 从两边缩进文本</p><p><dl><> 定义列表（英文全称：DefinitionList）</p><p><dt> 放在每个定义术语词前（定义术语、英文全称：DefinitionTerm）</p><p><dd> 放在每个定义之前（定义说明、英文全称：DefinitionDescription）</p><p><ol></ol> 创建一个标有序的列表，默认前面有数字，从数字“1”开始计数，依次叠加，也可以设置为字母或从任何自然数开始计数的列表项 （有序列表、外语全称：OrderedList）</p><p><ul></ul> 创建一个无序的列表，默认前面标有圆点，也可以自己设置为none或者其他形状，如空心圆、方块等。（无序列表、外语全称：UnorderedLists）</p><p><li> 放在每个列表项之前，若在<ol></ol>；之间则每个列表项加上一个数字，</p><p>若在<ul></ul>；之间则每个列表项加上一个圆点</p><p><div align=""></div> 用来排版大块HTML段落，也用于格式化表</p><p><MENU> 选项清单</p><p><DIR> 目录清单</p><p><nobr><br> 强行不换行（英文全称：nobreaking）</p><p><hr size=''9'' width=''80%'' color=''ff0000''>；水平线（设定宽度、外语全称：horizontalrule）</p><p><center></center> 水平居中</p><p>网页表格标签</p><p>由于表格可以精确控制文本和图像在网页中的显示位置，所以在很多网站的主页中一般都使用表格来进行布局。</p><p> 表格的基本结构如下：</p><p> </p><p><Table></p><p> </p><p> <caption></caption></p><p> </p><p> <tr></p><p> </p><p> <th></th><th></th>...</p><p> </p><p> </tr></p><p> </p><p> <tr></p><p> </p><p> <td></td><td></td>...</p><p> </p><p> </tr></p><p> </p><p> <tr></p><p> </p><p> <td></td><td></td></p><p> </p><p> </tr></p><p> </p><p> <tr></p><p> </p><p> <td></td><td></td></p><p> </p><p> </tr></p><p> </p><p> ...</p><p> </p><p> </Table></p><p> </p><p> <Table>定义整个表格，即表格的内容要放在<Table>和</Table>标记中；在<Table>中的主要属性：border属性显示表格的边框，width, height属性定义表格的大小。<caption>标记符用来定义表格的标题。</p><p> 表格的表示以行为单位，在行中包含列。其中：一个<tr>...</tr>标记表示一行；一个<td>...</td>标记表示一列；<th>... </th>定义表头，一般可以不用。</p><p>链接标志表格标志</p><p>1</p><p>2</p><p><a</p><p> href="一个统一资源定位器"></a></p><p>：创建超文本链接。</p><p>1</p><p>2</p><p><a</p><p> name="书签页"></a></p><p>：创建位于文档内部的书签。</p><p>1</p><p>2</p><p><a</p><p> href="#书签页"></a></p><p>：创建指向位于文档内部书签的链接。</p><p>使用</p><p>每种HTML标记符在使用中可带有不同的属性项，用于描述该标记符说明的内容显示不同的效果。正文标记符中提供以下属性来改变文本的颜色及页面背景。</p><p>BGCOLOR（外语全称：BackgroundColor）用于定义网页的背景色，BACKGROUND用于定义网页背景图案的图像文件</p><p>TEXT用于定义正文字符的颜色，默认为黑色</p><p>LINK用于定义网页中超级链接字符的颜色，默认为蓝色</p><p>VLINK（外语全称：VisitedLINK）用于定义网页中已被访问过的超接链接字符的颜色，默认为紫红色</p><p>ALINK（中文全称：活动链接）用于定义被鼠标选中，但未使用时超链字符的颜色，默认为红色</p><p>例如：标记将定义页面的背景色为黑色，正文字体显示为白色。</p><p>以上属性使用中，需要对颜色进行说明，在HTML中对颜色可使用3种方法说明颜色属性值，即直接颜色名称、16进制颜色代码、10进制RGB码。</p><p>直接颜色名称，可以在代码中直接写出颜色的英文名称。如<font color="red">我们</font>，在浏览器上显示时就为红色。</p><p>16进制颜色代码，语法格式： #RRGGBB 。16进制颜色代码之前必须有一个“#”号，这种颜色代码是由三部分组成的，其中前两位代表红色，中间两位代表绿色，后两位代表蓝色。不同的取值代表不同的颜色，他们的取值范围是00--FF。如<font color="#FF0000">我们</font>，在浏览器上显示同样为红色。</p><p>10进制RGB码，语法格式： RGB(RRR,GGG,BBB) 。在这种表示法中，后面三个参数分别是红色、绿色、蓝色，他们的取值范围是0--255。以上两种表达方式可以相互转换，标准是16进制与10进制的相互转换。如<font color="rgb(255,0,0)">我们</font>，在浏览器上显示字体为红色。</p><p>使用图案代替背景颜色，可以使页面更生动、美观。</p><p>如今用一张大图当做网页的背景已经成为一种流行趋势，高质量的精美照片和抽象的设计图片能够给网站的外观带去深刻的影响。</p><p>可将图像文件“图像.gif”所表示的一幅图像作为页面的背景，若图像幅面不够大，将会将图像重复平铺在窗口中。</p><p>注释</p><p>1</p><p><!--百度百科：这是壹条注释，且不会呈现在渲染器或者网络浏览器之上。--></p><p>其他版本</p><p>和XHTML之间的差异：</p><p>xmlns 属性在XHTML中是必需的，但在 HTML中不是。不过，即使XHTML文档中的 <html> 没有使用此属性，W3C 的验证器也不会报错。这是因为 "xmlns=百度" 是一个固定值，即使您没有包含它，此值也会被添加到 <html> 标签中。</p></div>
</div>
</div>
<div class="work_tags">
<div class="cl w880 p30">
<!-- 之前的标签位置 -->
</div>
<div class="w880 operate">
<div class="y">
<span>更新：2017-04-24</span>
</div>
<div style="display: flex;justify-content: space-between;">
<!-- 点赞按钮 -->
<div class="z2 p-like" title="点赞" data="like">
<p><i class="icon-zan_s"></i></p>
<em class="num like-num" style="font-size: 18px">1</em>
</div>
<!-- 投票按钮 -->
<!-- -->
</div>
<div>
<div class="y1 cl" style="float: right;">
<!-- -->
<!-- 下载按钮 -->
<!-- 收藏按钮 -->
<div class="z">
<div class="cl">
<em class="z" data="add" id="p-collect">收藏</em>
<span class="z">
<i class="icon-shandian"></i>
</span>
</div> <p id="favnum"><i>1</i></em>人已收藏</p>
</div>
</div>
<!-- 分享按钮 -->
<div class="z1" style="float: right;">
<a href="javscript:;" id="share">
分享
</a>
</div>
<!-- 推荐按钮 -->
<div class="z1" style="float: right;">
</div>
</div>
</div>
<!-- 推荐作品被看到的相关信息 -->
</div>
<div class="work_author">
<div class="w880 cl">
<div class="z">
<div class="head_top cl">
<a href="//i.ui.cn/ucenter/925055.html" class="z head_img"><img src="https://imgavater.ui.cn/avatar/5/5/0/5/925055.jpg?imageMogr2/auto-orient/crop/!875x875a0a22/thumbnail/148x148"></a>
<div class="cl z">
<p class="author_name">
<a href="javascript:;">奇迹时代丶</a>
</p>
<p class="self_intro">
嗯，不错，这就是我要的感觉！ </p>
</div>
</div>
<ul class="self_num cl">
<li class="z">
<p class="detail_num">40</p>
<p class="detail_name">作品</p>
</li>
<li class="line z"></li>
<li class="z">
<p class="detail_num">34</p>
<p class="detail_name">粉丝</p>
</li>
<li class="line z"></li>
<li class="z">
<p class="detail_num">2</p>
<p class="detail_name">关注</p>
</li>
</ul>
</div>
<ul class="works_self cl y">
<li class="z">
<a href="/detail/237551.html" target="_blank"><img src="//img.ui.cn/data/file/9/3/1/1154139.jpg?imageMogr2/auto-orient/format/jpg/strip/thumbnail/!240>/quality/90/" alt="数据可视化 科技感界面"></a>
</li><li class="z">
<a href="/detail/237133.html" target="_blank"><img src="//img.ui.cn/data/file/7/6/2/1152267.jpg?imageMogr2/auto-orient/format/jpg/strip/thumbnail/!240>/quality/90/" alt="小散户金融理财APP"></a>
</li><li class="z">
<a href="/detail/237040.html" target="_blank"><img src="//img.ui.cn/data/file/5/9/8/1151895.jpg?imageMogr2/auto-orient/format/jpg/strip/thumbnail/!240>/quality/90/" alt="来一波引导页"></a>
</li><li class="z">
<a href="/detail/237029.html" target="_blank"><img src="//img.ui.cn/data/file/5/4/8/1151845.jpg?imageMogr2/auto-orient/format/jpg/strip/thumbnail/!240>/quality/90/" alt="电商banner"></a>
</li> </ul>
</div>
</div>
</div>
<!-- 评论相关 -->
<div class="l-box l-box-a" id="to-comment">
<div class="comment-tags w880">
<!-- 标签 -->
<div class="new_tags">
<div class="new_tags_title">相关标签</div>
<a href="https://s.ui.cn?keywords=经验" target="_blank">经验</a><a href="https://s.ui.cn?keywords=用户体验" target="_blank">用户体验</a><a href="https://s.ui.cn?keywords=分享" target="_blank">分享</a><a href="https://s.ui.cn?keywords=教程" target="_blank">教程</a>
</div>
<!-- 评论 -->
<div class="comment-box" style="width:70%">
<div class="comment-login-box ">
<div class="comment-login cl">
<p>大牛，别默默的看了，快登录帮我点评一下吧！:)</p>
<a class="btn btn-primary btn-fixed-100 y" href="https://ui.cn/login.html" title="登录">登录</a>
<a class="btn btn-nature y" href="https://ui.cn/reg.html" title="立即注册">立即注册</a>
</div>
</div> <!-- 评论列表 -->
<ul class=" comment-list"></ul>
</div>
</div>
<div class="guess_you_like">
<div class="w880">
<h3>猜你喜欢</h3>
<ul class="guess_li cl"></ul>
</div>
</div>
</div>
<!-- 浮动在顶部的赞、收藏、评论导航条 -->
<div class="top_bar">
<div class="bar_nav">
<!-- 作品属性20220314添加 -->
<div style="float: right;line-height: 60px;margin-top: -1px;" class="msg z_a">
<span>
<em>
2017-04-24 </em>
</span>
<span>
<em class="ver_line"></em>
</span>
<span>
<a href="https://s.ui.cn/index.html?type=experience&subcatid=16" target="_blank"><em>好文转载</em></a>
<em class="xiexia"></em>
<a href="/exp.html?scatid=15" target="_blank"><em>经验/观点</em></a> <em class="xiexia"></em>
<span>
<em class="copy_right">
<i class="icon-copyright1" title="不使用原创授权"></i> </em>
</span>
<em class="ver_line"></em>
<span><em>原作者：</em></span>
<span><em>未知</em></span>
<em class="ver_line"></em>
<a><em class="tip-off act-tip-off">举报</em></a>
<!-- 管理员标记按钮 -->
</span>
<span>
<em class="ver_line"></em>
</span>
<span><i class="icon-icon_browse" title="浏览数"></i><em class="ll_number">1055</em></span>
<span><i class="icon-tool_icon_collection" title="收藏数"></i><em class="sc_number">1</em></span>
<span><i class="icon-inspiration_icon_like_nor" title="点赞数"></i><em class="dz_number">1</em></span>
<span><i class="icon-tool_icon_comment" title="评论数"></i><em id="ping-num" class="pl_number">0</em></span>
</div>
<div class="flex-title" style="">
<a href="https://talk.ui.cn/detail/4641" target="_blank">
</a>
<p class="z" style="overflow: hidden;">
什么是HTML <div style="padding-top: 12px;">
<span class="hot_num_pos_a" title="作品热度"><i class="icon-icon_heat"></i><span>0.0</span>°</span> </div>
</p>
</div>
</div>
</div>
</div>
<!-- 底部浮动投票条 -->
<!-- 浏览作品图 -->
<div class="fix-cover">
<div class="swiper-container">
<div class="swiper-wrapper"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<!-- 荣誉墙 -->
<style>
.fix_medal {
display: none;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1001;
}
.fix_medal i {
position: absolute;
z-index: 1001;
/*width: 40px;
height: 40px;*/
text-align: center;
line-height: 38px;
border-radius: 40px;
/*right: 50px;
top: 30px;*/
/*border: 2px solid rgba(255, 255, 255, .8);*/
/*color: white;*/
cursor: pointer;
/*background-color: rgba(255, 255, 255, .2);*/
width: 100%;
height: 100%;
top: 0px;
right: 0px;
}
.fix_medal .medal{
position: absolute;
width: 100%;
height: 100vh;
/* background-color: #fff;
border-radius: 36px;
overflow: hidden;
margin: 100px auto 0;*/
z-index: 2000;
background-color:rgba(0,0,0,0.2);
}
.fix_medal .medal>div{
width:953px;margin: auto;
height: 100vh;
overflow:hidden;
margin-top:100px;
}
.fix_medal .medal>div>div{
width:970px;margin: auto;
height: 100vh;
}
</style>
<div class="fix_medal">
<i ></i>
<div class="medal" scroll="no">
<div>
<div>
<iframe src="https://i.ui.cn/Iframe/medal?rel=925055" width="100%" height="100%" scrolling="auto"
frameBorder=0 id="frame_full" data-id="925055"></iframe>
</div>
</div>
</div>
</div>
<!-- 打开弹框按钮 data-target="#modal-inform" -->
<div id="modal-inform" class="modal">
<div class="modal-effect">
<div class="modal-letter">
<i class="icon-close popup-close"></i>
<div class="popup-info cl">
<h2 class="">举报理由:</h2>
<label for="examinetype1">
<input id="examinetype1" type="radio" name="examinetype" value="1" checked="">垃圾、广告信息
</label>
<label for="examinetype2">
<input id="examinetype2" type="radio" name="examinetype" value="2">色情、低俗内容
</label>
<label for="examinetype3">
<input id="examinetype3" type="radio" name="examinetype" value="3">时政敏感话题
</label>
<label for="examinetype4">
<input id="examinetype4" type="radio" name="examinetype" value="4">其他原因
</label>
<textarea style="display:none;" class="popup-text popup-text-let" id="textarea-report" name="examinecomment"
type="text"></textarea>
</div>
<div class="mtm cl">
<button id="report-submit" type="submit" class="btn btn-primary y">确定</button>
<span class="tip y">Ctrl+Enter</span>
</div>
</div>
</div>
</div>
<!-- 作品举报 -->
<div class="tip-off-works">
<div class="flex-tip-off">
<div class="tip-off-area">
<div class="tip-off-close">
<i class="icon-close"></i>
</div>
<div class="cl tip-wenhao">
<i class="icon-wenhao z"></i>
<div class="z">
<p>你确定要举报<span>什么是HTML</span>？</p>
<p>如果查出恶意举报，十天内禁止提交任何举报申请。</p>
</div>
</div>
<div class="popup-info cl">
<label class="radio_1 report">
<input id="examinetype1" type="radio" name="reprot_type" value="1" checked=""><span>垃圾、广告信息</span>
</label>
<label class="radio_1 report">
<input type="radio" name="reprot_type" value="2"><span>色情、低俗内容</span>
</label>
<label class="radio_1 report">
<input type="radio" name="reprot_type" value="3"><span>时政敏感话题</span>
</label>
<label class="radio_1 report">
<input type="radio" name="reprot_type" value="4"><span>其他原因</span>
</label>
<label class="radio_1">
<input type="radio" name="reprot_type" value="6"><span>未抄袭</span>
</label>
<label class="radio_1">
<input type="radio" name="reprot_type" value="7"><span>已修改</span>
</label>
</div>
<div class="avidence_t pos">
<textarea class="popup-text popup-text-let" name="reason" type="text"></textarea>
<p><span>0</span>/200</p>
</div>
<div class="avidence">
<div class="form-group cl">
<div class="control-label">上传证据:
<label class="up-atta radio_0" for="prosupload">
<input id="upAttaFile" name="upfile-choose" checked="true" type="radio" value='local'>本地上传
</label>
<label class="up-atta radio_1" for="prosurl">
<input id="upAttaUrl" name="upfile-choose" type="radio" value='sky'>网盘地址
</label>
<small class='y'>超过10M的附件请使用网盘地址</small>
</div>
<!-- 本地上传 -->
<div class="up-atta-file sZip pos" id="zippro">
<p class="default">
<i class="icon-attachment"></i>
<span>点击上传附件</span>
</p>
<p class="finish" style="display:none">
<i class="icon-gift"></i>
<a class="text" href='javasvript:;' target="_blank"><span class="ellipsis"></span></a>
<i class="icon-ok"></i>
</p>
<div class="up-file-bar"></div>
<input type="file" name="file">
</div>
<!-- 网盘地址 -->
<input id="sky" class="control-input up-atta-url" type="text" name="fileurl" style="display:none"
placeholder="请输入链接">
</div>
<p class="link-title">外链地址：</p>
<input type="text" class="link" placeholder="请完整输入链接，多个链接间请用“;”隔开" name="path">
<div class="cl personRight">
<p class="z">对谁可见：</p>
<div class="z pos choose">
<div class="cl">
<span class="z choose-right" data-val="0">全部设计师</span>
<i class="icon-down y"></i>
</div>
<ul>
<li data-val="0">全部设计师</li>
<li data-val="1">推荐设计师和认证设计师</li>
</ul>
<em></em>
</div>
<label for="examinetype3" class="radio_1">
<input id="examinetype3" type="radio" name="examinetype" value="0"><span>匿名</span>
</label>
<label for="examinetype4" class="radio_0">
<input id="examinetype4" type="radio" name="examinetype" value="1" checked><span>实名</span>
</label>
</div>
</div>
<div class="tip_bottom">
<a href="javascript:;" class="no">取消</a>
<a href="javascript:;" class="yes">确定</a>
</div>
</div>
</div>
</div>
<!-- 移出收藏夹文件夹 -->
<div class="file-out">
<div class="c-content">
<div class="out_tip">
<p class="cl">
<i class="icon-close y"></i>
</p>
<div class="cl file_tip">
<i class="icon-ok_00 z"></i>
<div class="z tip">添加收藏！</div>
</div>
<div class="ope-l ope cl">
<a href="javascript:;" class="z">您还可以进行 <span>分类收藏</span></a>
</div>
<div class="more-ope hide">
<ul class="files-list">
</ul>
<div class="ope cl">
<a href="javascript:;" class="z"><i class="icon-add-round"></i>创建收藏夹</a>
<a href="javascript:;" class="sure y">确认</a>
<a href="javascript:;" class="cancle y">取消</a>
</div>
</div>
</div>
</div>
</div>
<!-- 作品推荐 -->
<div class="star-fixed">
<div class="star-flex">
<div class="star">
<h3>您确认要推荐？</h3>
<p>该作品发布时间：2017年04月24日</p>
<div class="cl">
<div class="z">
<h4>评分</h4>
<div class="wzd cl mt">
<p class="z">完整度</p>
<ul class="z">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="qf cl mt">
<p class="z">启发性</p>
<ul class="z">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="qfx cl mt">
<p class="z">勤奋性</p>
<ul class="z">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="pb cl mt">
<p class="z">排版布局</p>
<ul class="z">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="z line"></div>
<div class="z txt">
<div class="cl">
<h4 class="z">推荐心得</h4>
<span class="y">建议20-200字以内</span>
</div>
<textarea id="in" placeholder="请留下您的推荐心得吧..."></textarea>
<p class="tip"><em>0</em>/200</p>
</div>
</div>
<div class="btn-sure">
<a href="javascript:;" class="cancle">取消</a>
<a href="javascript:;" class="sure">确定</a>
</div>
</div>
</div>
</div>
<div class="share-fixed">
<div class="flex-share">
<div class="share-img pos">
<i class="icon-close"></i>
<img src="/Public/img/loading.gif" class="expimg">
<div class="h_170">
<div class="sharebottom pos">
<div class="line"></div>
<p class="wenhao">分享能获取更多赞？</p>
<div class="share-group">
<a id="share-floppy-disk">
<i class="icon-floppy-disk"></i>
</a>
<a href="javascript:;" id="share-down" class="pos">
<i class="icon-xiazaifenxianghaibao"></i>
<div class="tri">
<div id="qrcodeCanvas2"></div>
<p>手机打开</p>
</div>
</a>
<a href="javascript:;" id="share-sina">
<i class="icon-sina"></i>
</a>
<a href="javascript:;" id="share-we" class="pos">
<i class="icon-weixin1"></i>
<div class="tri">
<div id="qrcodeCanvas"></div>
<p>手机打开</p>
</div>
</a>
<a href="javascript:;" id="share-huaban">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-huaban1"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧浮动信息 -->
<div class="scroll_user">
<!-- 浮动用户信息 -->
<div href="javascript:;" class="z head_img">
<a href="//i.ui.cn/ucenter/925055.html" ><img src="https://imgavater.ui.cn/avatar/5/5/0/5/925055.jpg?imageMogr2/auto-orient/crop/!875x875a0a22/thumbnail/148x148"></a>
<!-- 团队 -->
<!-- 隐藏的用户信息 -->
<div class="scroll_user_info">
<div>
<!-- 头像 -->
<a class="float_cover" href="//i.ui.cn/ucenter/925055.html" ><img src="https://imgavater.ui.cn/avatar/5/5/0/5/925055.jpg?imageMogr2/auto-orient/crop/!875x875a0a22/thumbnail/148x148"></a>
<!-- 昵称身份、签名 -->
<div class="float_info">
<div class="user_name" title="奇迹时代丶">
奇迹时代丶 </div>
<p class="aside_intro" title="嗯，不错，这就是我要的感觉！">
<!-- |
APP设计师 -->
嗯，不错，这就是我要的感觉！ </p>
</div>
<!-- 勋章 -->
<div class="float_medal">
<div class="zbd_medal">
<img src="//img.ui.cn/data/upload/201506/1433241840_958.png" title="“劳模勋章”之小蜜蜂勋章" alt="“劳模勋章”之小蜜蜂勋章"><img src="//img.ui.cn/data/upload/201506/1433393397_800.png" title="“劳模勋章”之扁担勋章" alt="“劳模勋章”之扁担勋章"><img src="//img.ui.cn/data/upload/201901/1547119698_498.svg" title="老马识途" alt="老马识途"> <img src="https://s1.ui.cn/img/more_medal.png" title="更多" alt="原创达人">
</div>
</div>
</div>
<!-- 他的作品 -->
<div class="author_more_project">
<div class="project_name">他的作品</div>
<div>
<ul class="works_self cl y">
<li class="z">
<a href="/detail/237551.html" target="_blank"><img src="//img.ui.cn/data/file/9/3/1/1154139.jpg?imageMogr2/auto-orient/format/jpg/strip/thumbnail/!240>/quality/90/" alt="数据可视化 科技感界面"></a>
</li><li class="z">
<a href="/detail/237133.html" target="_blank"><img src="//img.ui.cn/data/file/7/6/2/1152267.jpg?imageMogr2/auto-orient/format/jpg/strip/thumbnail/!240>/quality/90/" alt="小散户金融理财APP"></a>
</li><li class="z">
<a href="/detail/237040.html" target="_blank"><img src="//img.ui.cn/data/file/5/9/8/1151895.jpg?imageMogr2/auto-orient/format/jpg/strip/thumbnail/!240>/quality/90/" alt="来一波引导页"></a>
</li> </ul>
</div>
<div class="author_data">
粉丝：
<span class="author_fans_num">34</span>
获赞：
<span class="author_praise_num">1</span>
颜值：<span class="author_score_num">246</span>
</div>
</div>
</div>
</div>
<!-- 浮动点赞按钮 -->
<!-- <div class="icon-zan_s" title="点赞"><span class="act_num">1</span></div> -->
<div class="scroll_zan">
<span class="act_num">1</span>
<div class="icon-zan_s" style="font-size:20px;line-height:48px;position:relative;" title="点赞"></div>
</div>
<!-- 浮动收藏按钮 -->
<div class="icon-star3" title="收藏"><span class="act_num">1</span></div>
<!-- 浮动评论按钮 -->
<a class="icon-xiaoxi right-float-comment" title="评论" href="#to-comment">
<span class="act_num">0</span>
</a>
</div>
<!-- 浮动返回按钮 -->
<div id="scrollUp" class="scrollup" style="display: block;right: 60px;">
<a class="arrows icon-fanhuidingbu" title="返回顶部" href="javascript:;"></a>
</div>
<!-- 删除弹框 -->
<div class="modal modal_de">
<div class="modal-effect">
<div class="modal-delet">
<i class="icon-close"></i>
<p class="title">删除经验</p>
<p class="tip">您将要删除您的大作</p>
<p class="tit">
什么是HTML </p>
<p class="sent">在她入驻到UI中国的日子里</p>
<div class="contents">
<p>总共吸引了<em>1055</em>位设计师的驻足流连</p>
<p>总共收获了<em>1</em>位设计师的由衷赞赏</p>
<p>总共获得了<em>1</em>位设计师的悉心珍藏</p>
<p>总共引起了<em>0</em>位设计师的深入讨论</p>
</div>
<p class="still">
<em>依然要删除吗？</em>
</p>
<div class="mobtn">
<p class="cl">
<a class="z yes" href="javascript:;">残忍删除</a>
<a class="z no close-btn" href="javascript:;">太可惜,不删了</a>
</p>
</div>
</div>
</div>
</div>
<!-- 弹窗登dd录 -->
<div class="login-fixed">
<div class="content">
<div class="ad_pos" style="box-shadow: 0 0 20px 5px rgba(0, 0, 0,0.2);">
<div class="change-login">
<p class="account_number on">密码登录</p>
<p class="message">免密登录</p>
</div>
<div class="form-data pos">
<a href="javascript:;" class="cancle iconfont icon-no"></a>
<div class="form1">
<p class="p-input pos">
<!-- <label for="num">手机号/用户名/邮箱</label> -->
<input type="text" id="num" placeholder="手机号/用户名/邮箱">
<span class="tel-warn num-err hide">
<em>账号或密码错误，请重新输入</em>
<i class="icon-warn"></i>
</span>
</p>
<p class="p-input pos">
<!-- <label for="pass">请输入密码</label> -->
<i for="pass" class="view iconfont icon-eye"></i>
<input type="password" id="pass" autocomplete="new-password" placeholder="请输入密码">
<span class="tel-warn pass-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
</p>
<div class="verify-wrap hide" id="verify-wrap2"></div>
<div class="r-forget cl">
<a href="https://ui.cn/reg.html" class="z" >账号注册</a>
<a href="https://ui.cn/getpass.html" class="y" >忘记密码</a>
</div>
<a class="lang-btn off log-btn new_log_btn" href="javascript:;">登录</a>
</div>
<!-- 手机号验证码登录 -->
<div class="form2 hide">
<p class="p-input pos">
<!-- <label for="num2">手机号</label> -->
<input type="text" id="num2" placeholder="手机号">
<span class="tel-warn num2-err hide"><em>手机号</em><i class="icon-warn"></i></span>
</p>
<div style="height: 10px"></div>
<div class="tncode" stype="login" style="text-align: center;margin: 10px auto;"></div>
<p class="p-input pos hide m-code" style="height:60px">
<label for="veri-code">输入验证码</label>
<input type="text" id="veri-code">
<a href="javascript:;" class="send" style="top:30px;right:10px">发送验证码</a>
<span class="time hide" style="top:30px;right:10px"><em>120</em>s</span>
<span class="tel-warn error hide" style="top:30px;right:10px">验证码错误</span>
</p>
<a class="lang-btn off log-btn new_log_btn" href="javascript:;">登录</a>
<div class="r-forget" style="text-align:center;margin-top:-10px;margin-bottom: 10px">
<a href="https://ui.cn/reg.html" style="display:inline-block">账号注册</a>
</div>
</div>
<div class="third-party">
<div>
第三方账号登录
</div>
<div>
<a href="https://ui.cn/oauth/qq/" class="log-qq" target="_blank"><img src="/Public/img/qq.png"></a>
<a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx86298ce1fa4e96d8&redirect_uri=http://ui.cn/oauth/weixin/index.php&scope=snsapi_login&response_type=code&state=STATE#wechat_redirect" class="log-qq" target="_blank"><img src="/Public/img/weixin.png"></a>
<a href="https://ui.cn/oauth/sina/" class="log-qq" target="_blank"><img src="/Public/img/sina.png"></a>
</div>
</div>
</div>
<!-- 即时设计跳转 -->
<!-- <div class="g_group" style="width: 92%;height: 50px;background: #dce8ff;margin-left: 4%;margin-top: 10px;border-radius: 5px;">
<p style="float:left;color: #4f68fe;line-height: 50px;font-size: 18px;font-weight: bold;margin-left: 20px;">可云端编辑的专业级UI设计工具</p>
<a href="https://js.design/home?source=uicn&plan=xyh2" target="_blank" style="background:#f56c35;border:0px solid #f56c35;color:#fff;float: right;margin-top: 5px;margin-right: 20px;border-radius: 5px;">立即体验</a>
</div> -->
</div>
</div>
</div>
<script type="text/javascript" src="/Public/js2/base64.js"></script>
<!-- 详情页游戏分类浮框 -->
<div class="game-sort">
</body>
<script>
//下载附件
//p-down0: 已验证注册用户
//p-down1: 未登录用户
//p-down2: 未验证用户，可下载
//p-down3: 未验证用户，不可下载
$("a[name='p-down0']").click(function () {
var url = $(this).attr("src");
globalTip({ 'msg': '正在为您准备下载', 'setTime': 2 });
updateTime();
window.open(url);
return false;
});
$("a[name='p-down1']").click(function () {
globalTip({ 'msg': '请登录后再下载素材', 'setTime': 3, 'URL': 'https://ui.cn/login.html', 'jump': true });
return false;
});
$("a[name='p-down2']").click(function () {
var url = $(this).attr("src");
// globalTip({ 'msg': '您的邮箱或电话还未进行验证，每小时仅可下载1个素材', 'setTime': 3 });
globalTip({ 'msg': '您还未绑定手机，每小时仅可下载1个素材', 'setTime': 3 });
updateTime();
window.open(url);
return false;
});
$("a[name='p-down3']").click(function () {
// globalTip({ 'msg': '您的邮箱或电话还未进行验证，每小时仅可下载1个素材', 'setTime': 3, 'URL': 'https://account.ui.cn/accountinfo.html', 'jump': true });
globalTip({ 'msg': '您还未绑定手机，每小时仅可下载1个素材', 'setTime': 3, 'URL': 'https://account.ui.cn/accountinfo.html', 'jump': true });
return false;
});
function updateTime() {
$.ajax({
url: "https://ui.cn/updateLastDownloadTime",
type: 'post',
data: {
time:time_down
},
dataType: 'JSONP',
success: function (data) {
alert(data);
globalTip({ "msg": "开始下载", "setTime": 3 });
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// globalTip({ "msg": "下载错误,请重试！", "setTime": 3 });
},
});
}
</script>
<script src="https://s3.ui.cn/js/utf.js"></script>
<script src="https://s3.ui.cn/js/jquery.qrcode.js"></script>
<script src="https://s3.ui.cn/js/md5.min.js?version=1.0"></script>
<script src="/Public/js2/slideVerify.js"></script>
<script src="/Public/js2/agree.js"></script>
<script src="/Public/js2/login.js"></script>
<script src="/Public/js2/dmuploader.js?v=1"></script>
<script src="/Public/js2/face.js?v=1"></script>
<script src="/Public/js2/comment.js?v=1"></script>
<script src="/Public/js2/detail.js?v=1"></script>
<script src="/Public/template/js/newest.js?v=1"></script>
<script src="/Public/js2/resize.js?v=1"></script>
<script src="/Public/js2/tipoff.js?v=1"></script>
<script src="/Public/js2/share.js?v=1"></script>
<script src="https://s3.ui.cn/js/apply.js?v=1"></script>
<script type="text/javascript">
$(function(){
var imgnum = $(".read_con img").length
// $.each($(".read_con img"),function(i,k){
// var st = $(k).attr("style");
// var src=$(k).attr("src")
// var img = new Image()
// img.src=src
// img.onload=function(){
// $(k).attr({"w":img.width})
// if(i+1 ==imgnum){
// n()
// }
// }
// })
function n() {
var n, t = window.innerWidth;
n = t > 1050 ? t<1260?Math.round(t / 10.5):120 : 100;
$("html").css({
"font-size": n + "px"
});
resizeImg(t,n)
console.log("ttt:"+t)
if(t<600){
window.location.href="https://m.ui.cn/details/"+pid
}
}
n();
$(window).resize((function() {
n()
}))
$(".aside1 .icon-jiantou").on("click",function(){
n()
})
$(".r-box2 .icon-jiantouzhankai").on("click",function(){
n()
})
// 标题栏用户名称鼠标划入 右侧浮动隐藏的用户信息显示
$(".title_user_info .user_name").mouseover(function(){
$(".scroll_user_info").css({"display":"block"})
})
// 右侧浮动框中 鼠标划入，用户信息显示，划出 用户信息隐藏
$(".z.head_img").mouseover(function(){
$(".scroll_user_info").css({"display":"block"})
}).mouseleave(function(){
$(".scroll_user_info").css({"display":"none"})
})
setTimeout(function(){
n()
},500)
})
function resizeImg(t,ft){
// return false;
// 图片继续增大
if(t>1260){
if(t<1932){
var s = 7.6+(t-1260)/168
setEachImg(ft,s)
scrollUserR(t,ft,s)
}else{
setEachImg(ft,11.6)
scrollUserR(t,ft,11.6)
}
}else{
setEachImg(ft,7.6)
scrollUserR(t,ft,7.6)
}
}
function scrollUserR(t,ft,rem){
var maxW = ft*rem
var right = (t-maxW)/2-100
// 右侧用户信息右边距
// $(".scroll_user").css({"right":right+"px"})
// // 返回顶部右边距
// $("#scrollUp").css({"right":right+"px"})
// 标题宽度
$(".top-guide").css({width:maxW+"px"})
$(".w880").css({width:maxW+"px"})
// 导航宽度
if(maxW>1050){
$(".bg-white .wpn").css({width:maxW+40+"px"})
}
// 猜你喜欢作品宽度
var projectW = Math.floor(maxW/4) -20;
var coverH = Math.floor((projectW/4)*3);
var projectH = coverH+100;
// 猜你喜欢元素 li标签
$(".guess_you_like li").css({"width":projectW+"px","height":projectH+5+"px"})
// 图片宽高
$(".guess_you_like li>a>img").css({"width":projectW+"px","height":coverH+"px"})
}
// rem 是图片最大展现尺寸 以rem为单位
function setEachImg(fontsize,rem){
// 详情页内容上部的浮动条宽度
$(".bar_nav").css({width:rem+"rem"})
var maxW = fontsize*rem
$.each($(".read_con img"),function(i,k){
var realW = $(k).attr("w");
if(realW<maxW){
$(k).css({width:realW+"px"})
}else{
$(k).css({width:rem+"rem"})
}
})
}
</script>
<script src="/Public/template/zan/js/mo.min.js"></script>
<script src="/Public/template/zan/js/demo.js"></script>
</html>]]></plaintext></p></div></div>
