首页 发现 帮助
登录
lovecoding
/
web0331
10
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

fix:float

e 4 周之前
父节点
50936cc839
当前提交
f3c4a782db
共有 18 个文件被更改，包括 1349 次插入 和 0 次删除
分列视图 显示文件统计
  1. 二进制
      2.css/1.png
  2. 55 0
      2.css/12.显示隐藏.html
  3. 124 0
      2.css/13.雪碧图.html
  4. 二进制
      2.css/demo/images/logo.png
  5. 二进制
      2.css/demo/images/message.png
  6. 二进制
      2.css/demo/images/picture1.png
  7. 二进制
      2.css/demo/images/picture2.png
  8. 二进制
      2.css/demo/images/star.png
  9. 245 0
      2.css/demo/index.css
  10. 106 0
      2.css/demo/index.html
  11. 539 0
      2.css/font/demo.css
  12. 234 0
      2.css/font/demo_index.html
  13. 23 0
      2.css/font/iconfont.css
  14. 0 0
      2.css/font/iconfont.js
  15. 23 0
      2.css/font/iconfont.json
  16. 二进制
      2.css/font/iconfont.ttf
  17. 二进制
      2.css/font/iconfont.woff
  18. 二进制
      2.css/font/iconfont.woff2

二进制
2.css/1.png
查看文件


+ 55 - 0
2.css/12.显示隐藏.html
查看文件 

@@ -0,0 +1,55 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="./font/iconfont.css">
 
+    <style>
 
+      ul li:hover a {
 
+        color: red;
 
+      }
 
+      .main {
 
+        width: 200px;
 
+        height: 200px;
 
+        /* 隐藏元素 */
 
+        display: none;
 
+        border: 1px solid #000;
 
+        /* 超出一行显示省略号 */
 
+        /* 溢出隐藏 */
 
+        overflow: hidden;
 
+        /* 强制不换行 */
 
+        white-space: nowrap;
 
+        /* 转成省略号 */
 
+        text-overflow: ellipsis;
 
+      }
 
+      ul li:nth-child(4):hover .main {
 
+        /* 
+            显示元素
 
+        */
 
+        display: block;
 
+      }
 
+      .home {
 
+        font-size: 30px;
 
+      }
 
+    </style>
 
+  </head>
 
+  <body>
 
+    <span class="iconfont icon-shouye home"></span>
 
+    <ul>
 
+      <li><a href="">哈啊</a></li>
 
+      <li><a href="">哈啊</a></li>
 
+      <li><a href="">哈啊</a></li>
 
+      <li>
 
+        <a href="">哈啊1</a>
 
+        <div class="main">我是一部分内容我是一部分内容我是一部分内容我是一部分内容我是一部分内容我是一部分内容我是一部分内容</div>
 
+      </li>
 
+      <li><a href="">哈啊</a></li>
 
+      <li><a href="">哈啊</a></li>
 
+      <li><a href="">哈啊</a></li>
 
+      <li><a href="">哈啊</a></li>
 
+      <li><a href="">哈啊</a></li>
 
+      <li><a href="">哈啊</a></li>
 
+    </ul>
 
+  </body>
 
+</html>

+ 124 - 0
2.css/13.雪碧图.html
查看文件 

@@ -0,0 +1,124 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            list-style: none;
 
+            text-decoration: none;
 
+            box-sizing: border-box;
 
+        }
 
+        #box {
 
+            width: 1202px;
 
+            height: 118px;
 
+            margin: 150px auto;
 
+            padding-top: 22px;
 
+            border:1px solid #f00;
 
+        }
 
+        ul {
 
+            overflow: hidden;
 
+        }
 
+        ul li {
 
+            width: 120px;
 
+            height: 69px;
 
+            background: plum;
 
+            float: left;
 
+        }
 
+        ul li .pic {
 
+            width: 48px;
 
+            height: 48px;    
+        }
 
+        ul li:first-child .pic {
 
+            background: url(./1.png);
 
+            background-size: cover;
 
+            background-position: 96px 597px;
 
+        }
 
+        ul li:nth-child(2) .pic {  
+            background: url(./1.png);
 
+            background-size: cover;
 
+            background-position: 96px 530px;
 
+        }
 
+        ul li:nth-child(3) .pic {  
+            background: url(./1.png);
 
+            background-size: cover;
 
+            background-position: 96px 470px;
 
+        }
 
