From 91c70e76518db5a0cab6a35decfc61a3a02d4c7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=AC=A7=E9=9B=AF?= <2836892088@qq.com> Date: Tue, 30 Nov 2021 20:13:46 +0800 Subject: [PATCH 1/6] =?UTF-8?q?211129-=E5=93=8D=E5=BA=94=E5=BC=8F=E8=AE=BE?= =?UTF-8?q?=E8=AE=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../demo01.html" | 372 ++++++++++++ .../font_wjtlk5pcf9/demo.css" | 539 ++++++++++++++++++ .../font_wjtlk5pcf9/demo_index.html" | 391 +++++++++++++ .../font_wjtlk5pcf9/iconfont.css" | 49 ++ .../font_wjtlk5pcf9/iconfont.js" | 1 + .../font_wjtlk5pcf9/iconfont.json" | 72 +++ .../font_wjtlk5pcf9/iconfont.ttf" | Bin 0 -> 4480 bytes 7 files changed, 1424 insertions(+) create mode 100644 "\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/demo01.html" create mode 100644 "\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/demo.css" create mode 100644 "\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/demo_index.html" create mode 100644 "\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/iconfont.css" create mode 100644 "\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/iconfont.js" create mode 100644 "\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/iconfont.json" create mode 100644 "\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/iconfont.ttf" diff --git "a/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/demo01.html" "b/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/demo01.html" new file mode 100644 index 0000000..458cf5c --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/demo01.html" @@ -0,0 +1,372 @@ + + + + + + + Document + + + + + +
+
+ + + + +
+
加入书架
+
+ +

写章评

+
+
+
上一章
+
下一章
+
+
+
+ +

目录

+
+
+ +

黑夜

+
+
+ +

设置

+
+
+ +

待评论

+
+
+
+
+
+
选择背景颜色: +
+
+
+
+
+
+
+
+
+
选择字号: + 特大 + 大 + 中 + 小 +
+
+ + + + + + +
+
+ +
+

第一章 偷偷

+ 
       烈日炎炎，蝉鸣声响破天际。
+ 
       旭日中学二楼的某间教室。陈明旭站在讲台上，拿着把教用三角尺讲课。上衣被汗水打湿了大半。空气热的像是要冒出泡。天花板上的风扇运作着，发出很大的声响。在这高温下，吹出来的风似乎都是滚烫的。
+ 
       底下的学生也一副昏昏欲睡的模样。他不免有些暴躁。
+ 
       “看黑板。”注意到坐在第三排女生的状态，陈明旭稍稍皱了眉，尺子拍打.黑板的力道加重，“听见没有！看黑板！”几个即将睡着的学生猛地清醒，睁大迷蒙的眼，逼迫自己看向黑板。
+ 
       女生仿佛没听见，依然低着头，拿着铅笔在纸上涂涂画画。她长着张漂亮而无害的脸，因为年龄尚小，还有些稚嫩，更显得可爱。坐姿端正，气质恬静温和，看上去就是那种老师最喜欢的听话学生。
+ 
       ——排开此时她把讲台上的老师当成空气的行为。
+ 
       陈明旭的眉头皱得更深，嘴里继续念叨着：“角一等于角二，角三等于108度——”见题目都快读完了，她还没有要抬起头的征兆。陈明旭忍了半天的怒火瞬间上了头，重重地把三角尺拍在桌上。塑料尺和木桌撞击，发出巨大的声响。这声音吓得全班同时瑟缩了下，接踵而来的一声怒吼更是让气氛变得僵硬。
+ 
       “桑稚！”
+ 
       被点到名的桑稚抬起头，看了陈明旭两秒。而后把手中的笔放下，自觉站了起来。陈明旭按捺着脾气道：“我刚刚说什么了？”桑稚看了眼黑板上的图，神情平静：“角四等于72度。”习惯了她任何时刻都这么一副乖乖学生的模样，陈明旭这次没再被骗到，又拿尺子拍了拍桌面，冷笑道：“我还没讲到那！”
