diff --git "a/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/download/font_f8n5owf07aq/demo.css" "b/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/download/font_f8n5owf07aq/demo.css"
new file mode 100644
index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/download/font_f8n5owf07aq/demo.css"
@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+ font-family: "iconfont logo";
+ src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+ src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+ url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+ url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+ url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+ font-family: "iconfont logo";
+ font-size: 160px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+ position: relative;
+}
+
+.nav-tabs .nav-more {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ height: 42px;
+ line-height: 42px;
+ color: #666;
+}
+
+#tabs {
+ border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+ cursor: pointer;
+ width: 100px;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ font-size: 16px;
+ border-bottom: 2px solid transparent;
+ position: relative;
+ z-index: 1;
+ margin-bottom: -1px;
+ color: #666;
+}
+
+
+#tabs .active {
+ border-bottom-color: #f00;
+ color: #222;
+}
+
+.tab-container .content {
+ display: none;
+}
+
+/* 页面布局 */
+.main {
+ padding: 30px 100px;
+ width: 960px;
+ margin: 0 auto;
+}
+
+.main .logo {
+ color: #333;
+ text-align: left;
+ margin-bottom: 30px;
+ line-height: 1;
+ height: 110px;
+ margin-top: -50px;
+ overflow: hidden;
+ *zoom: 1;
+}
+
+.main .logo a {
+ font-size: 160px;
+ color: #333;
+}
+
+.helps {
+ margin-top: 40px;
+}
+
+.helps pre {
+ padding: 20px;
+ margin: 10px 0;
+ border: solid 1px #e7e1cd;
+ background-color: #fffdef;
+ overflow: auto;
+}
+
+.icon_lists {
+ width: 100% !important;
+ overflow: hidden;
+ *zoom: 1;
+}
+
+.icon_lists li {
+ width: 100px;
+ margin-bottom: 10px;
+ margin-right: 20px;
+ text-align: center;
+ list-style: none !important;
+ cursor: default;
+}
+
+.icon_lists li .code-name {
+ line-height: 1.2;
+}
+
+.icon_lists .icon {
+ display: block;
+ height: 100px;
+ line-height: 100px;
+ font-size: 42px;
+ margin: 10px auto;
+ color: #333;
+ -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+ -moz-transition: font-size 0.25s linear, width 0.25s linear;
+ transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+ font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+ /* 通过设置 font-size 来改变图标大小 */
+ width: 1em;
+ /* 图标和文字相邻时,垂直对齐 */
+ vertical-align: -0.15em;
+ /* 通过设置 color 来改变 SVG 的颜色/fill */
+ fill: currentColor;
+ /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+ normalize.css 中也包含这行 */
+ overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+ color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+ color: #666;
+ font-size: 14px;
+ line-height: 1.8;
+}
+
+.highlight {
+ line-height: 1.5;
+}
+
+.markdown img {
+ vertical-align: middle;
+ max-width: 100%;
+}
+
+.markdown h1 {
+ color: #404040;
+ font-weight: 500;
+ line-height: 40px;
+ margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+ color: #404040;
+ margin: 1.6em 0 0.6em 0;
+ font-weight: 500;
+ clear: both;
+}
+
+.markdown h1 {
+ font-size: 28px;
+}
+
+.markdown h2 {
+ font-size: 22px;
+}
+
+.markdown h3 {
+ font-size: 16px;
+}
+
+.markdown h4 {
+ font-size: 14px;
+}
+
+.markdown h5 {
+ font-size: 12px;
+}
+
+.markdown h6 {
+ font-size: 12px;
+}
+
+.markdown hr {
+ height: 1px;
+ border: 0;
+ background: #e9e9e9;
+ margin: 16px 0;
+ clear: both;
+}
+
+.markdown p {
+ margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+ width: 80%;
+}
+
+.markdown ul>li {
+ list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+ margin-left: 20px;
+ padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+ margin: 0.6em 0;
+}
+
+.markdown ol>li {
+ list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+ margin-left: 20px;
+ padding-left: 4px;
+}
+
+.markdown code {
+ margin: 0 3px;
+ padding: 0 5px;
+ background: #eee;
+ border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+ font-weight: 600;
+}
+
+.markdown>table {
+ border-collapse: collapse;
+ border-spacing: 0px;
+ empty-cells: show;
+ border: 1px solid #e9e9e9;
+ width: 95%;
+ margin-bottom: 24px;
+}
+
+.markdown>table th {
+ white-space: nowrap;
+ color: #333;
+ font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+ border: 1px solid #e9e9e9;
+ padding: 8px 16px;
+ text-align: left;
+}
+
+.markdown>table th {
+ background: #F7F7F7;
+}
+
+.markdown blockquote {
+ font-size: 90%;
+ color: #999;
+ border-left: 4px solid #e9e9e9;
+ padding-left: 0.8em;
+ margin: 1em 0;
+}
+
+.markdown blockquote p {
+ margin: 0;
+}
+
+.markdown .anchor {
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ margin-left: 8px;
+}
+
+.markdown .waiting {
+ color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+ opacity: 1;
+ display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+ clear: both;
+}
+
+
+.hljs {
+ display: block;
+ background: white;
+ padding: 0.5em;
+ color: #333333;
+ overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+ color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+ color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+ color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+ color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+ color: #63a35c;
+}
+
+.hljs-tag {
+ color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+ color: #795da3;
+}
+
+.hljs-addition {
+ color: #55a532;
+ background-color: #eaffea;
+}
+
+.hljs-deletion {
+ color: #bd2c00;
+ background-color: #ffecec;
+}
+
+.hljs-link {
+ text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+ color: black;
+ background: none;
+ text-shadow: 0 1px white;
+ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ word-wrap: normal;
+ line-height: 1.5;
+
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+ text-shadow: none;
+ background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+ text-shadow: none;
+ background: #b3d4fc;
+}
+
+@media print {
+
+ code[class*="language-"],
+ pre[class*="language-"] {
+ text-shadow: none;
+ }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+ padding: 1em;
+ margin: .5em 0;
+ overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+ background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+ padding: .1em;
+ border-radius: .3em;
+ white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: slategray;
+}
+
+.token.punctuation {
+ color: #999;
+}
+
+.namespace {
+ opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+ color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+ color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+ color: #9a6e3a;
+ background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+ color: #07a;
+}
+
+.token.function,
+.token.class-name {
+ color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+ color: #e90;
+}
+
+.token.important,
+.token.bold {
+ font-weight: bold;
+}
+
+.token.italic {
+ font-style: italic;
+}
+
+.token.entity {
+ cursor: help;
+}
diff --git "a/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/download/font_f8n5owf07aq/demo_index.html" "b/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/download/font_f8n5owf07aq/demo_index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..9a3b1a0176a78c7da71b409fd1ef655194970ec8
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/download/font_f8n5owf07aq/demo_index.html"
@@ -0,0 +1,391 @@
+
+
+
+
+ iconfont Demo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Unicode
+ - Font class
+ - Symbol
+
+
+
+
+
+
+
+ -
+
+
返回
+ 
+
+
+ -
+
+
书
+ 
+
+
+ -
+
+
评论
+ 
+
+
+ -
+
+
书评
+ 
+
+
+ -
+
+
设置
+ 
+
+
+ -
+
+
礼包
+ 
+
+
+ -
+
+
钢笔
+ 
+
+
+ -
+
+
目录
+ 
+
+
+ -
+
+
黑夜模式
+ 
+
+
+
+
+
Unicode 引用
+
+
+
Unicode 是字体在网页端最原始的应用方式,特点是:
+
+ - 支持按字体的方式去动态调整图标大小,颜色等等。
+ - 默认情况下不支持多色,直接添加多色图标会自动去色。
+
+
+ 注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)
+
+
Unicode 使用步骤如下:
+
第一步:拷贝项目下面生成的 @font-face
+
@font-face {
+ font-family: 'iconfont';
+ src: url('iconfont.ttf?t=1638258516830') format('truetype');
+}
+
+
第二步:定义使用 iconfont 的样式
+
.iconfont {
+ font-family: "iconfont" !important;
+ font-size: 16px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+
第三步:挑选相应图标并获取字体编码,应用于页面
+
+<span class="iconfont">3</span>
+
+
+ "iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。
+
+
+
+
+
+
+ -
+
+
+ 返回
+
+ .icon-fanhui
+
+
+
+ -
+
+
+ 书
+
+ .icon-shu
+
+
+
+ -
+
+
+ 评论
+
+ .icon-pinglun
+
+
+
+ -
+
+
+ 书评
+
+ .icon-shuping
+
+
+
+ -
+
+
+ 设置
+
+ .icon-shezhi
+
+
+
+ -
+
+
+ 礼包
+
+ .icon-libao
+
+
+
+ -
+
+
+ 钢笔
+
+ .icon-icon-test
+
+
+
+ -
+
+
+ 目录
+
+ .icon-mulu
+
+
+
+ -
+
+
+ 黑夜模式
+
+ .icon-heiyemoshi
+
+
+
+
+
+
font-class 引用
+
+
+
font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。
+
与 Unicode 使用方式相比,具有如下特点:
+
+ - 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
+ - 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
+
+
使用步骤如下:
+
第一步:引入项目下面生成的 fontclass 代码:
+
<link rel="stylesheet" href="./iconfont.css">
+
+
第二步:挑选相应图标并获取类名,应用于页面:
+
<span class="iconfont icon-xxx"></span>
+
+
+ "
+ iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。
+
+
+
+
+
+
+ -
+
+
返回
+ #icon-fanhui
+
+
+ -
+
+
书
+ #icon-shu
+
+
+ -
+
+
评论
+ #icon-pinglun
+
+
+ -
+
+
书评
+ #icon-shuping
+
+
+ -
+
+
设置
+ #icon-shezhi
+
+
+ -
+
+
礼包
+ #icon-libao
+
+
+ -
+
+
钢笔
+ #icon-icon-test
+
+
+ -
+
+
目录
+ #icon-mulu
+
+
+ -
+
+
黑夜模式
+ #icon-heiyemoshi
+
+
+
+
+
Symbol 引用
+
+
+
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章
+ 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:
+
+ - 支持多色图标了,不再受单色限制。
+ - 通过一些技巧,支持像字体那样,通过
font-size
, color
来调整样式。
+ - 兼容性较差,支持 IE9+,及现代浏览器。
+ - 浏览器渲染 SVG 的性能一般,还不如 png。
+
+
使用步骤如下:
+
第一步:引入项目下面生成的 symbol 代码:
+
<script src="./iconfont.js"></script>
+
+
第二步:加入通用 CSS 代码(引入一次就行):
+
<style>
+.icon {
+ width: 1em;
+ height: 1em;
+ vertical-align: -0.15em;
+ fill: currentColor;
+ overflow: hidden;
+}
+</style>
+
+
第三步:挑选相应图标并获取类名,应用于页面:
+
<svg class="icon" aria-hidden="true">
+ <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+
+
+
+
+
+
diff --git "a/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/download/font_f8n5owf07aq/iconfont.css" "b/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/download/font_f8n5owf07aq/iconfont.css"
new file mode 100644
index 0000000000000000000000000000000000000000..419bde365ca633db02e2a752831e803d913c2ddb
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/download/font_f8n5owf07aq/iconfont.css"
@@ -0,0 +1,49 @@
+@font-face {
+ font-family: "iconfont"; /* Project id */
+ src: url('iconfont.ttf?t=1638258516830') format('truetype');
+}
+
+.iconfont {
+ font-family: "iconfont" !important;
+ font-size: 16px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-fanhui:before {
+ content: "\e671";
+}
+
+.icon-shu:before {
+ content: "\e625";
+}
+
+.icon-pinglun:before {
+ content: "\e664";
+}
+
+.icon-shuping:before {
+ content: "\e6cb";
+}
+
+.icon-shezhi:before {
+ content: "\e70f";
+}
+
+.icon-libao:before {
+ content: "\e787";
+}
+
+.icon-icon-test:before {
+ content: "\e611";
+}
+
+.icon-mulu:before {
+ content: "\e6a4";
+}
+
+.icon-heiyemoshi:before {
+ content: "\e76b";
+}
+
diff --git "a/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/download/font_f8n5owf07aq/iconfont.js" "b/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/download/font_f8n5owf07aq/iconfont.js"
new file mode 100644
index 0000000000000000000000000000000000000000..37697faafc33c9aeeaf7e85a4438950a3955d91a
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/download/font_f8n5owf07aq/iconfont.js"
@@ -0,0 +1 @@
+!function(t){var c,e,o,h,n,i='',a=(a=document.getElementsByTagName("script"))[a.length-1].getAttribute("data-injectcss"),l=function(t,c){c.parentNode.insertBefore(t,c)};if(a&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}function s(){n||(n=!0,o())}function d(){try{h.documentElement.doScroll("left")}catch(t){return void setTimeout(d,50)}s()}c=function(){var t,c;(c=document.createElement("div")).innerHTML=i,i=null,(t=c.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",c=t,(t=document.body).firstChild?l(c,t.firstChild):t.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(e=function(){document.removeEventListener("DOMContentLoaded",e,!1),c()},document.addEventListener("DOMContentLoaded",e,!1)):document.attachEvent&&(o=c,h=t.document,n=!1,d(),h.onreadystatechange=function(){"complete"==h.readyState&&(h.onreadystatechange=null,s())})}(window);
\ No newline at end of file
diff --git "a/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/download/font_f8n5owf07aq/iconfont.json" "b/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/download/font_f8n5owf07aq/iconfont.json"
new file mode 100644
index 0000000000000000000000000000000000000000..fd3d64302cdd050faf171ed6ff65dd9b08abe751
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/download/font_f8n5owf07aq/iconfont.json"
@@ -0,0 +1,72 @@
+{
+ "id": "",
+ "name": "",
+ "font_family": "iconfont",
+ "css_prefix_text": "icon-",
+ "description": "",
+ "glyphs": [
+ {
+ "icon_id": "599991",
+ "name": "返回",
+ "font_class": "fanhui",
+ "unicode": "e671",
+ "unicode_decimal": 58993
+ },
+ {
+ "icon_id": "648782",
+ "name": "书",
+ "font_class": "shu",
+ "unicode": "e625",
+ "unicode_decimal": 58917
+ },
+ {
+ "icon_id": "827650",
+ "name": "评论",
+ "font_class": "pinglun",
+ "unicode": "e664",
+ "unicode_decimal": 58980
+ },
+ {
+ "icon_id": "1936184",
+ "name": "书评",
+ "font_class": "shuping",
+ "unicode": "e6cb",
+ "unicode_decimal": 59083
+ },
+ {
+ "icon_id": "3456457",
+ "name": "设置",
+ "font_class": "shezhi",
+ "unicode": "e70f",
+ "unicode_decimal": 59151
+ },
+ {
+ "icon_id": "4294075",
+ "name": "礼包",
+ "font_class": "libao",
+ "unicode": "e787",
+ "unicode_decimal": 59271
+ },
+ {
+ "icon_id": "6015696",
+ "name": "钢笔",
+ "font_class": "icon-test",
+ "unicode": "e611",
+ "unicode_decimal": 58897
+ },
+ {
+ "icon_id": "20710629",
+ "name": "目录",
+ "font_class": "mulu",
+ "unicode": "e6a4",
+ "unicode_decimal": 59044
+ },
+ {
+ "icon_id": "22903748",
+ "name": "黑夜模式",
+ "font_class": "heiyemoshi",
+ "unicode": "e76b",
+ "unicode_decimal": 59243
+ }
+ ]
+}
diff --git "a/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/download/font_f8n5owf07aq/iconfont.ttf" "b/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/download/font_f8n5owf07aq/iconfont.ttf"
new file mode 100644
index 0000000000000000000000000000000000000000..37867dcb8dac85a3009d04d6ae870fbbcd054273
Binary files /dev/null and "b/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/download/font_f8n5owf07aq/iconfont.ttf" differ
diff --git "a/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/index.css" "b/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/index.css"
new file mode 100644
index 0000000000000000000000000000000000000000..9920ce4f2eb712bca5346735b075c96b260763a1
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/index.css"
@@ -0,0 +1,244 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+
+/* pc */
+@media screen and (min-width:450px) {
+ #mobile {
+ display: none;
+ }
+
+ body {
+ background-color: #e1e1e1;
+ width: 100%;
+ font-size: 14px;
+ }
+}
+
+
+
+.header {
+ width: 1440px;
+ height: 40px;
+ display: flex;
+ box-sizing: border-box;
+ justify-content: space-between;
+ align-items: center;
+ background-color: whitesmoke;
+ border-bottom: 2px solid #59ABC9;
+}
+
+.header-left {
+ display: flex;
+ padding-left: 0.5%;
+}
+
+.word {
+ font-weight: bold;
+ margin-left: 10px;
+ margin-right: 5px;
+}
+
+.color-box {
+ box-sizing: border-box;
+ width: 18px;
+ height: 18px;
+ border: 2px solid white;
+ margin-right: 5px;
+ cursor: pointer;
+}
+
+.size {
+ box-sizing: border-box;
+ padding-right: 5px;
+ cursor: pointer;
+}
+
+.header-right {
+ display: flex;
+}
+
+.btn {
+ width: 80px;
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+ box-sizing: border-box;
+ border-radius: 5px;
+ box-sizing: border-box;
+ box-shadow: inset 0 0 10px skyblue;
+ margin: 0 2px;
+ background-color: white;
+ cursor: pointer;
+}
+
+.head {
+ margin-top: 60px;
+ text-align: center;
+}
+
+.title {
+ margin-bottom: 30px;
+}
+
+.intro {
+ color: #ADADAD;
+ margin-bottom: 15px;
+}
+
+.content {
+ box-sizing: border-box;
+ font-size: 20px;
+ padding-left: 26%;
+ padding-right: 26%;
+ text-indent: 2em;
+}
+
+.content p {
+ padding: 10px 0;
+}
+
+
+
+
+
+
+/* mobile */
+@media screen and (max-width : 450px) {
+ #pc {
+ display: none;
+ }
+
+ body {
+ background-color: #FBE6B5;
+ color: #6A482E;
+ width: 100%;
+ }
+
+ .iconfont {
+ align-self: center;
+ justify-self: center;
+ font-size: 20px !important;
+ }
+
+ .header {
+ width: 100%;
+ height: 40px;
+ background-color: black;
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ position: fixed;
+ left: 0;
+ top: 0;
+ }
+
+ .icon-shu {
+ grid-column: 10/11;
+ }
+
+ .icon-libao {
+ grid-column: 11/12;
+ }
+
+ .icon-pinglun {
+ grid-column: 12/13;
+ }
+
+ .add-bookshelf {
+ position: fixed;
+ right: 0;
+ top: 20%;
+ width: 85px;
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+ border-top-left-radius: 45px;
+ border-bottom-left-radius: 45px;
+ background-color: black;
+ font-size: 14px;
+ }
+
+ .comments {
+ position: fixed;
+ right: 5%;
+ bottom: 20%;
+ background-color: black;
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ text-align: center;
+ font-size: 12px;
+ box-sizing: border-box;
+ padding-top: 2px;
+ }
+
+ .icon-icon-test {
+ font-size: 26px !important;
+ }
+
+ .footer {
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 100px;
+ background-color: black;
+ display: grid;
+ grid-template-columns: repeat(8, 1fr);
+ grid-template-rows: 40px 60px;
+ text-align: center;
+ }
+
+ .up {
+ grid-area: 1/1/2/5;
+ font-size: 15px;
+ line-height: 40px;
+ }
+
+ .down {
+ grid-area: 1/5/2/9;
+ font-size: 15px;
+ line-height: 40px;
+ }
+
+ .btn-mulu {
+ grid-area: 2/1/3/3;
+ }
+
+ .btn-heiye {
+ grid-area: 2/3/3/5;
+ }
+
+ .btn-shezhi {
+ grid-area: 2/5/3/7;
+ }
+
+ .btn-shupin {
+ grid-area: 2/7/3/9;
+ }
+
+ .tousu {
+ text-align: end;
+ margin-top: 3%;
+ margin-right: 3%;
+ }
+
+ .m-title {
+ margin-left: 3%;
+ margin-bottom: 3%;
+ }
+
+
+ .m-content {
+ box-sizing: border-box;
+ padding-left: 8%;
+ padding-right: 8%;
+ text-indent: 2em;
+ }
+
+ .m-content p {
+ padding-bottom: 10px;
+ line-height: 1.8;
+ }
+}
diff --git "a/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/index.html" "b/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..71ad48dcbec4ca2a0eddfaf0beda5c8378e0ca48
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211129-\345\260\217\350\257\264/index.html"
@@ -0,0 +1,99 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
第一章 卧 龙
+
《三国大气象师》堂燕归来/著,本章共4514个字,更新与2020/01/01
+
+
+
初平元年,襄阳,晴空万里。
+
通往汉水岸边望江亭的大道上,一辆辆的马车络绎不绝,一名名世家子弟们鲜衣怒马,意气风发。
+
铛铛铛~~
+
清脆的同铃声响起,华**马丛中,却出现了一辆寒酸的驴车。
+
驴车上那少年,身形修长,相貌清瘦,身穿着一身青衫布衣,布衣的颜色隐隐已有些发白,看得出来是洗了又洗,穿了有些年头。
+
颠簸的驴车,陈旧的布衣,穿行在周围的鲜衣怒马之中,显得颇为扎眼
+
+
+
+
+
+
投诉
+
第一章 卧 龙
+
+
初平元年,襄阳,晴空万里。
+
通往汉水岸边望江亭的大道上,一辆辆的马车络绎不绝,一名名世家子弟们鲜衣怒马,意气风发。
+
铛铛铛~~
+
清脆的同铃声响起,华**马丛中,却出现了一辆寒酸的驴车。
+
驴车上那少年,身形修长,相貌清瘦,身穿着一身青衫布衣,布衣的颜色隐隐已有些发白,看得出来是洗了又洗,穿了有些年头。
+
颠簸的驴车,陈旧的布衣,穿行在周围的鲜衣怒马之中,显得颇为扎眼
+
+
+
+
diff --git "a/\344\275\231\344\274\240\345\245\225/20211201-SVG\344\272\272\350\204\270/demo01.html" "b/\344\275\231\344\274\240\345\245\225/20211201-SVG\344\272\272\350\204\270/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d061b613ff5c51a72ad2217c917f6e4c6967f819
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211201-SVG\344\272\272\350\204\270/demo01.html"
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git "a/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/demo01.html" "b/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a162ebb7b1ed669498af4827092e3f63497e9851
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/demo01.html"
@@ -0,0 +1,54 @@
+
+
+
+
+
+
+
+
+ A Simple Form
+ Form Fundamentals
+
+
+
diff --git "a/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/demo2.css" "b/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/demo2.css"
new file mode 100644
index 0000000000000000000000000000000000000000..730a48455d0b76598bfe1c2e28266ea76f8cca9e
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/demo2.css"
@@ -0,0 +1,87 @@
+form{
+ margin-left: 33%;
+ font-size: 12px;
+ color: #646262;
+}
+input{
+ border: 1px solid #e1e1e1;
+}
+.act{
+ width: 290px;
+ height: 37px;
+ font-size: 12px;
+}
+.choose-role{
+ text-align: center;
+ margin-top: 20px;
+}
+.choose-role span{
+ font-size: 22px;
+}
+label::before {
+ content: "*";
+ color: red;
+}
+button{
+ color: white;
+ background-color: rgb(255, 107, 8);
+ border: none;
+ height: 40px;
+ width: 110px;
+}
+.more{
+ position: relative;
+ border: 1px solid #e1e1e1;
+ width: 170px;
+ height: auto;
+ min-height: 100px;
+ text-align: center;
+ margin: -450px 0 0 500px;
+ padding: 0 20px 0 20px;
+}
+
+.more hr{
+ width: 130px;
+ border: 1px solid #e1e1e1;
+}
+.radio_type {
+ width: 20px;
+ height: 20px;
+ appearance: none;
+ position: relative;
+ outline: none;
+ border: none;
+}
+.radio_type:before {
+ content: "";
+ width: 15px;
+ height: 15px;
+ border: 1px solid rgb(255, 102, 0);
+ display: inline-block;
+ border-radius: 50%;
+ vertical-align: middle;
+}
+.radio_type:checked:before {
+ content: "";
+ width: 15px;
+ height: 15px;
+ border: 1px solid rgb(255, 102, 0);
+ display: inline-block;
+ border-radius: 50%;
+ vertical-align: middle;
+}
+.radio_type:checked:after {
+ content: "";
+ width: 9px;
+ height: 9px;
+ text-align: center;
+ background: rgb(255, 102, 0);
+ border-radius: 50%;
+ display: block;
+ position: absolute;
+ top: 4px;
+ left: 4px;
+}
+.radio_type:checked + label {
+ color: #ecbb60;
+}
\ No newline at end of file
diff --git "a/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/demo2.html" "b/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/demo2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..53ed433eaa483b9034579f1bbfee2ad7843f17f8
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/demo2.html"
@@ -0,0 +1,150 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+ 企业账户注册
+
+ 个人账户注册
+
+
+ 有企业营业执照(含个体工商户)的用户请注册。权益如下:做企业实名认证;作为卖家身份开店;作为买家身份采购。
+ 无企业营业执照的个人用户请注册个人账户。权益如下:做个人实名认证;作为买家身份采购;
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/download/font_o4ip7o2u7v/demo.css" "b/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/download/font_o4ip7o2u7v/demo.css"
new file mode 100644
index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/download/font_o4ip7o2u7v/demo.css"
@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+ font-family: "iconfont logo";
+ src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+ src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+ url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+ url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+ url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+ font-family: "iconfont logo";
+ font-size: 160px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+ position: relative;
+}
+
+.nav-tabs .nav-more {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ height: 42px;
+ line-height: 42px;
+ color: #666;
+}
+
+#tabs {
+ border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+ cursor: pointer;
+ width: 100px;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+ font-size: 16px;
+ border-bottom: 2px solid transparent;
+ position: relative;
+ z-index: 1;
+ margin-bottom: -1px;
+ color: #666;
+}
+
+
+#tabs .active {
+ border-bottom-color: #f00;
+ color: #222;
+}
+
+.tab-container .content {
+ display: none;
+}
+
+/* 页面布局 */
+.main {
+ padding: 30px 100px;
+ width: 960px;
+ margin: 0 auto;
+}
+
+.main .logo {
+ color: #333;
+ text-align: left;
+ margin-bottom: 30px;
+ line-height: 1;
+ height: 110px;
+ margin-top: -50px;
+ overflow: hidden;
+ *zoom: 1;
+}
+
+.main .logo a {
+ font-size: 160px;
+ color: #333;
+}
+
+.helps {
+ margin-top: 40px;
+}
+
+.helps pre {
+ padding: 20px;
+ margin: 10px 0;
+ border: solid 1px #e7e1cd;
+ background-color: #fffdef;
+ overflow: auto;
+}
+
+.icon_lists {
+ width: 100% !important;
+ overflow: hidden;
+ *zoom: 1;
+}
+
+.icon_lists li {
+ width: 100px;
+ margin-bottom: 10px;
+ margin-right: 20px;
+ text-align: center;
+ list-style: none !important;
+ cursor: default;
+}
+
+.icon_lists li .code-name {
+ line-height: 1.2;
+}
+
+.icon_lists .icon {
+ display: block;
+ height: 100px;
+ line-height: 100px;
+ font-size: 42px;
+ margin: 10px auto;
+ color: #333;
+ -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+ -moz-transition: font-size 0.25s linear, width 0.25s linear;
+ transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+ font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+ /* 通过设置 font-size 来改变图标大小 */
+ width: 1em;
+ /* 图标和文字相邻时,垂直对齐 */
+ vertical-align: -0.15em;
+ /* 通过设置 color 来改变 SVG 的颜色/fill */
+ fill: currentColor;
+ /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+ normalize.css 中也包含这行 */
+ overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+ color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+ color: #666;
+ font-size: 14px;
+ line-height: 1.8;
+}
+
+.highlight {
+ line-height: 1.5;
+}
+
+.markdown img {
+ vertical-align: middle;
+ max-width: 100%;
+}
+
+.markdown h1 {
+ color: #404040;
+ font-weight: 500;
+ line-height: 40px;
+ margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+ color: #404040;
+ margin: 1.6em 0 0.6em 0;
+ font-weight: 500;
+ clear: both;
+}
+
+.markdown h1 {
+ font-size: 28px;
+}
+
+.markdown h2 {
+ font-size: 22px;
+}
+
+.markdown h3 {
+ font-size: 16px;
+}
+
+.markdown h4 {
+ font-size: 14px;
+}
+
+.markdown h5 {
+ font-size: 12px;
+}
+
+.markdown h6 {
+ font-size: 12px;
+}
+
+.markdown hr {
+ height: 1px;
+ border: 0;
+ background: #e9e9e9;
+ margin: 16px 0;
+ clear: both;
+}
+
+.markdown p {
+ margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+ width: 80%;
+}
+
+.markdown ul>li {
+ list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+ margin-left: 20px;
+ padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+ margin: 0.6em 0;
+}
+
+.markdown ol>li {
+ list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+ margin-left: 20px;
+ padding-left: 4px;
+}
+
+.markdown code {
+ margin: 0 3px;
+ padding: 0 5px;
+ background: #eee;
+ border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+ font-weight: 600;
+}
+
+.markdown>table {
+ border-collapse: collapse;
+ border-spacing: 0px;
+ empty-cells: show;
+ border: 1px solid #e9e9e9;
+ width: 95%;
+ margin-bottom: 24px;
+}
+
+.markdown>table th {
+ white-space: nowrap;
+ color: #333;
+ font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+ border: 1px solid #e9e9e9;
+ padding: 8px 16px;
+ text-align: left;
+}
+
+.markdown>table th {
+ background: #F7F7F7;
+}
+
+.markdown blockquote {
+ font-size: 90%;
+ color: #999;
+ border-left: 4px solid #e9e9e9;
+ padding-left: 0.8em;
+ margin: 1em 0;
+}
+
+.markdown blockquote p {
+ margin: 0;
+}
+
+.markdown .anchor {
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ margin-left: 8px;
+}
+
+.markdown .waiting {
+ color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+ opacity: 1;
+ display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+ clear: both;
+}
+
+
+.hljs {
+ display: block;
+ background: white;
+ padding: 0.5em;
+ color: #333333;
+ overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+ color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+ color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+ color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+ color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+ color: #63a35c;
+}
+
+.hljs-tag {
+ color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+ color: #795da3;
+}
+
+.hljs-addition {
+ color: #55a532;
+ background-color: #eaffea;
+}
+
+.hljs-deletion {
+ color: #bd2c00;
+ background-color: #ffecec;
+}
+
+.hljs-link {
+ text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+ color: black;
+ background: none;
+ text-shadow: 0 1px white;
+ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ word-wrap: normal;
+ line-height: 1.5;
+
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+ text-shadow: none;
+ background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+ text-shadow: none;
+ background: #b3d4fc;
+}
+
+@media print {
+
+ code[class*="language-"],
+ pre[class*="language-"] {
+ text-shadow: none;
+ }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+ padding: 1em;
+ margin: .5em 0;
+ overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+ background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+ padding: .1em;
+ border-radius: .3em;
+ white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: slategray;
+}
+
+.token.punctuation {
+ color: #999;
+}
+
+.namespace {
+ opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+ color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+ color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+ color: #9a6e3a;
+ background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+ color: #07a;
+}
+
+.token.function,
+.token.class-name {
+ color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+ color: #e90;
+}
+
+.token.important,
+.token.bold {
+ font-weight: bold;
+}
+
+.token.italic {
+ font-style: italic;
+}
+
+.token.entity {
+ cursor: help;
+}
diff --git "a/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/download/font_o4ip7o2u7v/demo_index.html" "b/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/download/font_o4ip7o2u7v/demo_index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d61c44c7a0878e4e5060d21eb9edbe3f74d253cd
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/download/font_o4ip7o2u7v/demo_index.html"
@@ -0,0 +1,230 @@
+
+
+
+
+ iconfont Demo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Unicode
+ - Font class
+ - Symbol
+
+
+
+
+
+
+
+ -
+
+
bussiness-man
+ 
+
+
+ -
+
+
company
+ 
+
+
+
+
+
Unicode 引用
+
+
+
Unicode 是字体在网页端最原始的应用方式,特点是:
+
+ - 支持按字体的方式去动态调整图标大小,颜色等等。
+ - 默认情况下不支持多色,直接添加多色图标会自动去色。
+
+
+ 注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)
+
+
Unicode 使用步骤如下:
+
第一步:拷贝项目下面生成的 @font-face
+
@font-face {
+ font-family: 'iconfont';
+ src: url('iconfont.ttf?t=1638414427258') format('truetype');
+}
+
+
第二步:定义使用 iconfont 的样式
+
.iconfont {
+ font-family: "iconfont" !important;
+ font-size: 16px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+
第三步:挑选相应图标并获取字体编码,应用于页面
+
+<span class="iconfont">3</span>
+
+
+ "iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。
+
+
+
+
+
+
+ -
+
+
+ bussiness-man
+
+ .icon-bussiness-man
+
+
+
+ -
+
+
+ company
+
+ .icon-company
+
+
+
+
+
+
font-class 引用
+
+
+
font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。
+
与 Unicode 使用方式相比,具有如下特点:
+
+ - 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
+ - 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
+
+
使用步骤如下:
+
第一步:引入项目下面生成的 fontclass 代码:
+
<link rel="stylesheet" href="./iconfont.css">
+
+
第二步:挑选相应图标并获取类名,应用于页面:
+
<span class="iconfont icon-xxx"></span>
+
+
+ "
+ iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。
+
+
+
+
+
+
+ -
+
+
bussiness-man
+ #icon-bussiness-man
+
+
+ -
+
+
company
+ #icon-company
+
+
+
+
+
Symbol 引用
+
+
+
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章
+ 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:
+
+ - 支持多色图标了,不再受单色限制。
+ - 通过一些技巧,支持像字体那样,通过
font-size
, color
来调整样式。
+ - 兼容性较差,支持 IE9+,及现代浏览器。
+ - 浏览器渲染 SVG 的性能一般,还不如 png。
+
+
使用步骤如下:
+
第一步:引入项目下面生成的 symbol 代码:
+
<script src="./iconfont.js"></script>
+
+
第二步:加入通用 CSS 代码(引入一次就行):
+
<style>
+.icon {
+ width: 1em;
+ height: 1em;
+ vertical-align: -0.15em;
+ fill: currentColor;
+ overflow: hidden;
+}
+</style>
+
+
第三步:挑选相应图标并获取类名,应用于页面:
+
<svg class="icon" aria-hidden="true">
+ <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+
+
+
+
+
+
diff --git "a/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/download/font_o4ip7o2u7v/iconfont.css" "b/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/download/font_o4ip7o2u7v/iconfont.css"
new file mode 100644
index 0000000000000000000000000000000000000000..8b08f756e7a99d7e9eb158a86d3a0fd6212ab627
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/download/font_o4ip7o2u7v/iconfont.css"
@@ -0,0 +1,21 @@
+@font-face {
+ font-family: "iconfont"; /* Project id */
+ src: url('iconfont.ttf?t=1638414427258') format('truetype');
+}
+
+.iconfont {
+ font-family: "iconfont" !important;
+ font-size: 16px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-bussiness-man:before {
+ content: "\e6ef";
+}
+
+.icon-company:before {
+ content: "\e748";
+}
+
diff --git "a/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/download/font_o4ip7o2u7v/iconfont.js" "b/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/download/font_o4ip7o2u7v/iconfont.js"
new file mode 100644
index 0000000000000000000000000000000000000000..16901851a78bf92bf7aeb763e76e8488c2d5f5c4
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/download/font_o4ip7o2u7v/iconfont.js"
@@ -0,0 +1 @@
+!function(e){var t,n,o,i,l,c='',d=(d=document.getElementsByTagName("script"))[d.length-1].getAttribute("data-injectcss"),s=function(e,t){t.parentNode.insertBefore(e,t)};if(d&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(e){console&&console.log(e)}}function a(){l||(l=!0,o())}function m(){try{i.documentElement.doScroll("left")}catch(e){return void setTimeout(m,50)}a()}t=function(){var e,t;(t=document.createElement("div")).innerHTML=c,c=null,(e=t.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",t=e,(e=document.body).firstChild?s(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(o=t,i=e.document,l=!1,m(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,a())})}(window);
\ No newline at end of file
diff --git "a/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/download/font_o4ip7o2u7v/iconfont.json" "b/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/download/font_o4ip7o2u7v/iconfont.json"
new file mode 100644
index 0000000000000000000000000000000000000000..76445b19220f87202843ae7f208d10b94b45728f
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/download/font_o4ip7o2u7v/iconfont.json"
@@ -0,0 +1,23 @@
+{
+ "id": "",
+ "name": "",
+ "font_family": "iconfont",
+ "css_prefix_text": "icon-",
+ "description": "",
+ "glyphs": [
+ {
+ "icon_id": "11474220",
+ "name": "bussiness-man",
+ "font_class": "bussiness-man",
+ "unicode": "e6ef",
+ "unicode_decimal": 59119
+ },
+ {
+ "icon_id": "11488011",
+ "name": "company",
+ "font_class": "company",
+ "unicode": "e748",
+ "unicode_decimal": 59208
+ }
+ ]
+}
diff --git "a/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/download/font_o4ip7o2u7v/iconfont.ttf" "b/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/download/font_o4ip7o2u7v/iconfont.ttf"
new file mode 100644
index 0000000000000000000000000000000000000000..f88054dcefb75d74882b73cfe00110512f8ad4aa
Binary files /dev/null and "b/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/download/font_o4ip7o2u7v/iconfont.ttf" differ
diff --git "a/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/jquery-3.6.0.js" "b/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/jquery-3.6.0.js"
new file mode 100644
index 0000000000000000000000000000000000000000..fc6c299b73e792ef288e785c22393a5df9dded4b
--- /dev/null
+++ "b/\344\275\231\344\274\240\345\245\225/20211202-\350\241\250\345\215\225/jquery-3.6.0.js"
@@ -0,0 +1,10881 @@
+/*!
+ * jQuery JavaScript Library v3.6.0
+ * https://jquery.com/
+ *
+ * Includes Sizzle.js
+ * https://sizzlejs.com/
+ *
+ * Copyright OpenJS Foundation and other contributors
+ * Released under the MIT license
+ * https://jquery.org/license
+ *
+ * Date: 2021-03-02T17:08Z
+ */
+( function( global, factory ) {
+
+ "use strict";
+
+ if ( typeof module === "object" && typeof module.exports === "object" ) {
+
+ // For CommonJS and CommonJS-like environments where a proper `window`
+ // is present, execute the factory and get jQuery.
+ // For environments that do not have a `window` with a `document`
+ // (such as Node.js), expose a factory as module.exports.
+ // This accentuates the need for the creation of a real `window`.
+ // e.g. var jQuery = require("jquery")(window);
+ // See ticket #14549 for more info.
+ module.exports = global.document ?
+ factory( global, true ) :
+ function( w ) {
+ if ( !w.document ) {
+ throw new Error( "jQuery requires a window with a document" );
+ }
+ return factory( w );
+ };
+ } else {
+ factory( global );
+ }
+
+// Pass this if window is not defined yet
+} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
+
+// Edge <= 12 - 13+, Firefox <=18 - 45+, IE 10 - 11, Safari 5.1 - 9+, iOS 6 - 9.1
+// throw exceptions when non-strict code (e.g., ASP.NET 4.5) accesses strict mode
+// arguments.callee.caller (trac-13335). But as of jQuery 3.0 (2016), strict mode should be common
+// enough that all such attempts are guarded in a try block.
+"use strict";
+
+var arr = [];
+
+var getProto = Object.getPrototypeOf;
+
+var slice = arr.slice;
+
+var flat = arr.flat ? function( array ) {
+ return arr.flat.call( array );
+} : function( array ) {
+ return arr.concat.apply( [], array );
+};
+
+
+var push = arr.push;
+
+var indexOf = arr.indexOf;
+
+var class2type = {};
+
+var toString = class2type.toString;
+
+var hasOwn = class2type.hasOwnProperty;
+
+var fnToString = hasOwn.toString;
+
+var ObjectFunctionString = fnToString.call( Object );
+
+var support = {};
+
+var isFunction = function isFunction( obj ) {
+
+ // Support: Chrome <=57, Firefox <=52
+ // In some browsers, typeof returns "function" for HTML
写章评
+