diff --git "a/\345\274\240\344\272\246\345\270\214/11.26CSS\350\275\254\346\215\242\357\274\214\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/1.jpeg" "b/\345\274\240\344\272\246\345\270\214/11.26CSS\350\275\254\346\215\242\357\274\214\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/1.jpeg" new file mode 100644 index 0000000000000000000000000000000000000000..570848be15de8336e2093dd8b44e0a4e9406ac9b Binary files /dev/null and "b/\345\274\240\344\272\246\345\270\214/11.26CSS\350\275\254\346\215\242\357\274\214\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/1.jpeg" differ diff --git "a/\345\274\240\344\272\246\345\270\214/11.26CSS\350\275\254\346\215\242\357\274\214\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/clock.html" "b/\345\274\240\344\272\246\345\270\214/11.26CSS\350\275\254\346\215\242\357\274\214\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/clock.html" index fa114772c22cbf33871d607085e3d6d524f86b4f..c6e7fe33bdde00f7f15fffee7e6497e56ced0c94 100644 --- "a/\345\274\240\344\272\246\345\270\214/11.26CSS\350\275\254\346\215\242\357\274\214\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/clock.html" +++ "b/\345\274\240\344\272\246\345\270\214/11.26CSS\350\275\254\346\215\242\357\274\214\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/clock.html" @@ -12,7 +12,9 @@ height: 500px; border: 5px solid #4faa57; border-radius: 50%; - background-color: antiquewhite; + /* background-color: antiquewhite; */ + background-image: url(1.jpeg); + background: center; top: 50%; left: 50%; transform: translate(-50%,-50%); diff --git "a/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/demo.html" "b/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/demo.html" new file mode 100644 index 0000000000000000000000000000000000000000..0dd6dbdccad5be2aca627de831d0b28daa87552a --- /dev/null +++ "b/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/demo.html" @@ -0,0 +1,350 @@ + + + + + + JavaScript百炼成仙 + + + + + + +
+
+
+
+
+
+
+ +
加入书架
+ +
+ +

写章评

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

目录

+
+
+ +

黑夜

+
+
+ +

设置

+
+
+ +

书评

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

第1章 掌握JavaScript基础

+

1.1 初入宗门

+

乐阳村处于脚本大陆东部的边缘地带,其民风淳朴,村民日出而作、日落而息。某一日清晨,所有村民都来到了村口,正在为一个十五六岁的少年送行。只见那个少年虽然身体瘦弱,可是目中却绽放出异彩;身躯虽不壮实,倒也挺拔。

+

“叶小凡,你是我们全村人的骄傲,是百年来唯一具备修行JavaScript甲等资质的孩子!马上会有千鹤派的大人来接你,今后你一定要认真修行,给我们全村的人争光!”

+

他叫叶小凡,几天前通过了修行资质的检验,符合了修行JavaScript的资质。

+

“千鹤派!”叶小凡眼前一亮,语气中伴随着激动,两眼放光。千鹤派在脚本大陆是数一数二的大门派,每个宗门弟子都能够修炼一种神奇的功法——JavaScript,修成之后,其威力之大,足以翻山倒海,称霸一方天地!

+

“这里是……?”叶小凡一辈子都没有见过如此宏伟的建筑,忍不住开口。一想到今后可以在这里修行,更是兴奋,“哈哈,我叶小凡今后一定能突破层层障碍,成为JavaScript一代大师!”

+

“这里是千鹤派的青山院。”林元青招来仆从,给叶小凡随意找了一个住处,又给了一卷功法,吩咐了几句后,似乎还有其他要事,便立即化为一道长虹离去了。

+

叶小凡拿起功法一看,上面赫然写着“JavaScript基础修炼要诀”几个银光大字,他眼中放出异彩,一想到村中父老乡亲那期盼的眼神,便下定决心,不混出个名头绝不回去!

+

1.2 直接量

+