+
+
+ + + + \ No newline at end of file diff --git "a/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/demo.css" "b/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/demo.css" new file mode 100644 index 0000000..a67054a --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/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/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/demo_index.html" "b/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/demo_index.html" new file mode 100644 index 0000000..2a5bc21 --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/demo_index.html" @@ -0,0 +1,391 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + +
+
+
+
    + +
  • + 󰇚 +
    礼物 活动
    +
    &#xf01da;
    +
    • + +
  • + +
    书本
    +
    &#xe625;
    +
    • + +
  • + +
    待评论
    +
    &#xe623;
    +
    • + +
  • + +
    目录
    +
    &#xe890;
    +
    • + +
  • + +
    评论
    +
    &#xe891;
    +
    • + +
  • + +
    返回
    +
    &#xe624;
    +
    • + +
  • + +
    设置
    +
    &#xe70f;
    +
    • + +
  • + +
    钢笔
    +
    &#xe648;
    +
    • + +
  • + +
    黑夜模式
    +
    &#xe615;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1638267363497') 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">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 礼物 活动 +
    +
    .icon-liwuhuodong +
    +
    • + +
  • + +
    + 书本 +
    +
    .icon-shuben +
    +
    • + +
  • + +
    + 待评论 +
    +
    .icon-weibiaoti2fuzhi06 +
    +
    • + +
  • + +
    + 目录 +
    +
    .icon-mulu +
    +
    • + +
  • + +
    + 评论 +
    +
    .icon-pinglun +
    +
    • + +
  • + +
    + 返回 +
    +
    .icon-fanhui +
    +
    • + +
  • + +
    + 设置 +
    +
    .icon-shezhi +
    +
    • + +
  • + +
    + 钢笔 +
    +
    .icon-gangbi +
    +
    • + +
  • + +
    + 黑夜模式 +
    +
    .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-liwuhuodong
    +
    • + +
  • + +
    书本
    +
    #icon-shuben
    +
    • + +
  • + +
    待评论
    +
    #icon-weibiaoti2fuzhi06
    +
    • + +
  • + +
    目录
    +
    #icon-mulu
    +
    • + +
  • + +
    评论
    +
    #icon-pinglun
    +
    • + +
  • + +
    返回
    +
    #icon-fanhui
    +
    • + +
  • + +
    设置
    +
    #icon-shezhi
    +
    • + +
  • + +
    钢笔
    +
    #icon-gangbi
    +
    • + +
  • + +
    黑夜模式
    +
    #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/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/iconfont.css" "b/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/iconfont.css" new file mode 100644 index 0000000..a14d60e --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/iconfont.css" @@ -0,0 +1,49 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1638267363497') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-liwuhuodong:before { + content: "\f01da"; +} + +.icon-shuben:before { + content: "\e625"; +} + +.icon-weibiaoti2fuzhi06:before { + content: "\e623"; +} + +.icon-mulu:before { + content: "\e890"; +} + +.icon-pinglun:before { + content: "\e891"; +} + +.icon-fanhui:before { + content: "\e624"; +} + +.icon-shezhi:before { + content: "\e70f"; +} + +.icon-gangbi:before { + content: "\e648"; +} + +.icon-heiyemoshi:before { + content: "\e615"; +} + diff --git "a/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/iconfont.js" "b/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/iconfont.js" new file mode 100644 index 0000000..37b490b --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/iconfont.js" @@ -0,0 +1 @@ +!function(c){var t,l,e,a,o,i='',n=(n=document.getElementsByTagName("script"))[n.length-1].getAttribute("data-injectcss"),h=function(c,t){t.parentNode.insertBefore(c,t)};if(n&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function d(){o||(o=!0,e())}function s(){try{a.documentElement.doScroll("left")}catch(c){return void setTimeout(s,50)}d()}t=function(){var c,t;(t=document.createElement("div")).innerHTML=i,i=null,(c=t.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",t=c,(c=document.body).firstChild?h(t,c.firstChild):c.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),t()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(e=t,a=c.document,o=!1,s(),a.onreadystatechange=function(){"complete"==a.readyState&&(a.onreadystatechange=null,d())})}(window); \ No newline at end of file diff --git "a/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/iconfont.json" "b/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/iconfont.json" new file mode 100644 index 0000000..1e10ce1 --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/iconfont.json" @@ -0,0 +1,72 @@ +{ + "id": "", + "name": "", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "201525", + "name": "礼物 活动", + "font_class": "liwuhuodong", + "unicode": "f01da", + "unicode_decimal": 983514 + }, + { + "icon_id": "397957", + "name": "书本", + "font_class": "shuben", + "unicode": "e625", + "unicode_decimal": 58917 + }, + { + "icon_id": "1068812", + "name": "待评论", + "font_class": "weibiaoti2fuzhi06", + "unicode": "e623", + "unicode_decimal": 58915 + }, + { + "icon_id": "2076262", + "name": "目录", + "font_class": "mulu", + "unicode": "e890", + "unicode_decimal": 59536 + }, + { + "icon_id": "2076265", + "name": "评论", + "font_class": "pinglun", + "unicode": "e891", + "unicode_decimal": 59537 + }, + { + "icon_id": "2674472", + "name": "返回", + "font_class": "fanhui", + "unicode": "e624", + "unicode_decimal": 58916 + }, + { + "icon_id": "3456457", + "name": "设置", + "font_class": "shezhi", + "unicode": "e70f", + "unicode_decimal": 59151 + }, + { + "icon_id": "5649593", + "name": "钢笔", + "font_class": "gangbi", + "unicode": "e648", + "unicode_decimal": 58952 + }, + { + "icon_id": "18424142", + "name": "黑夜模式", + "font_class": "heiyemoshi", + "unicode": "e615", + "unicode_decimal": 58901 + } + ] +} diff --git "a/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/iconfont.ttf" "b/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/font_wjtlk5pcf9/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..5161ac0e4335f5cb52d6b014b41a7da8c2111a12 GIT binary patch literal 4480 zcmd^CX>4586~4>c-@Ms(+p~IRvUzNe?U_J`Q$k2A2n5K|R;3|c#`b_ccI`1)gs2;S zP!uXQsiKvtB9$s__|g8VLig8U*!CeggOmQup+1c0Zn5#}SDw3{ z5bwumKS5wSUtV1%cS@*23j`f-F*6(rs7oi$P2J_W?jOW#@&5Ujr^W?at6W`{2>%+Y z8ewf=p~)c6fg&D3HSiL$Dyn!|?R{jJupK*h?<4M+(MFxbg%Qpp+CPoyOl@k^(I#3b z+C(b_g%ZU<;Fkz}l*s7rA@(cK9%+^IJSkDw!HCR3y~1`G{L)$s@6exdxg?_2<#{c`{avX49+YP$#Wh=p7WF^~5Vun__ zTS>&wO0Jbew62V_l8Cr>Jgo!|lXo9&B{8e-KGsU`x`+P3Nf%@0DO#rQvjgk}_Ms$6 zPs)9;1@f!!@h5na6v<|?o$MwD$SAo7LfLX5U&yO&sun3qMO7l%jM7De;fNCQ1;YdB zQhCTXSQw^T>0q8`eFLR1=n5ZZkpu;QBotJ#>7jHfEc>#VJb23kfpVpsppmT5jA}ZR zMg!l`8Rk-c-8DU9+3vBPYu4pC4|S%BiI`kWvGu8<6ixK({p1tf?S3mUa(%$dEyH!x zGVIssM#Hin{6x1b-9x>B>qio&T)Opnw@x?Ouj_7he=c2!b$HB?-rf<@(-AAAbH&s| ze7$B__G_tPF-41(rLB)oq>9a_>6a|sehpH0X8V1X*%9_ww@w(==1){rcMg%G>@VYQ>PO3*whKzx5W?(v*{m zrbu6q*ym1c;~A*H$Ii4$p{Th-cCf_x^9cknc7oLvevZdUl=PFE$RTnZaaKyOP=CAE}zon69bz6N)Y=OyU-&v!5Yy?ogSUi8g-|O-t$Ew`V0?QI0)fb@)$8QE&63 zXeJZ2On1PY_0Y3{$v`j_JG5Nbst5YEc9xRN%9o9SuAy{dC`I=&O;;TKlH`&^pQlCl zimovxshacIFVhF3>2%bd^ap1peoQgC{PZKYD-*RF(F{EnNV)^M(R^w$7(djL-`YpN z(N#+H6go=@dok7DiFNJlxcnJ*7B_(iBD0rlA-f0(WRzf7#2DPjuYw&OvAV%S1#lBB-LEtne>F`@XQy<_G;QLK#r(cl?2IUpo(J}!Tu#JUS4R%QZ^aW!mbJ9;_;Fcd zUBX4pw>0^^SaY6W)TGkN=8xhg>sQ0hbe%S@GwITA;5@|V8~%A zAS0!HrP96$k(F}8x!mwgBBMiIf5y>l zY05dJ-(rl}HTsDCmDebiB{{>rdf{|QCtP*i*;ija7f?@>>h{#v6JnW%L z7(PkTa2XB(%A>%SL4$|7X%Zr>^6ISYpLgB9r`VTG?^*8d?k(=Q{jU8tkMw7=-&L_M z1dODnCk;PSs1nyyGiyj*IV^i6J!`7kNtMZ7g-b3@8P#NuBza_=a*894%RZT@%>0p~ z@tWEu@7S)J_8t^H74q9v`bE{qxGdQxNj}+aW(+l|g{jQ6lwqWFfRJ{=BSEVH<>*7< zIK4Ek%3hhfBm)iTO1O$3n%=zd*AhUz^#>#Vk^*haaEt0_V-9+zjV0g>Z7ky)E48r# z`qnl!$VPHw8=KHLj~Sv8Zqy`C9%y5V|B@fJF++Sm+r}L9b8RdE|F(@~5+?7ou>yLt zjSX^uT5W8SJRQGbp*q^APNc?;rfTDJ^~t$B-b%2s0gF;d3(zzRw6kqr6_(5Zr!aw{?QZB92X~Q7J5uxH zT3lgzFN|l6zvzr}R{Th}9`QearALG$rxKN^LRG3^hcc*1%$eHZrRk-)iMjfevN*jo zR;~LES8HRn(YZ#gG`Vzay4F{gW|wA`)cIO{YG$dfOpey4mug_HqEVR|txt{BjOl9a NXmxgOak_@S{{ya@j{^Vz literal 0 HcmV?d00001 -- Gitee From b90a6238140b7f41c932e42582ae865bac1fd628 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=AC=A7=E9=9B=AF?= <2836892088@qq.com> Date: Wed, 1 Dec 2021 10:19:48 +0800 Subject: [PATCH 2/6] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../demo01.html" | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git "a/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/demo01.html" "b/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/demo01.html" index 458cf5c..f0925d7 100644 --- "a/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/demo01.html" +++ "b/\346\235\216\346\254\247\351\233\257/211129-\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241/demo01.html" @@ -123,7 +123,8 @@ line-height: 50px; background-color: black; color: white; - justify-content: end; + /* justify-content: end; */ + justify-content: flex-end; } .Top .iconfont { -- Gitee From ffa8a8191945322cb5bd7508d3256b1896906fb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=AC=A7=E9=9B=AF?= <2836892088@qq.com> Date: Wed, 1 Dec 2021 11:37:15 +0800 Subject: [PATCH 3/6] 211201-SVG --- .../211201-SVG/demo01.html" | 413 ++++++++++++++ .../211201-SVG/demo02.html" | 40 ++ .../211201-SVG/font_wjtlk5pcf9/demo.css" | 539 ++++++++++++++++++ .../font_wjtlk5pcf9/demo_index.html" | 391 +++++++++++++ .../211201-SVG/font_wjtlk5pcf9/iconfont.css" | 49 ++ .../211201-SVG/font_wjtlk5pcf9/iconfont.js" | 1 + .../211201-SVG/font_wjtlk5pcf9/iconfont.json" | 72 +++ .../211201-SVG/font_wjtlk5pcf9/iconfont.ttf" | Bin 0 -> 4480 bytes 8 files changed, 1505 insertions(+) create mode 100644 "\346\235\216\346\254\247\351\233\257/211201-SVG/demo01.html" create mode 100644 "\346\235\216\346\254\247\351\233\257/211201-SVG/demo02.html" create mode 100644 "\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/demo.css" create mode 100644 "\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/demo_index.html" create mode 100644 "\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/iconfont.css" create mode 100644 "\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/iconfont.js" create mode 100644 "\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/iconfont.json" create mode 100644 "\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/iconfont.ttf" diff --git "a/\346\235\216\346\254\247\351\233\257/211201-SVG/demo01.html" "b/\346\235\216\346\254\247\351\233\257/211201-SVG/demo01.html" new file mode 100644 index 0000000..83cbce6 --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/211201-SVG/demo01.html" @@ -0,0 +1,413 @@ + + + + + + + Document + + + + + + +
