diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/demo01.html" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..e0cbb56dcf3cfa70cf0cd6dd4fed1f4c809a6a51 --- /dev/null +++ "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/demo01.html" @@ -0,0 +1,172 @@ + + + + + + + + + + + + + +
+ 选择背景颜色: + + + + + + + 选择字号: + 特大 + 大 + 中 + 小 + + + + + + + +
+ +
+
+ + + +
+ +

第一章 血尸

+

50年前，长沙镖子岭。四个土夫子正蹲在一个土丘上，所有人都不说话，直勾勾盯着地上的洛阳铲。

+ +

铲子里还带着刚从地下带出的土，奇怪的是，这一杯土正不停的向外渗着鲜红的液体，就像刚刚在鲜血里蘸过一样。

+ +

“这下子麻烦大喽”老烟头把他的旱烟在地上敲了敲“下面是个血尸嘎，弄不好我们这点儿当当，都要撂在下面欧。”

+ +

“下不下去喃？要得要不得，一句话，莫七里八里的！”独眼的小伙子说：“你说你个老人家腿脚不方便，就莫下去了，我和我弟两个下去，管他什么东西，直接给他来一梭子。”

+ +

老烟头不怒反笑，对边上的一个大胡子说：“你屋里二伢子海式撩天的，直不定什么时候就给翻盖子了，你得多教育教育，咱这买卖，不是有只匣子炮就能喔荷西天。

+ +

那大胡子瞪了那年轻人一眼：“你崽子，怎么这么跟老太爷讲话，老太爷淘土的时候你她妈的还在你娘肚子里咧。”

+ +

“我咋说说错了，老祖宗不说了嘛，那血尸就是个好东西，下面宝贝肯定不少，不下去，走嘎一炉锅汤。”

+ +

“你他娘的还敢顶嘴！”大胡子举手就打，被老烟头用烟枪挡了回去。

+ +

“你这个当爹的也真是地，就知道打来打去，也不看看现在什么地方咧，你自己做伢那时候不还是一样，这叫上粱不正下粱歪！”

+ +

那独眼的小伙子看他老爸被数落了，低下头偷笑，老烟头咳嗽了一声，又敲了那独眼的少年一记头棍“你笑个嘛？碰到血尸，可大可小，上次你二公就是在洛阳挖到这东西，结果现在还疯疯颠颠地，你个小伢子嘴巴上毛都没有，做事情这么毛里毛糙，嫌脑袋多是喽？”

+ +

“那到底是要得还是要不得嘛？”独眼的青年不耐烦的直挠头。

+ +

老烟头吧嗒吧嗒抽了几口，看了看天，似乎笃定了主意，对大胡子说道：“那要还是要的地，等一下我先下去，你跟在我后面，二伢子你带个土耗子殿后，三伢子你就别下去了，四个人，想退都来不及退，你就拉着土耗子的尾巴，我们在里面一吆喝你就把东西拉出来。”