+        ul li:nth-child(4) .pic {  
+            background: url(./1.png);
 
+            background-size: cover;
 
+            background-position: 96px 412px;
 
+        }
 
+        ul li:nth-child(5) .pic {  
+            background: url(./1.png);
 
+            background-size: cover;
 
+            background-position: 96px 356px;
 
+        }
 
+        ul li:nth-child(6) .pic {  
+            background: url(./1.png);
 
+            background-size: cover;
 
+            background-position: 96px 241px;
 
+        }
 
+        ul li:nth-child(7) .pic {  
+            background: url(./1.png);
 
+            background-size: cover;
 
+            background-position: 96px 181px;
 
+        }
 
+        ul li:nth-child(8) .pic {  
+            background: url(./1.png);
 
+            background-size: cover;
 
+            background-position: 96px 128px;
 
+        }
 
+        ul li:nth-child(9) .pic {  
+            background: url(./1.png);
 
+            background-size: cover;
 
+            background-position: 96px 61px;
 
+        }
 
+        ul li:nth-child(10) .pic {  
+            background: url(./1.png);
 
+            background-size: cover;
 
+            background-position: 96px 0px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        
+    <ul>
 
+        <li>
 
+            <div class="pic"></div>
 
+        </li>
 
+        <li>
 
+            <div class="pic"></div>
 
+        </li>
 
+        <li>
 
+            <div class="pic"></div>
 
+        </li>
 
+        <li>
 
+            <div class="pic"></div>
 
+        </li>
 
+        <li>
 
+            <div class="pic"></div>
 
+        </li>
 
+        <li>
 
+            <div class="pic"></div>
 
+        </li>
 
+        <li>
 
+            <div class="pic"></div>
 
+        </li>
 
+        <li>
 
+            <div class="pic"></div>
 
+        </li>
 
+        <li>
 
+            <div class="pic"></div>
 
+        </li>
 
+        <li>
 
+            <div class="pic"></div>
 
+        </li>
 
+    </ul>
 
+    </div>
 
+</body>
 
+</html>

二进制
2.css/demo/images/logo.png
查看文件


二进制
2.css/demo/images/message.png
查看文件


二进制
2.css/demo/images/picture1.png
查看文件


二进制
2.css/demo/images/picture2.png
查看文件


二进制
2.css/demo/images/star.png
查看文件


+ 245 - 0
2.css/demo/index.css
查看文件 

@@ -0,0 +1,245 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+    list-style: none;
 
+    text-decoration: none;
 
+    box-sizing: border-box;
 
+}
 
+#box {
 
+    width: 1189px;
 
+    height: 793px;
 
+    margin: 0 auto;
 
+    padding-left: 24px;
 
+    border: 1px solid #ccc;
 
+}
 
+/* 头部样式 */
 
+#header {
 
+    width: 100%;
 
+    height: 73px;
 
+    overflow: hidden;
 
+}
 
+
 
+#header .logo {
 
+    width: 124px;
 
+    height: 100%;
 
+    float: left;
 
+}
 
+#header .logo img {
 
+    width: 127px;
 
+    height: 36px;
 
+    margin-top: 20px;
 
+}
 
+#header .search {
 
+    width: 480px;
 
+    height: 100%;
 
+    float: left;
 
+    overflow: hidden;
 
+    margin-left: 224px;
 
+    padding-top: 20px;
 
+}
 
+#header .search input {
 
+    width: 369px;
 
+    height: 32px;
 
+    float: left;
 
+    outline: none;
 
+    border-radius: 20px;
 
+    border: 1px solid #ccc;
 
+    background: #fdfdfd;
 
+    padding-left: 10px;
 
+    font-size: 14px;
 
+}
 
+#header .search .btn  {
 
+    width: 102px;
 
+    height: 32px;
 
+    float: left;
 
+    color: #fff;
 
+    border-radius: 20px;
 
+    text-align: center;
 
+    line-height: 32px;
 
+    font-size: 16px;
 
+    background: rgb(52, 114, 229);
 
+}
 
+#header .tips {
 
+    width: 110px;
 
+    height: 100%;
 
+    float: right;
 
+    margin-right: 16px;
 
+    overflow: hidden;
 
+    padding-top: 20px;
 
+}
 
+
 