+
+ + + + + +
+
加入书架
+
+ + +

写章评

+
+
+
上一章
+
下一章
+
+
+
+ + +

目录

+
+
+ + +

黑夜

+
+
+ + +

设置

+
+
+ + +

待评论

+
+
+
+
+
+
选择背景颜色: +
+
+
+
+
+
+
+
+
+
选择字号: + 特大 + 大 + 中 + 小 +
+
+ + + + + + +
+
+ +
+

第一章 偷偷

+ 
       烈日炎炎，蝉鸣声响破天际。
+ 
       旭日中学二楼的某间教室。陈明旭站在讲台上，拿着把教用三角尺讲课。上衣被汗水打湿了大半。空气热的像是要冒出泡。天花板上的风扇运作着，发出很大的声响。在这高温下，吹出来的风似乎都是滚烫的。
+ 
       底下的学生也一副昏昏欲睡的模样。他不免有些暴躁。
+ 
       “看黑板。”注意到坐在第三排女生的状态，陈明旭稍稍皱了眉，尺子拍打.黑板的力道加重，“听见没有！看黑板！”几个即将睡着的学生猛地清醒，睁大迷蒙的眼，逼迫自己看向黑板。
+ 
       女生仿佛没听见，依然低着头，拿着铅笔在纸上涂涂画画。她长着张漂亮而无害的脸，因为年龄尚小，还有些稚嫩，更显得可爱。坐姿端正，气质恬静温和，看上去就是那种老师最喜欢的听话学生。