+
+ + +
+ + + + + diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/index.css" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/index.css" new file mode 100644 index 0000000000000000000000000000000000000000..66a6853f53b56fba637b67eabadb1a7a131d0a9c --- /dev/null +++ "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/index.css" @@ -0,0 +1,241 @@ +/* PC端样式布局 */ +:root { + --backcolor: #F6F6F6; + --size: 24px; +} + +h1 { + text-align: center; + +} + +.text { + margin: 0 3%; + padding: 0% 0; + background-color: var(--backcolor); + border-radius: 50px; + +} + +.text p { + padding: 0 5% 3% 5%; + text-indent: 2em; + font-size: var(--size); + font-family: "华文楷体"; + +} + +.cut { + background-color: cornflowerblue; + width: 100%; + height: 3px; + margin: 20px 0 0 0; +} + +.top { + margin: 0 3%; + display: flex; + flex: auto ; + flex-wrap: wrap; + grid-template-columns: 120px repeat(6, 25px) 80px repeat(4, 35px) repeat(6, 80px); + align-items: center; + justify-content: flex-start; + background-color: #FCFBFB; +} + +.top span { + cursor: pointer; +} + +.color { + display: inline-flex; + margin: 0 5px; + width: 15px; + height: 15px; +} + +.color1 { + background-color: #6FBDE9; + border: 3px solid #C7EFFD; +} + +.color2 { + background-color: #C7DCFD; + border: 3px solid #E0EDFD; +} + +.color3 { + background-color: #8DCA27; + border: 3px solid #CFE67D; +} + +.color4 { + background-color: #F6F6F6; + border: 3px solid #EDFCFC; +} + +.color5 { + background-color: #705C99; + border: 3px solid #BBB4E4; +} + +.size { + display: inline-grid; + margin: 0 3px; + border-bottom: black 2px solid; +} + +.top b { + margin-left: 10px; +} + +.top .btn { + width: 75px; + padding-bottom: 5px; + margin-left: 10px; + background-color: #D3E3F8; + border: 1px solid white; + border-radius: 5px; + cursor: pointer; +} + +.top .btn1 { + margin-left: 10%; +} +/* 媒体查询屏幕宽度小于520px */ +@media screen and (max-width:520px) { + * { + background-color: #FBE6B5; + padding: 0; + margin: 0; + } + + .top { + display: none; + } + + .cut { + display: none; + } + + h1 { + text-align: start; + margin: 50px 0 0 0; + } + + .blackTop { + width: 100%; + height: 50px; + background-color: #000000; + position: fixed; + top: 0px; + display: grid; + grid-template-columns: 70% repeat(3,10%); + align-items: center; + opacity: 0.9; + } + + .blackBottom { + width: 100%; + height: 80px; + background-color: #000000; + position: fixed; + bottom: 0px; + opacity: 0.9; + + } + + body { + position: relative; + } + + .addBook { + width: 95px; + height: 30px; + background-color: #000000; + color: white; + position: fixed; + top: 20%; + right: 0px; + text-align: center; + padding-top: 6px; + border-top-left-radius: 20px; + border-bottom-left-radius: 20px; + } + + .write { + display: flex; + width: 70px; + height: 70px; + background-color: #000000; + border-radius: 50%; + color: white; + position: fixed; + bottom: 20%; + right: 4%; + font-size: 8px; + flex-flow:column; + justify-content: space-between; + align-items: center; + + } + .write .icon { + display: inline-flex; + margin-top:6px; + font-size: 25px; + + } + .write span { + background-color: #000000; + display: inline-flex; + + } + .blackBottom span{ + display: inline-grid; + background-color: #000000; + color: white; + text-align: center; + padding-bottom: 10px; + + } + + .blackBottom .bottom-top { + display: grid; + grid-template-columns: 50% 50%; + border-bottom:1px solid #5F5F5E; + + } + .bottom-icon { + display: grid; + grid-template-columns: 25% 25% 25% 25%; + grid-template-rows: 60% 40%; + background-color: #000000; + color: white; + align-items: center; + justify-items: center; + } + .bottom-icon span{ + font-size: 12px; + } + .bottom-icon use{ + display: inline-grid; + + } + .blackAll { + animation: fade 1s linear; + } + @keyframes fade { + from { + opacity: 0; + } + to{ + opacity: 1; + } + } +} +/* 媒体查询屏幕宽度大于520px时,防止移动端的功能栏在PC端显示 */ +@media screen and (min-width:520px){ + .blackAll{ + display: none; + } +} \ No newline at end of file diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/demo.css" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/demo.css" new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/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\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/demo_index.html" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/demo_index.html" new file mode 100644 index 0000000000000000000000000000000000000000..09d2c0f8d93ff73afbaa0b1b4bd5c71838553d07 --- /dev/null +++ "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/demo_index.html" @@ -0,0 +1,418 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + + 查看项目 + +
+
+
+
    + +
  • + +
    钢笔
    +
    
    +
    • + +
  • + +
    目录
    +
    
    +
    • + +
  • + +
    设置
    +
    
    +
    • + +
  • + +
    礼物
    +
    
    +
    • + +
  • + +
    图书
    +
    
    +
    • + +
  • + +
    目录
    +
    
    +
    • + +
  • + +
    全部评论
    +
    
    +
    • + +
  • + +
    评论
    +
    
    +
    • + +
  • + +
    arrow-left-bold
    +
    
    +
    • + +
  • + +
    黑夜模式
    +
    
    +
    • + +
+
+

Unicode 引用

+
+ +

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

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

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

+
+

Unicode 使用步骤如下：

+

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

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1638194732887') format('woff2'),
+       url('iconfont.woff?t=1638194732887') format('woff'),
+       url('iconfont.ttf?t=1638194732887') 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-gangbi +
    +
    • + +
  • + +
    + 目录 +
    +
    .icon-mulu +
    +
    • + +
  • + +
    + 设置 +
    +
    .icon-shezhi +
    +
    • + +
  • + +
    + 礼物 +
    +
    .icon-liwu- +
    +
    • + +
  • + +
    + 图书 +
    +
    .icon-tushu +
    +
    • + +
  • + +
    + 目录 +
    +
    .icon-mulu- +
    +
    • + +
  • + +
    + 全部评论 +
    +
    .icon-quanbupinglun +
    +
    • + +
  • + +
    + 评论 +
    +
    .icon-pinglun +
    +
    • + +
  • + +
    + arrow-left-bold +
    +
    .icon-arrow-left-bold +
    +
    • + +
  • + +
    + 黑夜模式 +
    +
    .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-gangbi
    +
    • + +
  • + +
    目录
    +
    #icon-mulu
    +
    • + +
  • + +
    设置
    +
    #icon-shezhi
    +
    • + +
  • + +
    礼物
    +
    #icon-liwu-
    +
    • + +
  • + +
    图书
    +
    #icon-tushu
    +
    • + +
  • + +
    目录
    +
    #icon-mulu-
    +
    • + +
  • + +
    全部评论
    +
    #icon-quanbupinglun
    +
    • + +
  • + +
    评论
    +
    #icon-pinglun
    +
    • + +
  • + +
    arrow-left-bold
    +
    #icon-arrow-left-bold
    +
    • + +
  • + +
    黑夜模式
    +
    #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\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/iconfont.css" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/iconfont.css" new file mode 100644 index 0000000000000000000000000000000000000000..5ae11f636a0e3cf41c8759fa59529e2d949928f5 --- /dev/null +++ "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/iconfont.css" @@ -0,0 +1,55 @@ +@font-face { + font-family: "iconfont"; /* Project id 2972568 */ + src: url('iconfont.woff2?t=1638194732887') format('woff2'), + url('iconfont.woff?t=1638194732887') format('woff'), + url('iconfont.ttf?t=1638194732887') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-gangbi:before { + content: "\e648"; +} + +.icon-mulu:before { + content: "\e890"; +} + +.icon-shezhi:before { + content: "\e70f"; +} + +.icon-liwu-:before { + content: "\e6ae"; +} + +.icon-tushu:before { + content: "\e65c"; +} + +.icon-mulu-:before { + content: "\e606"; +} + +.icon-quanbupinglun:before { + content: "\e644"; +} + +.icon-pinglun:before { + content: "\e6b3"; +} + +.icon-arrow-left-bold:before { + content: "\e685"; +} + +.icon-heiyemoshi:before { + content: "\e615"; +} + diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/iconfont.js" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/iconfont.js" new file mode 100644 index 0000000000000000000000000000000000000000..ed57b62516ca2876337e9bd1c5fa613b67d59868 --- /dev/null +++ "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/iconfont.js" @@ -0,0 +1 @@ +!function(f){var c,t,l,e,i,a='',h=(h=document.getElementsByTagName("script"))[h.length-1].getAttribute("data-injectcss"),o=function(f,c){c.parentNode.insertBefore(f,c)};if(h&&!f.__iconfont__svg__cssinject__){f.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(f){console&&console.log(f)}}function n(){i||(i=!0,l())}function s(){try{e.documentElement.doScroll("left")}catch(f){return void setTimeout(s,50)}n()}c=function(){var f,c;(c=document.createElement("div")).innerHTML=a,a=null,(f=c.getElementsByTagName("svg")[0])&&(f.setAttribute("aria-hidden","true"),f.style.position="absolute",f.style.width=0,f.style.height=0,f.style.overflow="hidden",c=f,(f=document.body).firstChild?o(c,f.firstChild):f.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(t=function(){document.removeEventListener("DOMContentLoaded",t,!1),c()},document.addEventListener("DOMContentLoaded",t,!1)):document.attachEvent&&(l=c,e=f.document,i=!1,s(),e.onreadystatechange=function(){"complete"==e.readyState&&(e.onreadystatechange=null,n())})}(window); \ No newline at end of file diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/iconfont.json" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/iconfont.json" new file mode 100644 index 0000000000000000000000000000000000000000..83ccc459c052f49709943800594f2226a7772fe9 --- /dev/null +++ "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/iconfont.json" @@ -0,0 +1,79 @@ +{ + "id": "2972568", + "name": "no name", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "5649593", + "name": "钢笔", + "font_class": "gangbi", + "unicode": "e648", + "unicode_decimal": 58952 + }, + { + "icon_id": "2076262", + "name": "目录", + "font_class": "mulu", + "unicode": "e890", + "unicode_decimal": 59536 + }, + { + "icon_id": "3456457", + "name": "设置", + "font_class": "shezhi", + "unicode": "e70f", + "unicode_decimal": 59151 + }, + { + "icon_id": "5300922", + "name": "礼物", + "font_class": "liwu-", + "unicode": "e6ae", + "unicode_decimal": 59054 + }, + { + "icon_id": "6204789", + "name": "图书", + "font_class": "tushu", + "unicode": "e65c", + "unicode_decimal": 58972 + }, + { + "icon_id": "7987834", + "name": "目录", + "font_class": "mulu-", + "unicode": "e606", + "unicode_decimal": 58886 + }, + { + "icon_id": "9748086", + "name": "全部评论", + "font_class": "quanbupinglun", + "unicode": "e644", + "unicode_decimal": 58948 + }, + { + "icon_id": "11594393", + "name": "评论", + "font_class": "pinglun", + "unicode": "e6b3", + "unicode_decimal": 59059 + }, + { + "icon_id": "15838561", + "name": "arrow-left-bold", + "font_class": "arrow-left-bold", + "unicode": "e685", + "unicode_decimal": 59013 + }, + { + "icon_id": "18424142", + "name": "黑夜模式", + "font_class": "heiyemoshi", + "unicode": "e615", + "unicode_decimal": 58901 + } + ] +} diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/iconfont.ttf" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..8e223b5dcc4b23396a480487152f4eea17b88127 Binary files /dev/null and "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/iconfont.ttf" differ diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/iconfont.woff" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/iconfont.woff" new file mode 100644 index 0000000000000000000000000000000000000000..a110ee6150cf2c09270e122284809d5096b7732b Binary files /dev/null and "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/iconfont.woff" differ diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/iconfont.woff2" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/iconfont.woff2" new file mode 100644 index 0000000000000000000000000000000000000000..4bdb103af728a689bf99bc7c686ccf89751b4914 Binary files /dev/null and "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-11-26_\346\266\246\345\261\261\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200\345\260\217\350\257\264/svg/iconfont.woff2" differ diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-12-14\347\254\254\344\272\214\346\254\241\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/demo01.css" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-12-14\347\254\254\344\272\214\346\254\241\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/demo01.css" new file mode 100644 index 0000000000000000000000000000000000000000..f04f22ab88073f428e30e1db6d33b597b750936e --- /dev/null +++ "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-12-14\347\254\254\344\272\214\346\254\241\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/demo01.css" @@ -0,0 +1,122 @@ +body{ + --backcolor: #F6F6F6; + --size: 24px; +} +h1{ + text-align: center; +} + +.text{ + margin: 0 3%; + padding: 0% 0; + background-color: var(--backcolor); + border-radius: 50px; +} +.text p{ + padding: 0 5% 3% 5%; + text-indent: 2em; + font-size: 24px; + font-family: "华文楷体"; +} + +.line{ + background-color: cornflowerblue; + width: 100%; + height: 3px; + margin: 20px 0 50px 0 ; +} +.top span{ + cursor: pointer; +} +.color{ + display: inline-flex; + width: 15px; + height: 15px; + margin-top: 10px; +} +.color1 { + background-color: #6FBDE9; + border: 3px solid #C7EFFD; + margin-bottom: -5px; +} +.color2 { + background-color: #C7DCFD; + border: 3px solid #E0EDFD; + margin-bottom: -5px; +} + .color3 { + background-color: #8DCA27; + border: 3px solid #CFE67D; + margin-bottom: -5px; + } +.color4 { + background-color: #F6F6F6; + border: 3px solid #EDFCFC; + margin-bottom: -5px; +} +.color5 { + background-color: #705C99; + border: 3px solid #BBB4E4; + margin-bottom: -5px; +} + +.size { + display: inline-grid; + margin: 0 4px; + border-bottom: black 2px solid; +} +.top .size1{ + margin-left: 15px; +} +.top b{ + margin-left: 15px; +} + +.top .btn { + width: 75px; + padding-bottom: 5px; + margin-left: 5px; + background-color: #D3E3F8; + border: 1px solid white; + border-radius: 5px; + cursor: pointer; +} + +.top .btn1 { + margin-left: 10%; + background-color: #FDF4ED; + border: 1px solid white; + +} + +@media screen and (max-width:640px){ + *{ + background-color: #FBE6B5; + padding: 0; + margin: 0; + } + + .top{ + display: none; + } + .line{ + display: none; + } + h1 { + text-align: start; + margin: 50px 0 0 0; + + } + .blackTop { + width: 100%; + height: 50px; + background-color: #000000; + position: fixed; + top: 0px; + display: grid; + grid-template-columns: 70% repeat(3,10%); + align-items: center; + opacity: 0.9; + } + +} \ No newline at end of file diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-12-14\347\254\254\344\272\214\346\254\241\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/demo01.html" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-12-14\347\254\254\344\272\214\346\254\241\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..2ccb64ef124d6ff51b78724f7fa22c8de367365f --- /dev/null +++ "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/2021-12-14\347\254\254\344\272\214\346\254\241\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200/demo01.html" @@ -0,0 +1,72 @@ + + + + + + + 第二次响应式布局 + + + + + + +
+ 选择背景颜色: + + + + + + + + 选择字号: + 特大 + 大 + 中 + 小 + + + + + + + +
+ +
+ +
+ +

第一章 血尸

+

50年前，长沙镖子岭。四个土夫子正蹲在一个土丘上，所有人都不说话，直勾勾盯着地上的洛阳铲。

+ +

铲子里还带着刚从地下带出的土，奇怪的是，这一杯土正不停的向外渗着鲜红的液体，就像刚刚在鲜血里蘸过一样。

+ +

“这下子麻烦大喽”老烟头把他的旱烟在地上敲了敲“下面是个血尸嘎，弄不好我们这点儿当当，都要撂在下面欧。”

+ +

“下不下去喃？要得要不得，一句话，莫七里八里的！”独眼的小伙子说：“你说你个老人家腿脚不方便，就莫下去了，我和我弟两个下去，管他什么东西，直接给他来一梭子。”

+ +

老烟头不怒反笑，对边上的一个大胡子说：“你屋里二伢子海式撩天的，直不定什么时候就给翻盖子了，你得多教育教育，咱这买卖，不是有只匣子炮就能喔荷西天。

+ +

那大胡子瞪了那年轻人一眼：“你崽子，怎么这么跟老太爷讲话，老太爷淘土的时候你她妈的还在你娘肚子里咧。”

+ +

“我咋说说错了，老祖宗不说了嘛，那血尸就是个好东西，下面宝贝肯定不少，不下去，走嘎一炉锅汤。”

+ +

“你他娘的还敢顶嘴！”大胡子举手就打，被老烟头用烟枪挡了回去。

+ +

“你这个当爹的也真是地，就知道打来打去，也不看看现在什么地方咧，你自己做伢那时候不还是一样，这叫上粱不正下粱歪！”

+ +

那独眼的小伙子看他老爸被数落了，低下头偷笑，老烟头咳嗽了一声，又敲了那独眼的少年一记头棍“你笑个嘛？碰到血尸，可大可小，上次你二公就是在洛阳挖到这东西，结果现在还疯疯颠颠地，你个小伢子嘴巴上毛都没有，做事情这么毛里毛糙，嫌脑袋多是喽？”

+ +

“那到底是要得还是要不得嘛？”独眼的青年不耐烦的直挠头。

+ +

老烟头吧嗒吧嗒抽了几口，看了看天，似乎笃定了主意，对大胡子说道：“那要还是要的地，等一下我先下去，你跟在我后面，二伢子你带个土耗子殿后，三伢子你就别下去了，四个人，想退都来不及退，你就拉着土耗子的尾巴，我们在里面一吆喝你就把东西拉出来。”

+
+ + + + + \ No newline at end of file diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..c76909984a1969bda4e5bc6bde7c1eeaf80fe0f5 --- /dev/null +++ "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-26 \345\223\215\345\272\224\345\274\217\345\260\217\350\257\264\351\241\265\351\235\242\345\270\203\345\261\200\347\232\204\347\254\254\345\215\201\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html" @@ -0,0 +1,253 @@ + + + + + + 小说响应式阅读页面 + + + +
+
+ 选择背景颜色: + + + + + + + 选择字号: + 特大 + 大 + 中 + 小 + + + + + + + + +
+
+

第一章 卧 龙

+ +
+

初平元年，襄阳，晴空万里。

+ +

通往汉水岸边望江亭的大道上，一辆辆的马车络绎不绝，一名名世家子弟们鲜衣怒马，意气风发。

+ +

铛铛铛~~

+ +

清脆的铜铃声响起，华*马丛中，却出现了一辆寒酸的驴车。

+ +

驴车上那少年，身形修长，相貌清瘦，身穿着一身青衫布衣，布衣的颜色隐隐已有些发白，看得出来是洗了又洗，穿了有些年头。

+ +

颠簸的驴车，陈旧的布衣，穿行在周围的鲜衣怒马之中，显的颇为扎眼。

+ +

那些经过的世族子弟们，看向那少年的眼神中，不禁都掠过一丝轻视，甚至是嫌弃的目光。

+
+ + + + \ No newline at end of file diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-12-09 \345\256\236\347\216\260\345\274\200\345\205\263\346\225\210\346\236\234\347\232\204\347\254\254\345\215\201\344\270\203\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-12-09 \345\256\236\347\216\260\345\274\200\345\205\263\346\225\210\346\236\234\347\232\204\347\254\254\345\215\201\344\270\203\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html" new file mode 100644 index 0000000000000000000000000000000000000000..40e6b44d4645d77dadfb770fd14a62e08ec03e0d --- /dev/null +++ "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-12-09 \345\256\236\347\216\260\345\274\200\345\205\263\346\225\210\346\236\234\347\232\204\347\254\254\345\215\201\344\270\203\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html" @@ -0,0 +1,111 @@ + + + + + + 开关效果 + + + + + + + + + + + + \ No newline at end of file diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-12-09 \345\256\236\347\216\260\345\274\200\345\205\263\346\225\210\346\236\234\347\232\204\347\254\254\345\215\201\344\270\203\346\254\241\350\257\276\344\275\234\344\270\232/demo02.html" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-12-09 \345\256\236\347\216\260\345\274\200\345\205\263\346\225\210\346\236\234\347\232\204\347\254\254\345\215\201\344\270\203\346\254\241\350\257\276\344\275\234\344\270\232/demo02.html" new file mode 100644 index 0000000000000000000000000000000000000000..52d5410ca6bc6d76f594650bc8d8a2677959ddbd --- /dev/null +++ "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-12-09 \345\256\236\347\216\260\345\274\200\345\205\263\346\225\210\346\236\234\347\232\204\347\254\254\345\215\201\344\270\203\346\254\241\350\257\276\344\275\234\344\270\232/demo02.html" @@ -0,0 +1,90 @@ + + + + + + + 开关效果老师 + + + +
+ + + + + + + + + + + +
+ + \ No newline at end of file diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237MVC\347\232\204\344\275\234\344\270\232/2021-12-13\345\210\235\345\247\213MVC\347\232\204\347\254\254\344\270\200\346\254\241\350\257\276\344\275\234\344\270\232/Node \350\247\243\346\236\220\346\211\247\350\241\214 JavaScript.png" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237MVC\347\232\204\344\275\234\344\270\232/2021-12-13\345\210\235\345\247\213MVC\347\232\204\347\254\254\344\270\200\346\254\241\350\257\276\344\275\234\344\270\232/Node \350\247\243\346\236\220\346\211\247\350\241\214 JavaScript.png" new file mode 100644 index 0000000000000000000000000000000000000000..b2794af70d1e0606a853a93156016518a31170d6 Binary files /dev/null and "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237MVC\347\232\204\344\275\234\344\270\232/2021-12-13\345\210\235\345\247\213MVC\347\232\204\347\254\254\344\270\200\346\254\241\350\257\276\344\275\234\344\270\232/Node \350\247\243\346\236\220\346\211\247\350\241\214 JavaScript.png" differ diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237MVC\347\232\204\344\275\234\344\270\232/2021-12-13\345\210\235\345\247\213MVC\347\232\204\347\254\254\344\270\200\346\254\241\350\257\276\344\275\234\344\270\232/hello.js" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237MVC\347\232\204\344\275\234\344\270\232/2021-12-13\345\210\235\345\247\213MVC\347\232\204\347\254\254\344\270\200\346\254\241\350\257\276\344\275\234\344\270\232/hello.js" new file mode 100644 index 0000000000000000000000000000000000000000..9bc178432d64e0a61685f300e57e7c43a15b4ded --- /dev/null +++ "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237MVC\347\232\204\344\275\234\344\270\232/2021-12-13\345\210\235\345\247\213MVC\347\232\204\347\254\254\344\270\200\346\254\241\350\257\276\344\275\234\344\270\232/hello.js" @@ -0,0 +1,4 @@ +function sayHi(text) { + console.log('Hello, ' + text); +} +sayHi('Node.js'); \ No newline at end of file diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237MVC\347\232\204\344\275\234\344\270\232/2021-12-14\346\250\241\345\235\227\350\256\276\350\256\241\347\232\204\347\254\254\344\272\214\346\254\241\350\257\276\344\275\234\344\270\232/hello.js" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237MVC\347\232\204\344\275\234\344\270\232/2021-12-14\346\250\241\345\235\227\350\256\276\350\256\241\347\232\204\347\254\254\344\272\214\346\254\241\350\257\276\344\275\234\344\270\232/hello.js" new file mode 100644 index 0000000000000000000000000000000000000000..941cdb1f5dea1d439a5f92be316a50bb7e4a8134 --- /dev/null +++ "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237MVC\347\232\204\344\275\234\344\270\232/2021-12-14\346\250\241\345\235\227\350\256\276\350\256\241\347\232\204\347\254\254\344\272\214\346\254\241\350\257\276\344\275\234\344\270\232/hello.js" @@ -0,0 +1,5 @@ +function sayHi(text){ + console.log('Hello,' +text); + console.log('Hi,'+text); +} +module.exports = sayHi; \ No newline at end of file diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237MVC\347\232\204\344\275\234\344\270\232/2021-12-14\346\250\241\345\235\227\350\256\276\350\256\241\347\232\204\347\254\254\344\272\214\346\254\241\350\257\276\344\275\234\344\270\232/main.js" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237MVC\347\232\204\344\275\234\344\270\232/2021-12-14\346\250\241\345\235\227\350\256\276\350\256\241\347\232\204\347\254\254\344\272\214\346\254\241\350\257\276\344\275\234\344\270\232/main.js" new file mode 100644 index 0000000000000000000000000000000000000000..225216d78eae5a8df0b9a41840d998bae38b5ab3 --- /dev/null +++ "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237MVC\347\232\204\344\275\234\344\270\232/2021-12-14\346\250\241\345\235\227\350\256\276\350\256\241\347\232\204\347\254\254\344\272\214\346\254\241\350\257\276\344\275\234\344\270\232/main.js" @@ -0,0 +1,4 @@ +var sayHi = require('./hello'); +var text ='JavaScript'; + +sayHi(text); \ No newline at end of file