+#header .tips .star {
 
+    width: 25px;
 
+    height: 27px;
 
+    float: left;
 
+}
 
+#header .tips .message {
 
+    width: 20px;
 
+    height: 20px;
 
+    float: left;
 
+    margin-top: 4px;
 
+    margin-left: 12px;
 
+}
 
+#header .tips .login {
 
+    width: 35px;
 
+    height: 30px;
 
+    float: left;
 
+    margin-left: 12px;
 
+    background: #eee;
 
+    font-size: 13px;
 
+    text-align: center;
 
+    line-height: 30px;
 
+    color: rgb(52, 114, 229);
 
+}
 
+
 
+/* 内容样式 */
 
+#main {
 
+    width: 100%;
 
+    height: 575px;
 
+}
 
+#main .nav {
 
+    width: 100%;
 
+    height: 45px;
 
+    line-height: 45px;
 
+    background: rgb(52, 114, 229);
 
+}
 
+#main .nav ul {
 
+    overflow: hidden;
 
+}
 
+#main .nav ul li {
 
+    float: left;
 
+    margin-left: 30px;
 
+}
 
+#main .nav ul li a{
 
+    color: #fff;
 
+    font-size: 17px;
 
+}
 
+#main .nav ul li:hover a {
 
+    color: red;
 
+}
 
+#main .variety {
 
+    width: 100%;
 
+    height: 297px;
 
+}
 
+#main .variety .top{
 
+    width: 100%;
 
+    height: 65px;
 
+    overflow: hidden;
 
+    border-bottom: 1px solid #ccc;
 
+}
 
+#main .variety .top .left{
 
+    width: 282px;
 
+    height: 100%;
 
+    float: left;
 
+}
 
+
 
+#main .variety .top .left ul {
 
+    overflow: hidden;
 
+    margin-top: 16px;
 
+}
 
+#main .variety .top .left ul li {
 
+    float: left;
 
+    margin-left: 33px;
 
+    padding: 10px 0;
 
+}
 
+#main .variety .top .left ul li a {
 
+    color: #000;
 
+}
 
+
 
+#main .variety .top .left ul li:first-child {
 
+    border-bottom: 2px solid  rgb(52, 114, 229);
 
+
 
+}
 
+#main .variety .top .left ul li:first-child a {
 
+    color: rgb(52, 114, 229);
 
+
 
+}
 
+#main .variety .top .left ul li:hover {
 
+    border-bottom: 2px solid  rgb(52, 114, 229);
 
+}
 
+#main .variety .top .left ul li:hover a {
 
+    color: rgb(52, 114, 229);
 
+}
 
+#main .variety .top .left ul li:first-child {
 
+    margin-left: 0;
 
+}
 
+#main .variety .top .right{
 
+    width: 220px;
 
+    height: 100%;
 
+    float: right;
 
+}
 
+
 
+#main .variety .top .right .word {
 
+    width: 220px;
 
+    height: 20px;
 
+    line-height: 20px;
 
+    margin-top: 32px;
 
+}
 
+
 
+#main .variety .top .right .word span {
 
+    margin-left: 14px;
 
+}
 
+#main .variety .top .right .word span a {
 
+    font-size: 13px;
 
+    color: #575555;
 
+}
 
+
 
+#main .variety .top .right .word span a:hover {
 
+    color: #f00;
 
+}
 
+#main .variety .bottom {
 
+    width: 100%;
 
+    height: 232px;
 
+    padding-top: 27px;
 
+    overflow: hidden;
 
+}
 
+#main .variety .bottom .left{
 
+    width: 365px;
 
+    height: 205px;
 
+    float: left;
 
+}
 
+
 
+#main .variety .bottom .left img {
 
+    border-radius: 4px;
 
+}
 
+#main .variety .bottom .right{
 
+    width: 762px;
 
+    height: 205px;
 
+    float: right;
 
+    overflow: hidden;
 
+}
 
+#main .variety .bottom .right .mode1{
 
+    width: 176px;
 
+    height: 205px;
 
+    border: 1px solid #ccc;
 
+    float: left;
 
+    margin-left: 19.3px;
 
+    border-top-left-radius: 4px;
 
+    border-top-right-radius: 4px;
 
+}
 
+
 
+#main .variety .bottom .right .mode1:first-child {
 
+    margin-left: 0px;
 