+ 
       ——排开此时她把讲台上的老师当成空气的行为。
+ 
       陈明旭的眉头皱得更深，嘴里继续念叨着：“角一等于角二，角三等于108度——”见题目都快读完了，她还没有要抬起头的征兆。陈明旭忍了半天的怒火瞬间上了头，重重地把三角尺拍在桌上。塑料尺和木桌撞击，发出巨大的声响。这声音吓得全班同时瑟缩了下，接踵而来的一声怒吼更是让气氛变得僵硬。
+ 
       “桑稚！”
+ 
       被点到名的桑稚抬起头，看了陈明旭两秒。而后把手中的笔放下，自觉站了起来。陈明旭按捺着脾气道：“我刚刚说什么了？”桑稚看了眼黑板上的图，神情平静：“角四等于72度。”习惯了她任何时刻都这么一副乖乖学生的模样，陈明旭这次没再被骗到，又拿尺子拍了拍桌面，冷笑道：“我还没讲到那！”
+
+
+ + + + \ No newline at end of file diff --git "a/\346\235\216\346\254\247\351\233\257/211201-SVG/demo02.html" "b/\346\235\216\346\254\247\351\233\257/211201-SVG/demo02.html" new file mode 100644 index 0000000..68b9beb --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/211201-SVG/demo02.html" @@ -0,0 +1,40 @@ + + + + + + + + Document + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git "a/\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/demo.css" "b/\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/demo.css" new file mode 100644 index 0000000..a67054a --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/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/\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/demo_index.html" "b/\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/demo_index.html" new file mode 100644 index 0000000..2a5bc21 --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/demo_index.html" @@ -0,0 +1,391 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+
    +
  • Unicode
    • +
  • Font class
    • +
  • Symbol
    • +