叶小凡的住处被安排在青山院西北角的一个房间,虽不宽敞,倒也干净。叶小凡两眼露出振奋的眼神,随便吃了点乡亲们准备的干粮后,就立刻开始打坐修行。编程之修,重在积累,而非资质。资质虽然重要,可是后天的努力更不可缺少。这些道理,叶小凡在还未上山之前就已经熟知!因此,即便是资质平凡,但只要肯下苦功,一样可以修得正果!叶小凡虽然具有甲等资质,但他依然不骄不躁,开始从《JavaScript基础修炼要诀》第一页学起。

+

修炼要诀第一章——直接量。

+

编程世界中的直接量,就是表面上可以见到的数据值。常见的直接量有数字、小数、字符串。修行者利用自身体内的能量,凝结出一个个简单的直接量。叶小凡目前的修为较低,连最基本的学徒境界都没到,体内能量薄弱,经过多次尝试,只能凝练出一些简单的数字,比如10、20。忽然,叶小凡目光一闪,一个字符串在体内形成!叶小凡细细感悟,原来是一个“Hello World”字符串,叶小凡善于观察,立刻发现了字符串和数字的不同。字符串的出现必然带着双引号,被很好地包裹住,而数字则是光秃秃的,如10或者20,没有双引号。

+

“原来,字符串一定需要用双引号包裹,那么单引号是否可行呢?”叶小凡重新运气,转眼间,一个用单引号包裹的‘Hello World’就出现了。见此,叶小凡大喜,哈哈,原来单引号也可以。

+

1 "Hello World"

+

2 'Hello World'

+

突然,这两个字符串和数字像是失去了依托,瞬间化为虚无。叶小凡一惊,心道:看来直接创造出来的直接量只是昙花一现,无法持久存在,要是有一个什么东西能把直接量装起来就好了。

+
+ + + + \ No newline at end of file diff --git "a/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/download.zip" "b/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/download.zip" new file mode 100644 index 0000000000000000000000000000000000000000..de1303ecf52479c859ae4a06fbde51297198e0af Binary files /dev/null and "b/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/download.zip" differ diff --git "a/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/download/font_f8n5owf07aq/demo.css" "b/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/download/font_f8n5owf07aq/demo.css" new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ "b/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/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/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/download/font_f8n5owf07aq/demo_index.html" "b/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/download/font_f8n5owf07aq/demo_index.html" new file mode 100644 index 0000000000000000000000000000000000000000..9a3b1a0176a78c7da71b409fd1ef655194970ec8 --- /dev/null +++ "b/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/download/font_f8n5owf07aq/demo_index.html" @@ -0,0 +1,391 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+ +
+
+
    + +
  • + +
    返回
    +
    
    +
  • + +
  • + +
    +
    
    +
  • + +
  • + +
    评论
    +
    
    +
  • + +
  • + +
    书评
    +
    
    +
  • + +
  • + +
    设置
    +
    
    +
  • + +
  • + +
    礼包
    +
    
    +
  • + +
  • + +
    钢笔
    +
    
    +
  • + +
  • + +
    目录
    +
    
    +
  • + +
  • + +
    黑夜模式
    +
    
    +
  • + +
+
+

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">&#x33;</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/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/download/font_f8n5owf07aq/iconfont.css" "b/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/download/font_f8n5owf07aq/iconfont.css" new file mode 100644 index 0000000000000000000000000000000000000000..419bde365ca633db02e2a752831e803d913c2ddb --- /dev/null +++ "b/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/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/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/download/font_f8n5owf07aq/iconfont.js" "b/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/download/font_f8n5owf07aq/iconfont.js" new file mode 100644 index 0000000000000000000000000000000000000000..37697faafc33c9aeeaf7e85a4438950a3955d91a --- /dev/null +++ "b/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/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/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/download/font_f8n5owf07aq/iconfont.json" "b/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/download/font_f8n5owf07aq/iconfont.json" new file mode 100644 index 0000000000000000000000000000000000000000..fd3d64302cdd050faf171ed6ff65dd9b08abe751 --- /dev/null +++ "b/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/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/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/download/font_f8n5owf07aq/iconfont.ttf" "b/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/download/font_f8n5owf07aq/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..37867dcb8dac85a3009d04d6ae870fbbcd054273 Binary files /dev/null and "b/\345\274\240\344\272\246\345\270\214/11.29\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/download/font_f8n5owf07aq/iconfont.ttf" differ diff --git "a/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/2021-12-01_103308.png" "b/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/2021-12-01_103308.png" new file mode 100644 index 0000000000000000000000000000000000000000..62ce7abe45db670f3a917b4d51b2b19f8d56aae6 Binary files /dev/null and "b/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/2021-12-01_103308.png" differ diff --git "a/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/demo01.html" "b/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..9952ef025593cacde93e5e50034b79300d047fc5 --- /dev/null +++ "b/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/demo01.html" @@ -0,0 +1,390 @@ + + + + + + JavaScript百炼成仙 + + + + + + + +
+
+ + + + + + + + + + + +
+ +
加入书架
+ +
+ + +