+}
 
+#main .variety .bottom .right .mode1 img {
 
+    width: 174px;
 
+    height: 100px;
 
+    border-top-left-radius: 4px;
 
+    border-top-right-radius: 4px;
 
+}
 
+#main .variety .bottom .right .mode1 p:nth-child(2) {
 
+    font-size: 18px;
 
+    margin-left: 7px;
 
+}
 
+#main .variety .bottom .right .mode1 p:nth-child(3) {
 
+    font-size: 12px;
 
+    margin-top: 7px;
 
+    margin-left: 7px;
 
+    color: #979494;
 
+}
 
+#main .variety .bottom .right .mode1 p:nth-child(4) {
 
+    font-size: 11px;
 
+    color: #ccc;
 
+    margin-top: 25px;
 
+    margin-left: 7px;
 
+}

+ 106 - 0
2.css/demo/index.html
查看文件 

@@ -0,0 +1,106 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="./index.css" />
 
+  </head>
 
+  <body>
 
+    <div id="box">
 
+      <!-- 头部 -->
 
+      <div id="header">
 
+        <div class="logo">
 
+          <img src="./images/logo.png" alt="" />
 
+        </div>
 
+        <div class="search">
 
+          <input type="text" placeholder="请输入关键字进行搜索" />
 
+          <div class="btn">搜狗搜索</div>
 
+        </div>
 
+        <div class="tips">
 
+          <!-- 25 27 2020 -->
 
+          <img src="./images/star.png" class="star" alt="" />
 
+          <img src="./images/message.png" class="message" alt="" />
 
+          <div class="login">登录</div>
 
+        </div>
 
+      </div>
 
+      <!-- 内容 -->
 
+      <div id="main">
 
+        <div class="nav">
 
+          <ul>
 
+            <li><a href="">新闻</a></li>
 
+            <li><a href="">视频</a></li>
 
+            <li><a href="">图片</a></li>
 
+            <li><a href="">军事</a></li>
 
+            <li><a href="">体育</a></li>
 
+            <li><a href="">NBA</a></li>
 
+            <li><a href="">娱乐</a></li>
 
+            <li><a href="">财经</a></li>
 
+            <li><a href="">科技</a></li>
 
+            <li><a href="">时尚</a></li>
 
+            <li><a href="">汽车</a></li>
 
+            <li><a href="">房产</a></li>
 
+            <li><a href="">教育</a></li>
 
+            <li><a href="">文化</a></li>
 
+            <li><a href="">游戏</a></li>
 
+            <li><a href="">星座</a></li>
 
+            <li><a href="">更多></a></li>
 
+          </ul>
 
+        </div>
 
+        <div class="variety">
 
+          <div class="top">
 
+            <div class="left">
 
+              <ul>
 
+                <li><a href="">综艺</a></li>
 
+                <li><a href="">电视剧</a></li>
 
+                <li><a href="">电影</a></li>
 
+                <li><a href="">少儿</a></li>
 
+              </ul>
 
+            </div>
 
+            <div class="right">
 
+              <div class="word">
 
+                <span><a href="">动漫</a></span>
 
+                <span><a href="">体育</a></span>
 
+                <span><a href="">纪录片</a></span>
 
+                <span><a href="">风味人间</a></span>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="bottom">
 
+            <div class="left">
 
+              <img src="./images/picture1.png" alt="" />
 
+            </div>
 
+            <div class="right">
 
+                <div class="mode1">
 
+                  <img src="./images/picture2.png" alt="" />
 
+                  <p>即刻电音</p>
 
+                  <p>26强配对画:张活光准西现场</p>
 
+                  <p>嘉宾:新艺兴 大纸伟 尚雯婕</p>
 
+                </div>
 
+                <div class="mode1">
 
+                  <img src="./images/picture2.png" alt="" />
 
+                  <p>即刻电音</p>
 
+                  <p>26强配对画:张活光准西现场</p>
 
+                  <p>嘉宾:新艺兴 大纸伟 尚雯婕</p>
 
+                </div>
 
+                <div class="mode1">
 
+                  <img src="./images/picture2.png" alt="" />
 
+                  <p>即刻电音</p>
 
+                  <p>26强配对画:张活光准西现场</p>
 
+                  <p>嘉宾:新艺兴 大纸伟 尚雯婕</p>
 
+                </div>
 