+ +
+
+
+
    + +
  • + 󰇚 +
    礼物 活动
    +
    &#xf01da;
    +
    • + +
  • + +
    书本
    +
    &#xe625;
    +
    • + +
  • + +
    待评论
    +
    &#xe623;
    +
    • + +
  • + +
    目录
    +
    &#xe890;
    +
    • + +
  • + +
    评论
    +
    &#xe891;
    +
    • + +
  • + +
    返回
    +
    &#xe624;
    +
    • + +
  • + +
    设置
    +
    &#xe70f;
    +
    • + +
  • + +
    钢笔
    +
    &#xe648;
    +
    • + +
  • + +
    黑夜模式
    +
    &#xe615;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1638267363497') 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">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 礼物 活动 +
    +
    .icon-liwuhuodong +
    +
    • + +
  • + +
    + 书本 +
    +
    .icon-shuben +
    +
    • + +
  • + +
    + 待评论 +
    +
    .icon-weibiaoti2fuzhi06 +
    +
    • + +
  • + +
    + 目录 +
    +
    .icon-mulu +
    +
    • + +
  • + +
    + 评论 +
    +
    .icon-pinglun +
    +
    • + +
  • + +
    + 返回 +
    +
    .icon-fanhui +
    +
    • + +
  • + +
    + 设置 +
    +
    .icon-shezhi +
    +
    • + +
  • + +
    + 钢笔 +
    +
    .icon-gangbi +
    +
    • + +
  • + +
    + 黑夜模式 +
    +
    .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-liwuhuodong
    +
    • + +
  • + +
    书本
    +
    #icon-shuben
    +
    • + +
  • + +
    待评论
    +
    #icon-weibiaoti2fuzhi06
    +
    • + +
  • + +
    目录
    +
    #icon-mulu
    +
    • + +
  • + +
    评论
    +
    #icon-pinglun
    +
    • + +
  • + +
    返回
    +
    #icon-fanhui
    +
    • + +
  • + +
    设置
    +
    #icon-shezhi
    +
    • + +
  • + +
    钢笔
    +
    #icon-gangbi
    +
    • + +
  • + +
    黑夜模式
    +
    #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/\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/iconfont.css" "b/\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/iconfont.css" new file mode 100644 index 0000000..a14d60e --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/iconfont.css" @@ -0,0 +1,49 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1638267363497') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-liwuhuodong:before { + content: "\f01da"; +} + +.icon-shuben:before { + content: "\e625"; +} + +.icon-weibiaoti2fuzhi06:before { + content: "\e623"; +} + +.icon-mulu:before { + content: "\e890"; +} + +.icon-pinglun:before { + content: "\e891"; +} + +.icon-fanhui:before { + content: "\e624"; +} + +.icon-shezhi:before { + content: "\e70f"; +} + +.icon-gangbi:before { + content: "\e648"; +} + +.icon-heiyemoshi:before { + content: "\e615"; +} + diff --git "a/\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/iconfont.js" "b/\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/iconfont.js" new file mode 100644 index 0000000..37b490b --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/iconfont.js" @@ -0,0 +1 @@ +!function(c){var t,l,e,a,o,i='',n=(n=document.getElementsByTagName("script"))[n.length-1].getAttribute("data-injectcss"),h=function(c,t){t.parentNode.insertBefore(c,t)};if(n&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function d(){o||(o=!0,e())}function s(){try{a.documentElement.doScroll("left")}catch(c){return void setTimeout(s,50)}d()}t=function(){var c,t;(t=document.createElement("div")).innerHTML=i,i=null,(c=t.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",t=c,(c=document.body).firstChild?h(t,c.firstChild):c.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),t()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(e=t,a=c.document,o=!1,s(),a.onreadystatechange=function(){"complete"==a.readyState&&(a.onreadystatechange=null,d())})}(window); \ No newline at end of file diff --git "a/\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/iconfont.json" "b/\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/iconfont.json" new file mode 100644 index 0000000..1e10ce1 --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/iconfont.json" @@ -0,0 +1,72 @@ +{ + "id": "", + "name": "", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "201525", + "name": "礼物 活动", + "font_class": "liwuhuodong", + "unicode": "f01da", + "unicode_decimal": 983514 + }, + { + "icon_id": "397957", + "name": "书本", + "font_class": "shuben", + "unicode": "e625", + "unicode_decimal": 58917 + }, + { + "icon_id": "1068812", + "name": "待评论", + "font_class": "weibiaoti2fuzhi06", + "unicode": "e623", + "unicode_decimal": 58915 + }, + { + "icon_id": "2076262", + "name": "目录", + "font_class": "mulu", + "unicode": "e890", + "unicode_decimal": 59536 + }, + { + "icon_id": "2076265", + "name": "评论", + "font_class": "pinglun", + "unicode": "e891", + "unicode_decimal": 59537 + }, + { + "icon_id": "2674472", + "name": "返回", + "font_class": "fanhui", + "unicode": "e624", + "unicode_decimal": 58916 + }, + { + "icon_id": "3456457", + "name": "设置", + "font_class": "shezhi", + "unicode": "e70f", + "unicode_decimal": 59151 + }, + { + "icon_id": "5649593", + "name": "钢笔", + "font_class": "gangbi", + "unicode": "e648", + "unicode_decimal": 58952 + }, + { + "icon_id": "18424142", + "name": "黑夜模式", + "font_class": "heiyemoshi", + "unicode": "e615", + "unicode_decimal": 58901 + } + ] +} diff --git "a/\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/iconfont.ttf" "b/\346\235\216\346\254\247\351\233\257/211201-SVG/font_wjtlk5pcf9/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..5161ac0e4335f5cb52d6b014b41a7da8c2111a12 GIT binary patch literal 4480 zcmd^CX>4586~4>c-@Ms(+p~IRvUzNe?U_J`Q$k2A2n5K|R;3|c#`b_ccI`1)gs2;S zP!uXQsiKvtB9$s__|g8VLig8U*!CeggOmQup+1c0Zn5#}SDw3{ z5bwumKS5wSUtV1%cS@*23j`f-F*6(rs7oi$P2J_W?jOW#@&5Ujr^W?at6W`{2>%+Y z8ewf=p~)c6fg&D3HSiL$Dyn!|?R{jJupK*h?<4M+(MFxbg%Qpp+CPoyOl@k^(I#3b z+C(b_g%ZU<;Fkz}l*s7rA@(cK9%+^IJSkDw!HCR3y~1`G{L)$s@6exdxg?_2<#{c`{avX49+YP$#Wh=p7WF^~5Vun__ zTS>&wO0Jbew62V_l8Cr>Jgo!|lXo9&B{8e-KGsU`x`+P3Nf%@0DO#rQvjgk}_Ms$6 zPs)9;1@f!!@h5na6v<|?o$MwD$SAo7LfLX5U&yO&sun3qMO7l%jM7De;fNCQ1;YdB zQhCTXSQw^T>0q8`eFLR1=n5ZZkpu;QBotJ#>7jHfEc>#VJb23kfpVpsppmT5jA}ZR zMg!l`8Rk-c-8DU9+3vBPYu4pC4|S%BiI`kWvGu8<6ixK({p1tf?S3mUa(%$dEyH!x zGVIssM#Hin{6x1b-9x>B>qio&T)Opnw@x?Ouj_7he=c2!b$HB?-rf<@(-AAAbH&s| ze7$B__G_tPF-41(rLB)oq>9a_>6a|sehpH0X8V1X*%9_ww@w(==1){rcMg%G>@VYQ>PO3*whKzx5W?(v*{m zrbu6q*ym1c;~A*H$Ii4$p{Th-cCf_x^9cknc7oLvevZdUl=PFE$RTnZaaKyOP=CAE}zon69bz6N)Y=OyU-&v!5Yy?ogSUi8g-|O-t$Ew`V0?QI0)fb@)$8QE&63 zXeJZ2On1PY_0Y3{$v`j_JG5Nbst5YEc9xRN%9o9SuAy{dC`I=&O;;TKlH`&^pQlCl zimovxshacIFVhF3>2%bd^ap1peoQgC{PZKYD-*RF(F{EnNV)^M(R^w$7(djL-`YpN z(N#+H6go=@dok7DiFNJlxcnJ*7B_(iBD0rlA-f0(WRzf7#2DPjuYw&OvAV%S1#lBB-LEtne>F`@XQy<_G;QLK#r(cl?2IUpo(J}!Tu#JUS4R%QZ^aW!mbJ9;_;Fcd zUBX4pw>0^^SaY6W)TGkN=8xhg>sQ0hbe%S@GwITA;5@|V8~%A zAS0!HrP96$k(F}8x!mwgBBMiIf5y>l zY05dJ-(rl}HTsDCmDebiB{{>rdf{|QCtP*i*;ija7f?@>>h{#v6JnW%L z7(PkTa2XB(%A>%SL4$|7X%Zr>^6ISYpLgB9r`VTG?^*8d?k(=Q{jU8tkMw7=-&L_M z1dODnCk;PSs1nyyGiyj*IV^i6J!`7kNtMZ7g-b3@8P#NuBza_=a*894%RZT@%>0p~ z@tWEu@7S)J_8t^H74q9v`bE{qxGdQxNj}+aW(+l|g{jQ6lwqWFfRJ{=BSEVH<>*7< zIK4Ek%3hhfBm)iTO1O$3n%=zd*AhUz^#>#Vk^*haaEt0_V-9+zjV0g>Z7ky)E48r# z`qnl!$VPHw8=KHLj~Sv8Zqy`C9%y5V|B@fJF++Sm+r}L9b8RdE|F(@~5+?7ou>yLt zjSX^uT5W8SJRQGbp*q^APNc?;rfTDJ^~t$B-b%2s0gF;d3(zzRw6kqr6_(5Zr!aw{?QZB92X~Q7J5uxH zT3lgzFN|l6zvzr}R{Th}9`QearALG$rxKN^LRG3^hcc*1%$eHZrRk-)iMjfevN*jo zR;~LES8HRn(YZ#gG`Vzay4F{gW|wA`)cIO{YG$dfOpey4mug_HqEVR|txt{BjOl9a NXmxgOak_@S{{ya@j{^Vz literal 0 HcmV?d00001 -- Gitee From a93ec6bf8703b1dc577dd059ff35b595be51364d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=AC=A7=E9=9B=AF?= <2836892088@qq.com> Date: Thu, 2 Dec 2021 18:04:40 +0800 Subject: [PATCH 4/6] =?UTF-8?q?211202-H5=E8=A1=A8=E5=8D=95=E5=85=83?= =?UTF-8?q?=E7=B4=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../demo01.html" | 40 ++ .../demo02.html" | 258 +++++++++ .../font_uuvtyvp8x4/demo.css" | 539 ++++++++++++++++++ .../font_uuvtyvp8x4/demo_index.html" | 230 ++++++++ .../font_uuvtyvp8x4/iconfont.css" | 21 + .../font_uuvtyvp8x4/iconfont.js" | 1 + .../font_uuvtyvp8x4/iconfont.json" | 23 + .../font_uuvtyvp8x4/iconfont.ttf" | Bin 0 -> 2056 bytes 8 files changed, 1112 insertions(+) create mode 100644 "\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/demo01.html" create mode 100644 "\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/demo02.html" create mode 100644 "\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/demo.css" create mode 100644 "\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/demo_index.html" create mode 100644 "\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/iconfont.css" create mode 100644 "\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/iconfont.js" create mode 100644 "\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/iconfont.json" create mode 100644 "\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/iconfont.ttf" diff --git "a/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/demo01.html" "b/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/demo01.html" new file mode 100644 index 0000000..e9a98c4 --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/demo01.html" @@ -0,0 +1,40 @@ + + + + + + + Document + + + +

