diff --git "a/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/demo01.html" "b/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..ed7d5dfef4f6bc7ac1802bcd9943e4ed69e3cb74 --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/demo01.html" @@ -0,0 +1,90 @@ + + + + + + + + Document + + + + + + + +
+
+
+ + + +
+
+
+
投诉
+
+ +
+
选择背景颜色： +
+
+
+
+
+
+
+
+ 选择字号： + 特大 + 大 + 中 + 小 +
+
+
全屏阅读
+
评论本章
+
返回本章
+
+书架
+
上一章
+
下一章
+
+
+
+

第一章 惊蛰

+
《烽火戏诸侯》著 连载 | 约940万字 更新于星期日 + 晚上 08:59
+

二月二，龙抬头。

+

暮色里，小镇名叫泥瓶巷的僻静地方，有位孤苦伶仃的清瘦少年，此时他正按照习俗，一手持蜡烛，一手持桃枝，照耀房梁、墙壁、木床等处，用桃枝敲敲打打，试图借此驱赶蛇蝎、蜈蚣等，嘴里念念有词，是这座小镇祖祖辈辈传下来的老话：二月二，烛照梁，桃打墙，人间蛇虫无处藏。 +

+

少年姓陈，名平安，爹娘早逝。小镇的瓷器极负盛名，本朝开国以来，就担当起“奉诏监烧献陵祭器”的重任，有朝廷官员常年驻扎此地，监理官窑事务。无依无靠的少年，很早就当起了烧瓷的窑匠，起先只能做些杂事粗活，跟着一个脾气糟糕的半路师傅，辛苦熬了几年，刚刚琢磨到一点烧瓷的门道，结果世事无常，小镇突然失去了官窑造办这张护身符，小镇周边数十座形若卧龙的窑炉，一夜之间全部被官府勒令关闭熄火。 +

+

陈平安放下新折的那根桃枝，吹灭蜡烛，走出屋子后，坐在台阶上，仰头望去，星空璀璨。

+

少年至今仍然清晰记得，那个只肯认自己做半个徒弟的老师傅，姓姚，在去年暮秋时分的清晨，被人发现坐在一张小竹椅子上，正对着窑头方向，闭眼了。

+

不过如姚老头这般钻牛角尖的人，终究少数。

+

世世代代都只会烧瓷一事的小镇匠人，既不敢僭越烧制贡品官窑，也不敢将库藏瓷器私自贩卖给百姓，只得纷纷另谋出路，十四岁的陈平安也被扫地出门，回到泥瓶巷后，继续守着这栋早已破败不堪的老宅，差不多是家徒四壁的惨淡场景，便是陈平安想要当败家子，也无从下手。 +

+

当了一段时间飘来荡去的孤魂野鬼，少年实在找不到挣钱的营生，靠着那点微薄积蓄，少年勉强填饱肚子，前几天听说几条街外的骑龙巷，来了个姓阮的外乡铁匠，对外宣称要收七八个打铁的学徒，不给工钱，但管饭，陈平安就赶紧跑去碰运气，不曾想那中年汉子只是斜瞥了他一眼，就把他拒之门外，当时陈平安就纳闷，难道打铁这门活计，不是看臂力大小，而是看面相好坏？ +

+

要知道陈平安虽然看着孱弱，但力气不容小觑，这是少年那些年烧瓷拉坯锻炼出来的身体底子，除此之外，陈平安还跟着姓姚的老人，跑遍了小镇方圆百里的山山水水，尝遍了四周各种土壤的滋味，任劳任怨，什么脏活累活都愿意做，毫不拖泥带水。可惜老姚始终不喜欢陈平安，嫌弃少年没有悟性，是榆木疙瘩不开窍，远远不如大徒弟刘羡阳，这也怪不得老人偏心，师父领进门，修行在个人，例如同样是枯燥乏味的拉坯，刘羡阳短短半年的功力，就抵得上陈平安辛苦三年的水准。 +

+
+
+
+

目录

+

黑夜

+

设置

+

书评