写章评

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

目录

+
+
+ + +

黑夜

+
+
+ + +

设置

+
+
+ + +

书评

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

第1章 掌握JavaScript基础

+

1.1 初入宗门

+

乐阳村处于脚本大陆东部的边缘地带,其民风淳朴,村民日出而作、日落而息。某一日清晨,所有村民都来到了村口,正在为一个十五六岁的少年送行。只见那个少年虽然身体瘦弱,可是目中却绽放出异彩;身躯虽不壮实,倒也挺拔。

+

“叶小凡,你是我们全村人的骄傲,是百年来唯一具备修行JavaScript甲等资质的孩子!马上会有千鹤派的大人来接你,今后你一定要认真修行,给我们全村的人争光!”

+

他叫叶小凡,几天前通过了修行资质的检验,符合了修行JavaScript的资质。

+

“千鹤派!”叶小凡眼前一亮,语气中伴随着激动,两眼放光。千鹤派在脚本大陆是数一数二的大门派,每个宗门弟子都能够修炼一种神奇的功法——JavaScript,修成之后,其威力之大,足以翻山倒海,称霸一方天地!

+

“这里是……?”叶小凡一辈子都没有见过如此宏伟的建筑,忍不住开口。一想到今后可以在这里修行,更是兴奋,“哈哈,我叶小凡今后一定能突破层层障碍,成为JavaScript一代大师!”

+

“这里是千鹤派的青山院。”林元青招来仆从,给叶小凡随意找了一个住处,又给了一卷功法,吩咐了几句后,似乎还有其他要事,便立即化为一道长虹离去了。

+

叶小凡拿起功法一看,上面赫然写着“JavaScript基础修炼要诀”几个银光大字,他眼中放出异彩,一想到村中父老乡亲那期盼的眼神,便下定决心,不混出个名头绝不回去!

+

1.2 直接量

+

叶小凡的住处被安排在青山院西北角的一个房间,虽不宽敞,倒也干净。叶小凡两眼露出振奋的眼神,随便吃了点乡亲们准备的干粮后,就立刻开始打坐修行。编程之修,重在积累,而非资质。资质虽然重要,可是后天的努力更不可缺少。这些道理,叶小凡在还未上山之前就已经熟知!因此,即便是资质平凡,但只要肯下苦功,一样可以修得正果!叶小凡虽然具有甲等资质,但他依然不骄不躁,开始从《JavaScript基础修炼要诀》第一页学起。

+

修炼要诀第一章——直接量。

+

编程世界中的直接量,就是表面上可以见到的数据值。常见的直接量有数字、小数、字符串。修行者利用自身体内的能量,凝结出一个个简单的直接量。叶小凡目前的修为较低,连最基本的学徒境界都没到,体内能量薄弱,经过多次尝试,只能凝练出一些简单的数字,比如10、20。忽然,叶小凡目光一闪,一个字符串在体内形成!叶小凡细细感悟,原来是一个“Hello World”字符串,叶小凡善于观察,立刻发现了字符串和数字的不同。字符串的出现必然带着双引号,被很好地包裹住,而数字则是光秃秃的,如10或者20,没有双引号。