简单的表单

+

基本信息

+
+
+ 客户信息 + 姓名： +
+ 电话： +
+ 邮箱地址： +
+
+ 图书 + + + + + + + 数量(最大：5) +
+ +
+ + \ No newline at end of file diff --git "a/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/demo02.html" "b/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/demo02.html" new file mode 100644 index 0000000..12ab879 --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/demo02.html" @@ -0,0 +1,258 @@ + + + + + + + + Document + + + + + +
+
+ + 企业账户注册 +
+
+ + 个人账户注册 +
+
+

有企业营业执照（含个体工商户）的用户请注册。权益如下：做企业实名认证；作为卖家身份开店；作为买家身份采购。

+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+

了解更多

+ +
+
+ + + + + \ No newline at end of file diff --git "a/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/demo.css" "b/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/demo.css" new file mode 100644 index 0000000..a67054a --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/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/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/demo_index.html" "b/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/demo_index.html" new file mode 100644 index 0000000..4e4fd17 --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/demo_index.html" @@ -0,0 +1,230 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+
    +
  • Unicode
    • +
  • Font class
    • +
  • Symbol
    • +
+ +
+
+
+
    + +
  • + +
    个人
    +
    &#xe610;
    +
    • + +
  • + +
    企业
    +
    &#xe630;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1638420023629') 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">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 个人 +
    +
    .icon-geren +
    +
    • + +
  • + +
    + 企业 +
    +
    .icon-qiye +
    +
    • + +