+                <div class="mode1">
 
+                  <img src="./images/picture2.png" alt="" />
 
+                  <p>即刻电音</p>
 
+                  <p>26强配对画:张活光准西现场</p>
 
+                  <p>嘉宾:新艺兴 大纸伟 尚雯婕</p>
 
+                </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <!-- 页尾 -->
 
+      <div id="footer"></div>
 
+    </div>
 
+  </body>
 
+</html>

+ 539 - 0
2.css/font/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;
 
+}

+ 234 - 0
2.css/font/demo_index.html
查看文件 

@@ -0,0 +1,234 @@
 
+<!DOCTYPE html>
 
+<html>
 
+<head>
 
+  <meta charset="utf-8"/>
 
+  <title>iconfont Demo</title>
 
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
 
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
 
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
 
+  <link rel="stylesheet" href="demo.css">
 
+  <link rel="stylesheet" href="iconfont.css">
 
+  <script src="iconfont.js"></script>
 
+  <!-- jQuery -->
 
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
 
+  <!-- 代码高亮 -->
 
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
 
+  <style>
 
+    .main .logo {
 
+      margin-top: 0;
 
+      height: auto;
 
+    }
 
+
 
+    .main .logo a {
 
+      display: flex;
 
+      align-items: center;
 
+    }
 
+
 