+ + + +
+
+
上一章
+
下一章
+
+
+
+ + + \ No newline at end of file diff --git "a/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/font_f8n5owf07aq/demo.css" "b/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/font_f8n5owf07aq/demo.css" new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/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/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/font_f8n5owf07aq/demo_index.html" "b/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/font_f8n5owf07aq/demo_index.html" new file mode 100644 index 0000000000000000000000000000000000000000..9a3b1a0176a78c7da71b409fd1ef655194970ec8 --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/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/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/font_f8n5owf07aq/iconfont.css" "b/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/font_f8n5owf07aq/iconfont.css" new file mode 100644 index 0000000000000000000000000000000000000000..419bde365ca633db02e2a752831e803d913c2ddb --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/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/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/font_f8n5owf07aq/iconfont.js" "b/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/font_f8n5owf07aq/iconfont.js" new file mode 100644 index 0000000000000000000000000000000000000000..37697faafc33c9aeeaf7e85a4438950a3955d91a --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/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/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/font_f8n5owf07aq/iconfont.json" "b/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/font_f8n5owf07aq/iconfont.json" new file mode 100644 index 0000000000000000000000000000000000000000..fd3d64302cdd050faf171ed6ff65dd9b08abe751 --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/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/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/font_f8n5owf07aq/iconfont.ttf" "b/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/font_f8n5owf07aq/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..37867dcb8dac85a3009d04d6ae870fbbcd054273 Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/font_f8n5owf07aq/iconfont.ttf" differ diff --git "a/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/index.css" "b/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/index.css" new file mode 100644 index 0000000000000000000000000000000000000000..be6f74a47e120a274691e6c5e32a2fc03cb29d8d --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/11.29\345\260\217\350\257\264/index.css" @@ -0,0 +1,201 @@ +body { + background-color: #f8f3e9; + +} + +* { + margin: 0; + padding: 0; +} + +.tousu { + display: none; +} + +.phone-head { + width: 100%; + height: 50px; + background-color: black; + display: none; +} + +.top { + background-color: rgb(189 178 208); + /* rgb(248, 246, 246) */ + width: 100%; + display: flex; + border-bottom: 3px solid yellowgreen; + height: 40px; + justify-content: space-between; + margin-top: 10px; + margin-bottom: 4%; + +} + +.footer2 { + width: 100%; + height: 40px; + background-color: black; + opacity: 0.8; + display: none; +} + +.footer1 { + width: 100%; + height: 50px; + background-color: black; + opacity: 0.8; + display: none; +} + +/* top 左边布局 */ +.header-left { + display: flex; + align-items: center; + +} + +.colorbox { + + margin: 0 0 0 5px; + box-sizing: border-box; +} + +span { + display: flex; + /* (选择背景颜色 and 选择字号) */ + margin: 0 0 0 10px; + /* 给这段字设置左边距 */ + + font-weight: bold; + /* 更改字体粗细 */ + +} + +.size { + margin: 0 0 0 5px; + +} + + +/* top 右边布局 */ +.header-right { + display: flex; + align-items: center; +} + +.right-box { + width: 80px; + height: 35px; + text-align: center; + line-height: 35px; + background-color: rgb(236, 230, 230); + margin: 0 0 0 5px; + box-sizing: border-box; + border-radius: 5px; + box-shadow: inset -2px -2px 1px rgb(137, 178, 185); + cursor: pointer; +} + +.right-box:active { + box-shadow: inset 2px 2px 4px; +} + +.main p { + line-height: 1.8; + overflow: hidden; + margin: .8em 0; + font-size: 18px; + padding: 30px 0 0 0; + text-indent: 2em; + margin-left: 15%; + margin-right: 15%; +} + +@media screen and (max-width:500px) { + .top { + display: none; + } + + h5 { + display: none; + } + + .tousu { + display: block; + text-align: right; + } + + .phone-head { + display: block; + opacity: 0.8; + display: grid; + grid-template-columns: repeat(2, auto); + align-items: center; + justify-content: space-between; + position: fixed; + top: 0; + } + + .img a { + color: white; + font-size: 18px; + padding: 0 0 0 5px; + text-decoration: none; + + } + .img2 a{ + padding: 0 11px 0 0; + text-decoration: none; + box-sizing: border-box; + color: white; + } + + .footer2 { + bottom: 50px; + position: fixed; + display: block; + display: grid; + border-bottom: 1px solid gray; + background-color: black; + } + + .footer1 { + display: block; + position: fixed; + bottom: 0; + display: grid; + grid-template-columns: repeat(4,auto); + } + + h2{ + text-align: left !important; + margin-top: 30px; + margin-left: 10%; + } + .footer2{ + display: grid; + grid-template-columns: repeat(2, auto); + align-items: center; + + color: white; + } + .footer2 div{ + justify-self: center; + align-self: center; + } + + .footer1 div{ + justify-self: center; + align-self: center; + + } + .footer1 a{ + color: white; + + } + .footer1 p{ + color: white; + } + +} \ No newline at end of file diff --git "a/\351\202\265\344\270\226\351\221\253/211115-css\344\275\234\344\270\232\344\270\213\351\233\252/demo01.html" "b/\351\202\265\344\270\226\351\221\253/211115-css\344\275\234\344\270\232\344\270\213\351\233\252/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..f833aba7ea9d902ecd4c458058a7e06e6f38a1ba --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/211115-css\344\275\234\344\270\232\344\270\213\351\233\252/demo01.html" @@ -0,0 +1,76 @@ + + + + + + Document + + + + + + 您的浏览器不支持canvas画布 + + + + + \ No newline at end of file diff --git "a/\351\202\265\344\270\226\351\221\253/211117-css\344\275\234\344\270\232\345\244\252\346\236\201/index.html" "b/\351\202\265\344\270\226\351\221\253/211117-css\344\275\234\344\270\232\345\244\252\346\236\201/index.html" new file mode 100644 index 0000000000000000000000000000000000000000..41c6e3a1629c00c5c94f4e0f00f1cfae3fc052f7 --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/211117-css\344\275\234\344\270\232\345\244\252\346\236\201/index.html" @@ -0,0 +1,85 @@ + + + + + + + + +
+
+
+
+ + diff --git "a/\351\202\265\344\270\226\351\221\253/211118-css\344\275\234\344\270\232-\350\203\214\346\231\257\344\270\216\350\276\271\346\241\206/index.html" "b/\351\202\265\344\270\226\351\221\253/211118-css\344\275\234\344\270\232-\350\203\214\346\231\257\344\270\216\350\276\271\346\241\206/index.html" new file mode 100644 index 0000000000000000000000000000000000000000..4b98edb45c507620c1efd969e46b06ce0863162d --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/211118-css\344\275\234\344\270\232-\350\203\214\346\231\257\344\270\216\350\276\271\346\241\206/index.html" @@ -0,0 +1,190 @@ + + + + + + Document + + + +

white-space

+

规定段落中的文本不进行换行：

+ +
+ +

word-break

+

在恰当的断字点进行换行

+ + +
+

word-wrap

+

允许长单词换行到下一行：

+ + +
+

word-spacing

+

规定段落中的字间距是多少像素：

+ + +
+

letter-spacing:normal

+

设置 h1 和 h2 元素的字母间距

+ + + \ No newline at end of file diff --git "a/\351\202\265\344\270\226\351\221\253/211119-css\344\275\234\344\270\232rgb\351\242\234\350\211\262/1.html" "b/\351\202\265\344\270\226\351\221\253/211119-css\344\275\234\344\270\232rgb\351\242\234\350\211\262/1.html" new file mode 100644 index 0000000000000000000000000000000000000000..942535a7d3e5a61a05d87b5916377c4851b370b5 --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/211119-css\344\275\234\344\270\232rgb\351\242\234\350\211\262/1.html" @@ -0,0 +1,90 @@ + + + + + + Document + + + +
+

rgb(128,128,128)

+
+
+
+ +

R

+
+
+ +

G

+
+
+ +

B

+
+
+ + + \ No newline at end of file diff --git "a/\351\202\265\344\270\226\351\221\253/211119-css\344\275\234\344\270\232rgb\351\242\234\350\211\262/2.html" "b/\351\202\265\344\270\226\351\221\253/211119-css\344\275\234\344\270\232rgb\351\242\234\350\211\262/2.html" new file mode 100644 index 0000000000000000000000000000000000000000..a191b03a24e816661059d3711f26c1ad2fbaaf57 --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/211119-css\344\275\234\344\270\232rgb\351\242\234\350\211\262/2.html" @@ -0,0 +1,99 @@ + + + + + + Document + + + +
+

rgb(128,128,128,1)

+
+
+
+ +

R

+
+
+ +

G

+
+
+ +

B

+
+
+ +

A

+
+
+ + + \ No newline at end of file diff --git "a/\351\202\265\344\270\226\351\221\253/211119-css\344\275\234\344\270\232rgb\351\242\234\350\211\262/3.html" "b/\351\202\265\344\270\226\351\221\253/211119-css\344\275\234\344\270\232rgb\351\242\234\350\211\262/3.html" new file mode 100644 index 0000000000000000000000000000000000000000..fb0dbea39f01843348dfdca8dc441bec0e1ff826 --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/211119-css\344\275\234\344\270\232rgb\351\242\234\350\211\262/3.html" @@ -0,0 +1,89 @@ + + + + + + Document + + + +
+

hsl(128,50%,50%)

+
+
+
+ +

H

+
+
+ +

S

+
+
+ +

L

+
+
+ + + \ No newline at end of file diff --git "a/\351\202\265\344\270\226\351\221\253/211119-css\344\275\234\344\270\232rgb\351\242\234\350\211\262/4.html" "b/\351\202\265\344\270\226\351\221\253/211119-css\344\275\234\344\270\232rgb\351\242\234\350\211\262/4.html" new file mode 100644 index 0000000000000000000000000000000000000000..548503f5ab3748d1d4b07873e0b5bbcd3ff4aabb --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/211119-css\344\275\234\344\270\232rgb\351\242\234\350\211\262/4.html" @@ -0,0 +1,98 @@ + + + + + + Document + + + +
+

hsla(128,50%,50%,0.5)

+
+
+
+ +

H

+
+
+ +

S

+
+
+ +

L

+
+
+ +

A

+
+
+ + + \ No newline at end of file diff --git "a/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/1.html" "b/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/1.html" new file mode 100644 index 0000000000000000000000000000000000000000..b9584c92408fa8523e58eaf9bf475f6cdbfe2e8d --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/1.html" @@ -0,0 +1,59 @@ + + + + + + Document + + + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + \ No newline at end of file diff --git "a/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/1.jpg" "b/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/1.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..853c880b6da06c7485efa7a176a2860db110d6c0 Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/1.jpg" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/2.jpg" "b/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/2.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..0ee8c4c2c8d6742f658dea121c7b90dce4a186d0 Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/2.jpg" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/3.jpg" "b/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/3.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..07192cc5e8afde11d9f285c9ade2d896a4d251ab Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/3.jpg" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/4.jpg" "b/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/4.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..b45e9b66d12185484ad605f026df2f220451633a Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/4.jpg" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/5.jpg" "b/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/5.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..a27e76ef6994fec16e5d5b40e7c2a740c9cc16a0 Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/5.jpg" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/6.jpg" "b/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/6.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..e235bb732366a2149c0446008a407575e69865c7 Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/6.jpg" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/7.jpg" "b/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/7.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..24262abac7f37ef9939db04fd0a01004cbcf815f Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/7.jpg" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/8.jpg" "b/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/8.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..e62c01c6536eca0f0e40deb37163edcc0daf9fd3 Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/8.jpg" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/9.jpg" "b/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/9.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..17f33a2186b2c7c40ed1d4a0ab352361b90dfda3 Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211122-css\344\275\234\344\270\232\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/image/9.jpg" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211124-css\344\275\234\344\270\232flex\345\270\203\345\261\200/css.css" "b/\351\202\265\344\270\226\351\221\253/211124-css\344\275\234\344\270\232flex\345\270\203\345\261\200/css.css" new file mode 100644 index 0000000000000000000000000000000000000000..469d6df77b5da7436887a61f8e53fbce4e7d5422 --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/211124-css\344\275\234\344\270\232flex\345\270\203\345\261\200/css.css" @@ -0,0 +1,161 @@ +.container{ + display: flex; + justify-content: space-around; +} +.box-one{ + width: 100px; + height: 100px; + background-color: #e7e7e7; + box-shadow: 0px 5px #d6d6d6; + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; +} +.point-one{ + width: 20px; + height: 20px; + border-radius: 50%; + background-color: black; +} +.box-two{ + display: flex; + width: 100px; + height: 100px; + background-color: #e7e7e7; + box-shadow: 0px 5px #d6d6d6; + border-radius: 5px; + justify-content: space-between; +} +.point-two-one{ + width: 20px; + height: 20px; + border-radius: 50%; + background-color: black; + +} +.point-two-two{ + width: 20px; + height: 20px; + border-radius: 50%; + background-color: black; + align-self: flex-end; +} +.box-three{ + display: flex; + width: 100px; + height: 100px; + background-color: #e7e7e7; + box-shadow: 0px 5px #d6d6d6; + border-radius: 5px; + justify-content: space-between; +} +.point-three-one{ + width: 20px; + height: 20px; + border-radius: 50%; + background-color: black; +} +.point-three-two{ + width: 20px; + height: 20px; + border-radius: 50%; + background-color: black; + align-self: center; +} +.point-three-three{ + width: 20px; + height: 20px; + border-radius: 50%; + background-color: black; + align-self: flex-end; +} +.box-four{ + display: flex; + width: 100px; + height: 100px; + background-color: #e7e7e7; + box-shadow: 0px 5px #d6d6d6; + border-radius: 5px; + flex-wrap: wrap; + align-content: space-between; +} +.point-four-one{ + width: 20px; + height: 20px; + border-radius: 50%; + background-color: black; + +} +.point-four-two{ + width: 20px; + height: 20px; + border-radius: 50%; + background-color: black; + + +} +.point-four-three{ + width: 20px; + height: 20px; + border-radius: 50%; + background-color: black; + +} +.point-four-four{ + width: 20px; + height: 20px; + border-radius: 50%; + background-color: black; +} +.box-four-one{ + flex-basis: 100%; + display: flex; + justify-content: space-between; +} +.box-four-two{ + display: flex; + flex-basis: 100%; + justify-content: space-between; + } + .box-five{ + display: flex; + width: 100px; + height: 100px; + background-color: #e7e7e7; + box-shadow: 0px 5px #d6d6d6; + border-radius: 5px; + flex-wrap: wrap; + align-content: space-between; + } +.point-five-mid{ + width: 20px; + height: 20px; + border-radius: 50%; + background-color: black; +} +.box-five-mid{ + display: flex; + flex-basis: 100%; + justify-content: center; +} +.point-six{ + width: 20px; + height: 20px; + border-radius: 50%; + background-color: black; +} +.box-six{ + display: flex; + width: 100px; + height: 100px; + background-color: #e7e7e7; + box-shadow: 0px 5px #d6d6d6; + border-radius: 5px; + justify-content: space-between; +} +.six-column{ + display: flex; + flex-direction: column; + justify-content: space-between; +} diff --git "a/\351\202\265\344\270\226\351\221\253/211124-css\344\275\234\344\270\232flex\345\270\203\345\261\200/demo01.html" "b/\351\202\265\344\270\226\351\221\253/211124-css\344\275\234\344\270\232flex\345\270\203\345\261\200/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..734a7d02e35e9d74dea52aa91ec2b0138aad4115 --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/211124-css\344\275\234\344\270\232flex\345\270\203\345\261\200/demo01.html" @@ -0,0 +1,83 @@ + + + + + + + Document + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git "a/\351\202\265\344\270\226\351\221\253/211124-css\344\275\234\344\270\232flex\345\270\203\345\261\200/flex\351\241\271\347\233\256/1.html" "b/\351\202\265\344\270\226\351\221\253/211124-css\344\275\234\344\270\232flex\345\270\203\345\261\200/flex\351\241\271\347\233\256/1.html" new file mode 100644 index 0000000000000000000000000000000000000000..46bc528ce6383abd56ad4d1afdb8f2625b6627e2 --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/211124-css\344\275\234\344\270\232flex\345\270\203\345\261\200/flex\351\241\271\347\233\256/1.html" @@ -0,0 +1,155 @@ + + + + + + + + Document + + + + + +
+ + + + + + + + + +
+

非内联flex

+ +
+
1
+
2
+
3
+
4
+
5
+
6
+
+ 非内联flex + + + + \ No newline at end of file diff --git "a/\351\202\265\344\270\226\351\221\253/211201-css\344\275\234\344\270\232SVG/demo01.html" "b/\351\202\265\344\270\226\351\221\253/211201-css\344\275\234\344\270\232SVG/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..7bf5ed40ccd1051c307a52dd890dddc2e7dba355 --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/211201-css\344\275\234\344\270\232SVG/demo01.html" @@ -0,0 +1,42 @@ + + + + + + + Document + + + + + + + + + + + + + + + + + Hello World + + + + + + + + + + + + + + + + \ No newline at end of file diff --git "a/\351\202\265\344\270\226\351\221\253/211202-css\344\275\234\344\270\232\350\241\250\345\215\225/demo01.html" "b/\351\202\265\344\270\226\351\221\253/211202-css\344\275\234\344\270\232\350\241\250\345\215\225/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..93874f655614279fe78f93e8588fbe76e7dcc268 --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/211202-css\344\275\234\344\270\232\350\241\250\345\215\225/demo01.html" @@ -0,0 +1,43 @@ + + + + + + Document + + + +
+
一个简单的表单
+ 基础形式 +
+ 客户信息 + 姓名：
+ 电话：
+ 邮箱地址： +
+
+ 书籍 + 图书： 数量(最大值为5)： + + + + + + + +
+
+ © 2021 版权所有 + +
+ + \ No newline at end of file diff --git "a/\351\202\265\344\270\226\351\221\253/211202-css\344\275\234\344\270\232\350\241\250\345\215\225/login.html" "b/\351\202\265\344\270\226\351\221\253/211202-css\344\275\234\344\270\232\350\241\250\345\215\225/login.html" new file mode 100644 index 0000000000000000000000000000000000000000..d4c4e96d52319f1aad71c2778eac8b4b0180cfb5 --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/211202-css\344\275\234\344\270\232\350\241\250\345\215\225/login.html" @@ -0,0 +1,129 @@ + + + + + + + Document + + + + +

账户注册

+ +
无企业营业执照的个人用户请注册个人账户。权益如下：做个人实名认证；作为买家身份采购； +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
会员名：
登录密码：
密码确认：
手机号码： +
+ + +
+
+ 创建网站账号的同时，我同意遵守：
《阿里巴巴服务条款》及《隐私声明》 +
+ +
+
+
+ + + + \ No newline at end of file diff --git "a/\351\202\265\344\270\226\351\221\253/211202-css\344\275\234\344\270\232\350\241\250\345\215\225/register.html" "b/\351\202\265\344\270\226\351\221\253/211202-css\344\275\234\344\270\232\350\241\250\345\215\225/register.html" new file mode 100644 index 0000000000000000000000000000000000000000..bfefe1b4adfff2c3baf2a46ddf84941507afdd2b --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/211202-css\344\275\234\344\270\232\350\241\250\345\215\225/register.html" @@ -0,0 +1,139 @@ + + + + + + + Document + + + + +

账户注册

+ +
无企业营业执照的个人用户请注册个人账户。权益如下：做个人实名认证；作为买家身份采购； +
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
会员名：
登录密码：
密码确认：
联系人姓名：
企业名称：
贸易身份：我要销售我要采购两者都是
手机号码： +
+ + +
+
+ 创建网站账号的同时，我同意遵守：
《阿里巴巴服务条款》及《隐私声明》 +
+ +
+
+
+ + + \ No newline at end of file diff --git "a/\351\202\265\344\270\226\351\221\253/211202-css\344\275\234\344\270\232\350\241\250\345\215\225/style.css" "b/\351\202\265\344\270\226\351\221\253/211202-css\344\275\234\344\270\232\350\241\250\345\215\225/style.css" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\351\202\265\344\270\226\351\221\253/211202-css\344\275\234\344\270\232\350\241\250\345\215\225/\346\226\260\345\273\272\346\226\207\346\234\254\346\226\207\346\241\243.txt" "b/\351\202\265\344\270\226\351\221\253/211202-css\344\275\234\344\270\232\350\241\250\345\215\225/\346\226\260\345\273\272\346\226\207\346\234\254\346\226\207\346\241\243.txt" new file mode 100644 index 0000000000000000000000000000000000000000..3fa9110615b106d7ede6dd5965acbb072a49fa27 --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/211202-css\344\275\234\344\270\232\350\241\250\345\215\225/\346\226\260\345\273\272\346\226\207\346\234\254\346\226\207\346\241\243.txt" @@ -0,0 +1,64 @@ +
+ + Ա + + ¼룺 +
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ֻ룺 + +
+ +
Ա
¼룺
ȷϣ
ϵ
ҵƣ
óݣҪҪɹ߶
+ + + +
+
+
+
+
+
+ ֻ룺
+ \ No newline at end of file diff --git "a/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/audio/happynewyear.mp3" "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/audio/happynewyear.mp3" new file mode 100644 index 0000000000000000000000000000000000000000..87d1b9217291a6bb28cd7ce37b6e7a083114150e Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/audio/happynewyear.mp3" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/music_disc.png" "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/music_disc.png" new file mode 100644 index 0000000000000000000000000000000000000000..5716f4fc65d8ef58399d5f9fd87254b7f7972f30 Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/music_disc.png" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/music_pointer.png" "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/music_pointer.png" new file mode 100644 index 0000000000000000000000000000000000000000..3b148617f0036813e52ee2a202bc15a23429e457 Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/music_pointer.png" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p1_bg.jpg" "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p1_bg.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..316710c14ab68405e840d2eb05f2501347cfa2a4 Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p1_bg.jpg" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p1_lantern.png" "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p1_lantern.png" new file mode 100644 index 0000000000000000000000000000000000000000..2b63c2a52de3e18808f498e4148b3dbcd814dcda Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p1_lantern.png" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p1_minxi.png" "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p1_minxi.png" new file mode 100644 index 0000000000000000000000000000000000000000..43f28a59c910f2afc5808dc61e6f7ef44dc6a7a4 Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p1_minxi.png" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p2_2022.png" "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p2_2022.png" new file mode 100644 index 0000000000000000000000000000000000000000..ecf7f086e9d2f6c658ae55c5eb80099c7027c099 Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p2_2022.png" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p2_bg.jpg" "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p2_bg.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..1e7392b1712f0f92a43e0f951a5bd96f14303322 Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p2_bg.jpg" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p2_circle_inner.png" "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p2_circle_inner.png" new file mode 100644 index 0000000000000000000000000000000000000000..7ce8cb402ecb33b597468a4301ee865e3101df15 Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p2_circle_inner.png" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p2_circle_middle.png" "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p2_circle_middle.png" new file mode 100644 index 0000000000000000000000000000000000000000..c1623989a0f141d300791976b5b11694ebe6365c Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p2_circle_middle.png" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p2_circle_outer.png" "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p2_circle_outer.png" new file mode 100644 index 0000000000000000000000000000000000000000..7499558bda43507716f3d9833afd03884f7e353a Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p2_circle_outer.png" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p3_bg.jpg" "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p3_bg.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..e1a33ded969a5b654e1c5cb85462227c63b1f876 Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p3_bg.jpg" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p3_blessing.png" "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p3_blessing.png" new file mode 100644 index 0000000000000000000000000000000000000000..44ce9967834e0862cff4ee83dc20313fdf904782 Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p3_blessing.png" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p3_couplet_first.png" "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p3_couplet_first.png" new file mode 100644 index 0000000000000000000000000000000000000000..165db8c8ba1a6528227f7ac3ce7971417da23745 Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p3_couplet_first.png" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p3_couplet_second.png" "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p3_couplet_second.png" new file mode 100644 index 0000000000000000000000000000000000000000..fdc1815d4349ee797792f2dcac19591b802bda9e Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p3_couplet_second.png" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p3_title2.png" "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p3_title2.png" new file mode 100644 index 0000000000000000000000000000000000000000..10fae7fdf5ccc6357dd8e90b1e6c1b8f4daec5dd Binary files /dev/null and "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/images/p3_title2.png" differ diff --git "a/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/index.html" "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/index.html" new file mode 100644 index 0000000000000000000000000000000000000000..41920aef2994e71539d0d7beac83968ee6a99fba --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/index.html" @@ -0,0 +1,48 @@ + + + + + + + Document + + + + + +
+ + + + +
+ +
+
+
+ 点击屏幕
+ 开启好运2022 +
+
+
软工学院新年特献
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+
+
+ + + \ No newline at end of file diff --git "a/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/index.js" "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/index.js" new file mode 100644 index 0000000000000000000000000000000000000000..0f5cd91c75ef992d0ade13c41a2383ea22256308 --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/index.js" @@ -0,0 +1,43 @@ +window.addEventListener('DOMContentLoaded', function() { + let music2 = document.getElementById('music2'); + let audio = document.querySelector('audio'); + + // 获取三个页面的元素 + let page1 = document.getElementById('page1'); + let page2 = document.getElementById('page2'); + let page3 = document.getElementById('page3'); + + if(audio.paused){ + // 暂停情况下 也就是不点击的情况下 默认为不旋转 + music2.style.animationPlayState = 'paused'; + }else{ + music2.style.animationPlayState = 'running'; + } + music2.addEventListener('touchstart', function(){ + // 如果暂停 就播放 如果播放就暂停 且动画也要跟着暂停或者播放 + if(audio.paused){ + audio.play(); + music2.classList.add('play') + music2.style.animationPlayState = 'running' + }else{ + audio.pause(); + music2.style.animationPlayState = 'paused' + } + }); + // 音乐播放完后 删除play这个类 + audio.addEventListener('ended', function() { + music2.classList.remove('play'); + }) + // 页面的切换 + page1.addEventListener('touchstart', function(){ + page1.style.display = 'none'; + page2.style.display = 'block'; + page3.style.display = 'block'; + + // 设置定时器 让第二个页面出现5秒钟后再出现第三个页面 + setTimeout(function(){ + page2.classList.add('fade-out'); + page3.classList.add('fade-in'); + },5000) + }) +}) diff --git "a/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/style.css" "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/style.css" new file mode 100644 index 0000000000000000000000000000000000000000..a76fa3105e4a689d38a359a52b4041ae8c40b068 --- /dev/null +++ "b/\351\202\265\344\270\226\351\221\253/211203-\350\264\272\345\215\241\345\256\236\346\210\230/style.css" @@ -0,0 +1,285 @@ +* { + margin: 0; + padding: 0; +} +html,body{ + height: 100%; +} +#music{ + position: fixed; + top: 3%; + right: 5%; + width: 15vw; + height: 15vw; + border: 4px solid red; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + z-index: 2; +} +#music>img:first-of-type{ + position: absolute; + top: 20%; + right: 0%; + width: 6vw; + z-index: 1; +} +#music>img:last-of-type{ + width: 79%; + +} +#music > .play{ + animation: musicRotate 5s linear infinite; +} +@keyframes musicRotate{ + 0%{ + transform: rotate(0deg); + } + 100%{ + transform: rotate(360deg); + } +} +.page{ + position: relative; + width: 100vw; + height: 100%; +} +.bg{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + background-image: url(./images/p1_bg.jpg); + background-repeat: no-repeat; + background-position: center center; + background-size: 100%; +} +#page1 .bg{ + background-image: url(./images/p1_bg.jpg); +} +#page2 .bg{ + background-image: url(./images/p2_bg.jpg); +} +#page3 .bg{ + background-image: url(./images/p3_bg.jpg); +} +.lantern{ + position: absolute; + top: -3%; + right: 0; + left: 0; + margin: 0 auto; + width: 45vw; + height: 70vh; + font-size: 1.25rem; + background: url(./images/p1_lantern.png) no-repeat center bottom; + background-size: 100%; + padding-top: 30vh; + box-sizing: border-box; + text-align: center; +} +#page1 .p1-icon{ + position: absolute; + left: 25%; + bottom: 8%; + width: 50vw; + height: 20vh; + background: url(./images/p1_minxi.png) no-repeat center center; + background-size: 100%; +} +#page1 .word{ + position: absolute; + left: 38%; + bottom: 8%; + font-size: 0.25rem; +} +#page1 .lantern::before{ + content: ''; + width: 30vw; + height: 17vh; + border-radius: 50%; + background-color: #d60b3b; + z-index: -1; + position: absolute; + top: -3%; + left: 0; + right: 0; + bottom: 0; + margin: auto; + opacity: 0.5; + box-shadow: 0 0 10vw 10vw #d60b3b; + animation: lanternOP 1s ease infinite alternate; +} +/* 红光动画 */ +@keyframes lanternOP{ + 0%{ + opacity: 0.5; + transform: scale(1,1); + } + 100%{ + opacity: 1; + } +} +/* 第二个页面 */ +#page2 { + display: none; + transition: all 0.5s; +} +#page2 .fade-out{ + opacity: 0.3; + transform: translateY(-100%); +} +#page2 .p2-year{ + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + background: url(./images/p2_2022.png) no-repeat center center; + background-size: 100%; + width: 35vw; + height: 35vh; +} +#page2 .p2-circle{ + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + background: url(./images/p2_circle_outer.png) no-repeat center center; + background-size: 100%; + width: 60vw; + height: 60vh; + animation: circle_outer 1s 3s linear infinite; +} +/* 最外层圆的动画 */ +@keyframes circle_outer{ + from{ + transform: rotate(0deg); + } + to{ + transform: rotate(-360deg); + } +} +/* 使用伪类的方式创建那两个圈 */ +#page2 .p2-circle::before{ + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + background: url(./images/p2_circle_middle.png) no-repeat center center; + background-size: 100%; + width: 46vw; + height: 46vh; + animation: circle_middle 1s 2s linear infinite; +} +/* 中间圆的动画 */ +@keyframes circle_middle{ + from{ + transform: rotate(0deg); + } + to{ + transform: rotate(720deg); + } +} +#page2 .p2-circle::after{ + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + background: url(./images/p2_circle_inner.png) no-repeat center center; + background-size: 100%; + width: 40vw; + height: 40vh; + animation: circle_inner 1s 1s linear infinite; +} +/* 最里层圆的动画 */ +@keyframes circle_inner { + from{ + transform: rotate(0deg); + } + to{ + transform: rotate(-1080deg); + } +} +/* 第三页布局 */ +#page3{ + display: none; + transition: all 0.5s; +} +#page3.fade-in{ + transform: translateY(-100%); +} +#page3 .p3-logo{ + width: 50vw; + height: 6vh; + position: absolute; + top: 8vh; + left: 0; + right: 0; + margin: auto; + background: url(./images/p1_minxi.png) no-repeat center center; + background-size: 100%; +} +#page3 .p3-left{ + width: 23vw; + height: 42vh; + position: absolute; + top: 25.5vh; + left: 3.75vw; + margin: auto; + background: url(./images/p3_couplet_second.png) no-repeat center center; + background-size: 100%; +} +#page3 .p3-right{ + width: 23vw; + height: 42vh; + position: absolute; + top: 25.5vh; + right: 3.75vw; + margin: auto; + background: url(./images/p3_couplet_first.png) no-repeat center center; + background-size: 100%; +} +#page3 .p3-mid{ + width: 48vw; + height: 50vh; + position: absolute; + top: 21vh; + right: 0; + left: 0; + margin: auto; + background: url(./images/p3_title2.png) no-repeat center center; + background-size: 100%; +} +#page3 .p3-bless{ + width: 35vw; + height: 35vw; + position: absolute; + right: 0; + left: 0; + bottom: 5vh; + margin: 0 auto; + background: url(./images/p3_blessing.png) no-repeat center center; + background-size: 100%; + animation: bless_rotate 1s linear infinite ; +} +@keyframes bless_rotate{ + from{ + transform: rotate(0deg); + } + to{ + transform: rotate(360deg); + } +} \ No newline at end of file