+
+

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-geren
    +
    • + +
  • + +
    企业
    +
    #icon-qiye
    +
    • + +
+
+

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/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/iconfont.css" "b/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/iconfont.css" new file mode 100644 index 0000000..fb59a0c --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/iconfont.css" @@ -0,0 +1,21 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1638420023629') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-geren:before { + content: "\e610"; +} + +.icon-qiye:before { + content: "\e630"; +} + diff --git "a/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/iconfont.js" "b/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/iconfont.js" new file mode 100644 index 0000000..97773f1 --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/iconfont.js" @@ -0,0 +1 @@ +!function(e){var t,n,c,o,i,s='',a=(a=document.getElementsByTagName("script"))[a.length-1].getAttribute("data-injectcss"),d=function(e,t){t.parentNode.insertBefore(e,t)};if(a&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(e){console&&console.log(e)}}function l(){i||(i=!0,c())}function m(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(m,50)}l()}t=function(){var e,t;(t=document.createElement("div")).innerHTML=s,s=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?d(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&&(c=t,o=e.document,i=!1,m(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,l())})}(window); \ No newline at end of file diff --git "a/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/iconfont.json" "b/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/iconfont.json" new file mode 100644 index 0000000..2ac0e5a --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/iconfont.json" @@ -0,0 +1,23 @@ +{ + "id": "", + "name": "", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "4942638", + "name": "个人", + "font_class": "geren", + "unicode": "e610", + "unicode_decimal": 58896 + }, + { + "icon_id": "7191776", + "name": "企业", + "font_class": "qiye", + "unicode": "e630", + "unicode_decimal": 58928 + } + ] +} diff --git "a/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/iconfont.ttf" "b/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/font_uuvtyvp8x4/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..f33937c27a682b29da1c3056914d874205118da1 GIT binary patch literal 2056 zcmd^A&rcgi7=5$5wo{zi(8MM{ViqU_YRh(PV+a8xN&yur1%(9VP>~vYZIk*}%_a(! zA|bVkTD4ND-r!WJr`#g-Q1!>5w_c#ip;9kx#G#^xR#h)Zz0~y0?mA7F4aVeGP7aUOX7P<{v+R*Vg{D+xT1xo2>?AkM1!jl4X%2sVL()%ad#if54&T+x;zw zV-m_Mv#(u-uaq$>=#-1Fij038i_%&l!}0A%!9Lk5$OyO{R?{Fpf{VGnuk4V!Yq#Q8 zBm^TBxKy&wD2w@-9KP9a-H%)Q0rf|0QugF-D00H45po`82t;gJtT_6sWMyQ8Ei)#s zSsFK60Y%Po$X#f*RLTtO9Jo(HqW^obkNKdp4cwLeR@>yx?#FF=bk^h@u->e?z*Fes zZclI@dwt@JI2lZ&CqybL+Cxg`A1DQ&B}h zXQXp29DqGLoA*)e)Xwo)3548D3o&@@NV)&(OlE@(IP^v**vB4HGol zS8mUAMJ5I+= zZ_##W9bUiRtL(6D+-vNFf;+*G!0uKs)c9=M>+^Y!st%GeFexSfpn}MA$YfW%i%$do zpwAcdi`_<2K_Cxgo71$ z(B)v2e6NEw;+Guk;=gsm!EW*s4sJmhGYo1G72|JnR?T0 zw#!C+eXUy2&qd=+YR;$__2w|^Hwy{V%q>a}|Hx{)=bMboT}#bR(t3Hb(}+# zpMa;M=BTPz%BNSej+>kDG}>@fwJ#9$H`J1MbV0?VT_k8 m_9&mGK5FGzmLCbb$ZyrNiYgSL3JtD;Q8y~uTWcGJl>H3}+#Lu2 literal 0 HcmV?d00001 -- Gitee From 1287f185ce4c58b9bb281ec5e4411617e0bbc9ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=AC=A7=E9=9B=AF?= <2836892088@qq.com> Date: Fri, 3 Dec 2021 16:01:45 +0800 Subject: [PATCH 5/6] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=B8=80=E4=B8=AA?= =?UTF-8?q?=E9=BB=98=E8=AE=A4=E9=80=89=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../demo02.html" | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git "a/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/demo02.html" "b/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/demo02.html" index 12ab879..a7c0eef 100644 --- "a/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/demo02.html" +++ "b/\346\235\216\346\254\247\351\233\257/211202-H5\350\241\250\345\215\225\345\205\203\347\264\240/demo02.html" @@ -64,9 +64,6 @@ } .main1 { - /* text-align: center; - padding: 40px; */ - /* visibility: visible; */ position: absolute; top: 15%; left: 40%; @@ -162,14 +159,15 @@

-