+    .main .logo .sub-title {
 
+      margin-left: 0.5em;
 
+      font-size: 22px;
 
+      color: #fff;
 
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
 
+      -webkit-background-clip: text;
 
+      -webkit-text-fill-color: transparent;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div class="main">
 
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
 
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
 
+      
+    </a></h1>
 
+    <div class="nav-tabs">
 
+      <ul id="tabs" class="dib-box">
 
+        <li class="dib active"><span>Unicode</span></li>
 
+        <li class="dib"><span>Font class</span></li>
 
+        <li class="dib"><span>Symbol</span></li>
 
+      </ul>
 
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4882224" target="_blank" class="nav-more">查看项目</a>
 
+      
+    </div>
 
+    <div class="tab-container">
 
+      <div class="content unicode" style="display: block;">
 
+          <ul class="icon_lists dib-box">
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe657;</span>
 
+                <div class="name">假期</div>
 
+                <div class="code-name">&amp;#xe657;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe600;</span>
 
+                <div class="name">首页-copy</div>
 
+                <div class="code-name">&amp;#xe600;</div>
 
+              </li>
 
+          
+          </ul>
 
+          <div class="article markdown">
 
+          <h2 id="unicode-">Unicode 引用</h2>
 
+          <hr>
 
+
 
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
 
+          <ul>
 
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
 
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
 
+          </ul>
 
+          <blockquote>
 
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
 
+          </blockquote>
 
+          <p>Unicode 使用步骤如下：</p>
 
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
 
+<pre><code class="language-css"
 
+>@font-face {
 
+  font-family: 'iconfont';
 
+  src: url('iconfont.woff2?t=1743902526013') format('woff2'),
 
+       url('iconfont.woff?t=1743902526013') format('woff'),
 
+       url('iconfont.ttf?t=1743902526013') format('truetype');
 
+}
 
+</code></pre>
 
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
 
+<pre><code class="language-css"
 
+>.iconfont {
 
+  font-family: "iconfont" !important;
 
+  font-size: 16px;
 
+  font-style: normal;
 
+  -webkit-font-smoothing: antialiased;
 
+  -moz-osx-font-smoothing: grayscale;
 
+}
 
+</code></pre>
 
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
 
+<pre>
 
+<code class="language-html"
 
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
 
+</code></pre>
 
+          <blockquote>
 
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
 
+          </blockquote>
 
+          </div>
 
+      </div>
 
+      <div class="content font-class">
 
+        <ul class="icon_lists dib-box">
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-jiaqi"></span>
 
+            <div class="name">
 
+              假期
 
+            </div>
 
+            <div class="code-name">.icon-jiaqi
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-shouye"></span>
 
+            <div class="name">
 
+              首页-copy
 
+            </div>
 
+            <div class="code-name">.icon-shouye
 
+            </div>
 
+          </li>
 
+          
+        </ul>
 
+        <div class="article markdown">
 
+        <h2 id="font-class-">font-class 引用</h2>
 
+        <hr>
 
+
 
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
 
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
 
+        <ul>
 
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
 
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
 
+        </ul>
 
+        <p>使用步骤如下：</p>
 
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
 
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
 
+</code></pre>
 
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
 
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
 
+</code></pre>
 
+        <blockquote>
 
+          <p>"
 
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
 
+        </blockquote>
 
+      </div>
 
+      </div>
 
+      <div class="content symbol">
 
+          <ul class="icon_lists dib-box">
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-jiaqi"></use>
 
+                </svg>
 
+                <div class="name">假期</div>
 
+                <div class="code-name">#icon-jiaqi</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-shouye"></use>
 
+                </svg>
 
+                <div class="name">首页-copy</div>
 
+                <div class="code-name">#icon-shouye</div>
 
+            </li>
 
+          
+          </ul>
 
+          <div class="article markdown">
 
+          <h2 id="symbol-">Symbol 引用</h2>
 
+          <hr>
 
+
 
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
 
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
 
+          <ul>
 
+            <li>支持多色图标了，不再受单色限制。</li>
 
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
 
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
 
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
 
+          </ul>
 
+          <p>使用步骤如下：</p>
 
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
 
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
 
+</code></pre>
 
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
 
+<pre><code class="language-html">&lt;style&gt;
 
+.icon {
 
+  width: 1em;
 
+  height: 1em;
 
+  vertical-align: -0.15em;
 
+  fill: currentColor;
 
+  overflow: hidden;
 
+}
 
+&lt;/style&gt;
 
+</code></pre>
 
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
 
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
 
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
 
+&lt;/svg&gt;
 
+</code></pre>
 
+          </div>
 
+      </div>
 
+
 
+    </div>
 
+  </div>
 
+  <script>
 
+  $(document).ready(function () {
 
+      $('.tab-container .content:first').show()
 
+
 
+      $('#tabs li').click(function (e) {
 
+        var tabContent = $('.tab-container .content')
 
+        var index = $(this).index()
 
+
 
+        if ($(this).hasClass('active')) {
 
+          return
 
+        } else {
 
+          $('#tabs li').removeClass('active')
 
+          $(this).addClass('active')
 
+
 
+          tabContent.hide().eq(index).fadeIn()
 
+        }
 
+      })
 
+    })
 
+  </script>
 
+</body>
 
+</html>

+ 23 - 0
2.css/font/iconfont.css
查看文件 

@@ -0,0 +1,23 @@
 
+@font-face {
 
+  font-family: "iconfont"; /* Project id 4882224 */
 
+  src: url('iconfont.woff2?t=1743902526013') format('woff2'),
 
+       url('iconfont.woff?t=1743902526013') format('woff'),
 
+       url('iconfont.ttf?t=1743902526013') format('truetype');
 
+}
 
+
 
+.iconfont {
 
+  font-family: "iconfont" !important;
 
+  font-size: 16px;
 
+  font-style: normal;
 
+  -webkit-font-smoothing: antialiased;
 
+  -moz-osx-font-smoothing: grayscale;
 
+}
 
+
 
+.icon-jiaqi:before {
 
+  content: "\e657";
 
+}
 
+
 
+.icon-shouye:before {
 
+  content: "\e600";
 
+}
 
+

文件差异内容过多而无法显示
+ 0 - 0
2.css/font/iconfont.js


+ 23 - 0
2.css/font/iconfont.json
查看文件 

@@ -0,0 +1,23 @@
 
+{
 
+  "id": "4882224",
 
+  "name": "2025.4.6",
 
+  "font_family": "iconfont",
 
+  "css_prefix_text": "icon-",
 
+  "description": "",
 
+  "glyphs": [
 
+    {
 
+      "icon_id": "11065321",
 
+      "name": "假期",
 
+      "font_class": "jiaqi",
 
+      "unicode": "e657",
 
+      "unicode_decimal": 58967
 
+    },
 
+    {
 
+      "icon_id": "39807617",
 
+      "name": "首页-copy",
 
+      "font_class": "shouye",
 
+      "unicode": "e600",
 
+      "unicode_decimal": 58880
 
+    }
 
+  ]
 
+}

二进制
2.css/font/iconfont.ttf
查看文件


二进制
2.css/font/iconfont.woff
查看文件


二进制
2.css/font/iconfont.woff2
查看文件


部分文件因为文件数量过多而无法显示