+

“原来,字符串一定需要用双引号包裹,那么单引号是否可行呢?”叶小凡重新运气,转眼间,一个用单引号包裹的‘Hello World’就出现了。见此,叶小凡大喜,哈哈,原来单引号也可以。

+

1 "Hello World"

+

2 'Hello World'

+

突然,这两个字符串和数字像是失去了依托,瞬间化为虚无。叶小凡一惊,心道:看来直接创造出来的直接量只是昙花一现,无法持久存在,要是有一个什么东西能把直接量装起来就好了。

+
+ + + + \ No newline at end of file diff --git "a/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/demo02.html" "b/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/demo02.html" new file mode 100644 index 0000000000000000000000000000000000000000..45de53d9184613fa16d42db0df726f89125bd9b5 --- /dev/null +++ "b/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/demo02.html" @@ -0,0 +1,38 @@ + + + + + + Document + + + +
+ + + + + + + + + + + + + + + + + + + + 大家好 + +
+ + \ No newline at end of file diff --git "a/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/font_f8n5owf07aq/demo.css" "b/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/font_f8n5owf07aq/demo.css" new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ "b/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/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/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/font_f8n5owf07aq/demo_index.html" "b/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/font_f8n5owf07aq/demo_index.html" new file mode 100644 index 0000000000000000000000000000000000000000..9a3b1a0176a78c7da71b409fd1ef655194970ec8 --- /dev/null +++ "b/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/font_f8n5owf07aq/demo_index.html" @@ -0,0 +1,391 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+ +
+
+
    + +
  • + +
    返回
    +
    &#xe671;
    +
  • + +
  • + +
    +
    &#xe625;
    +
  • + +
  • + +
    评论
    +
    &#xe664;
    +
  • + +
  • + +
    书评
    +
    &#xe6cb;
    +
  • + +
  • + +
    设置
    +
    &#xe70f;
    +
  • + +
  • + +
    礼包
    +
    &#xe787;
    +
  • + +
  • + +
    钢笔
    +
    &#xe611;
    +
  • + +
  • + +
    目录
    +
    &#xe6a4;
    +
  • + +
  • + +
    黑夜模式
    +
    &#xe76b;
    +
  • + +
+
+

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">&#x33;</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/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/font_f8n5owf07aq/iconfont.css" "b/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/font_f8n5owf07aq/iconfont.css" new file mode 100644 index 0000000000000000000000000000000000000000..419bde365ca633db02e2a752831e803d913c2ddb --- /dev/null +++ "b/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/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/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/font_f8n5owf07aq/iconfont.js" "b/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/font_f8n5owf07aq/iconfont.js" new file mode 100644 index 0000000000000000000000000000000000000000..37697faafc33c9aeeaf7e85a4438950a3955d91a --- /dev/null +++ "b/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/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/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/font_f8n5owf07aq/iconfont.json" "b/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/font_f8n5owf07aq/iconfont.json" new file mode 100644 index 0000000000000000000000000000000000000000..fd3d64302cdd050faf171ed6ff65dd9b08abe751 --- /dev/null +++ "b/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/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/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/font_f8n5owf07aq/iconfont.ttf" "b/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/font_f8n5owf07aq/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..37867dcb8dac85a3009d04d6ae870fbbcd054273 Binary files /dev/null and "b/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/font_f8n5owf07aq/iconfont.ttf" differ diff --git "a/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/font_f8n5owf07aq/svg.svg" "b/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/font_f8n5owf07aq/svg.svg" new file mode 100644 index 0000000000000000000000000000000000000000..2cf2e6d0c81bcd67cac55c276fa4ebd50acbfc7b --- /dev/null +++ "b/\345\274\240\344\272\246\345\270\214/12.1SVG\345\217\257\347\274\251\346\224\276\347\237\242\351\207\217\345\233\276\345\275\242/font_f8n5owf07aq/svg.svg" @@ -0,0 +1,10 @@ + + + Layer 1 + + + + + + + \ No newline at end of file