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

js

e 1 年之前
父节点
51f917a4c4
当前提交
372f1144e3
共有 18 个文件被更改，包括 1416 次插入 和 0 次删除
分列视图 显示文件统计
  1. 24 0
      JS初级/JS基础/1.js的引入.html
  2. 34 0
      JS初级/JS基础/2.变量.html
  3. 54 0
      JS初级/JS基础/3.js的类型.html
  4. 1 0
      JS初级/JS基础/index.js
  5. 308 0
      html+css/day6/demo.css
  6. 108 0
      html+css/day6/demo.html
  7. 539 0
      html+css/day6/font/demo.css
  8. 280 0
      html+css/day6/font/demo_index.html
  9. 31 0
      html+css/day6/font/iconfont.css
  10. 0 0
      html+css/day6/font/iconfont.js
  11. 37 0
      html+css/day6/font/iconfont.json
  12. 二进制
      html+css/day6/font/iconfont.ttf
  13. 二进制
      html+css/day6/font/iconfont.woff
  14. 二进制
      html+css/day6/font/iconfont.woff2
  15. 二进制
      html+css/day6/images/banner.jpg
  16. 二进制
      html+css/day6/images/logo.png
  17. 二进制
      html+css/day6/images/picture.png
  18. 二进制
      html+css/day6/images/search.png

+ 24 - 0
JS初级/JS基础/1.js的引入.html
查看文件 

@@ -0,0 +1,24 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        JS => JavaScript
 
+        弱语言类型
 
+        数据 决定 类型
 
+     -->
 
+     <!-- 
+        1.直接在html页面中添加script标签
 
+        2.在script标签中的src属性里去引入js页面路径
 
+      -->
 
+     <!-- <script>
 
+        alert("这是一个弹框")
 
+     </script> -->
 
+
 
+     <script src="./index.js"></script>
 
+</body>
 
+</html>

+ 34 - 0
JS初级/JS基础/2.变量.html
查看文件 

@@ -0,0 +1,34 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        JS 是 弱语言类型
 
+        数据 决定 类型
 
+        变量：
 
+            var
 
+        变量的命名规则：
 
+            1.变量的命名由英文，数字，_(下划线)，$(美元符号)组成;
 
+            2.变量的开头首字母 由英文，数字，$(美元符号);
 
+            3.变量不可以以关键字命名;
 
+            4.变量的命名必须严格区分大小写;
 
+     -->
 
+    <script>
 
+        var school = 10;
 
+        // 打印 console.log
 
+        console.log(school,'打印的是变量a的值');
 
+        // var 新的;//报错
 
+        // 先定义
 
+        var age;
 
+
 
+        age = 18;
 
+
 
+        console.log(age,'年龄');
 
+
 
+    </script>
 
+</body>
 
+</html>

+ 54 - 0
JS初级/JS基础/3.js的类型.html
查看文件 

@@ -0,0 +1,54 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        
+        JS 是 弱语言类型
 
+        数据 决定 类型
 
+        js的类型：
 
+            基本数据类型:number(数字) string(字符串) boolean(布尔:true/false) undefined(未定义) null(空)
 
+            引用数据类型:object(对象{}/数组[]/null)
 
+        判断数据类型的：
 
+            typeof
 
+     -->
 
+    <script>
 
+        // var a = 10;
 
+        // console.log(a,'a');
 
+        // console.log(typeof a);
 
+        // var b = '10'; 
+        // console.log(b,'b');
 
+        // console.log(typeof b);
 
+        // var c1 = true;
 
+        // console.log(typeof c1);
 
+        // var c2 = false;
 
+        // console.log(typeof c2);
 
+        // var d;
 
+        // console.log(typeof d);
 
+        // d = '新的';
 
+        // console.log(typeof d);
 
+        var obj = {};
 
+        console.log(typeof obj)
 
+        var obj1 = [];
 
+        console.log(typeof obj1)
 
+        var obj2 = null;
 
+        console.log(typeof obj2)
 
+        var obj3 = undefined;
 
+        console.log(typeof obj3)
 
+        // null和undefined
 
+        if(1 === '1') {
 
+            alert("♥相等")
 
+        } else {
 
+            alert("♥不相等")
 
+        }
 
+        // = == === 区别
 
+        // = 赋值
 
+        // == 相等 强制转换类型 特别：null == undefined
 
+        // === 全等于 没有类型转换 必须全部相同 
+    </script>
 
+</body>
 
+</html>

+ 1 - 0
JS初级/JS基础/index.js
查看文件 

@@ -0,0 +1 @@
 
+alert("这是个新页面！！")

+ 308 - 0
html+css/day6/demo.css
查看文件 

@@ -0,0 +1,308 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+    list-style: none;
 
+    text-decoration: none;
 
+    box-sizing: border-box;
 
+}
 
+/* 主体给宽不给高 */
 
+#box {
 
+    width: 100%;
 
+}
 
+/* 头部 */
 
+#box #header {
 
+    width: 100%;
 
+    height: 72px;
 
+}
 
+#header .container {
 
+    width: 1200px;
 
+    height: 100%;
 
+    margin: 0 auto;
 
+    overflow: hidden;
 
+}
 
+#header .container .left {
 
+    width: 92px;
 
+    height: 42px;
 
+    float: left;
 
+}
 
+#header .container .left img {
 
+    width: 100%;
 
+    height: 100%;
 
+    margin-top: 14px;
 
+}
 
+#header .container .mid {
 
+    width: 189px;
 
+    height: 100%;
 
+    float: left;
 
+    overflow: hidden;
 
+    margin-left: 94px;
 
+}
 
+#header .container .mid .address {
 
+    width: 68px;
 
+    height: 25px;
 
+    float: left;
 
+    margin-top: 18px;
 
+}
 
+#header .container .mid .address .picture1 {
 
+    font-size: 15px;
 
+}
 
+#header .container .mid .address .picture2 {
 
+    font-size: 9px;
 
+    margin-left: -6px;
 
+}
 
+#header .container .mid .address .city {
 
+    font-size: 16px;
 
+    margin-left: -5px;
 
+}
 
+#header .container .mid .nav {
 
+    width: 100px;
 
+    height: 100%;
 
+    float: right;
 
+}
 
+#header .container .mid .nav ul{
 
+    overflow: hidden;
 
+    margin-left: 18px;
 
+    margin-top: 18px;
 
+}
 
+#header .container .mid .nav ul li{
 
+    float: left;
 
+}
 
+#header .container .mid .nav ul li a {
 
+    font-size: 16px;
 
+    color: #000;
 
+}
 
+#header .container .mid .nav ul li:first-child a {
 
+    color: #FF1268;
 
+}
 
+#header .container .mid .nav ul li:last-child {
 
+    margin-left: 15px;
 
+}
 
+#header .container .mid .nav ul li a:hover {
 
+    color: #FF1268;
 
+}
 
+#header .container .right {
 
+    width: 627px;
 
+    height: 100%;
 
+    float: right;
 
+    overflow: hidden;
 
+}
 
+#header .container .right .search {
 
+    width: 431px;
 
+    height: 46px;
 
+    float: left;
 
+    overflow: hidden;
 
+    background: #f8f8f8;
 
+    border-radius: 20px;
 
+    margin-top: 13px;
 
+}
 
+#header .container .right .search img {
 
+    width: 17px;
 
+    height: 18px;
 
+    float: left;
 
+    margin-left: 20px;
 
+    margin-top: 15px;
 
+}
 
+
 
+#header .container .right .search input {
 
+    width: 319px;
 
+    height: 46px;
 
+    border: none;
 
+    outline: none;
 
+    float: left;
 
+    margin-left: 9px;
 
+    background: #f8f8f8;
 
+}
 
+
 
+#header .container .right .search .btn {
 
+    width: 66px;
 
+    height: 46px;
 
+    text-align: center;
 
+    line-height: 46px;
 
+    float: left;
 
+    font-size: 16px;
 
+    color: #fff;
 
+    background: #FF1268;
 
+}
 
+#header .container .right .login {
 
+    width: 62px;
 
+    height: 72px;
 
+    float: left;
 
+    overflow: hidden;
 
+    margin-left: 44px;
 
+}
 
+#header .container .right .login .picture {
 
+    font-size: 26px;
 
+    float: left;
 
+    display: block;
 
+    margin-top: 22px;
 
+}
 
+#header .container .right .login span:last-child {
 
+    font-size: 15px;
 
+    float: left;
 
+    display: block;
 
+    margin-top: 25px;
 
+    margin-left: 6px;
 
+}
 
+#header .container .right .downLoad {
 
+    width: 62px;
 
+    height: 72px;
 
+    float: right;
 
+    overflow: hidden;
 
+}
 
+#header .container .right .downLoad .picture {
 
+    font-size: 26px;
 
+    float: left;
 
+    display: block;
 
+    margin-top: 22px;
 
+}
 
+#header .container .right .downLoad span:last-child {
 
+    font-size: 15px;
 
+    float: left;
 
+    display: block;
 
+    margin-top: 25px;
 
+    margin-left: 6px;
 
+}
 
+/* 主体 */
 
+#main .container {
 
+    width: 1200px;
 
+    margin: 0 auto;
 
+}
 
+#main .container .banner {
 
+    width: 100%;
 
+    height: 320px;
 
+}
 
+#main .container .banner img {
 
+    width: 100%;
 
+    height: 100%;
 
+}
 
+#main .container .list {
 
+    width: 1200px;
 
+    height: 118px;
 
+    border: 1px solid #ccc;
 
+    margin-top: 17px;
 
+    overflow: hidden;
 
+    padding-top: 29px;
 
+}
 
+#main .container .list .listItem {
 
+    width: 119px;
 
+    height: 69px;
 
+    float: left;
 
+}
 
+#main .container .list .listItem .word {
 
+    font-size: 16px;
 
+    width: 100%;
 
+    text-align: center;
 
+}
 
+#main .container .list .listItem .word:hover {
 
+    color: #FF1268;
 
+}
 
+#main .container .list .listItem .picture {
 
+    margin: 0 auto;
 
+}
 
+#main .container .list .listItem:nth-child(1) .picture {
 
+    width: 48px;
 
+    height: 48px;
 
+    background: url("./images/picture.png");
 
+    background-position: 0px 0px;
 
+    background-size: cover;
 
+}
 
+#main .container .list .listItem:nth-child(2) .picture {
 
+    width: 48px;
 
+    height: 48px;
 
+    background: url("./images/picture.png");
 
+    background-position: 0px -68px;
 
+    background-size: cover;
 
+}
 
+#main .container .list .listItem:nth-child(3) .picture {
 
+    width: 48px;
 
+    height: 48px;
 
+    background: url("./images/picture.png");
 
+    background-position: 0px -128px;
 
+    background-size: cover;
 
+}
 
+#main .container .list .listItem:nth-child(4) .picture {
 
+    width: 48px;
 
+    height: 48px;
 
+    background: url("./images/picture.png");
 
+    background-position: 0px -187px;
 
+    background-size: cover;
 
+}
 
+#main .container .list .listItem:nth-child(5) .picture {
 
+    width: 48px;
 
+    height: 48px;
 
+    background: url("./images/picture.png");
 
+    background-position: 0px -242px;
 
+    background-size: cover;
 
+}
 
+#main .container .list .listItem:nth-child(6) .picture {
 
+    width: 48px;
 
+    height: 48px;
 
+    background: url("./images/picture.png");
 
+    background-position: 0px -300px;
 
+    background-size: cover;
 
+}
 
+#main .container .list .listItem:nth-child(7) .picture {
 
+    width: 48px;
 
+    height: 48px;
 
+    background: url("./images/picture.png");
 
+    background-position: 0px -360px;
 
+    background-size: cover;
 
+}
 
+#main .container .list .listItem:nth-child(8) .picture {
 
+    width: 48px;
 
+    height: 48px;
 
+    background: url("./images/picture.png");
 
+    background-position: 0px -424px;
 
+    background-size: cover;
 
+}
 
+#main .container .list .listItem:nth-child(9) .picture {
 
+    width: 48px;
 
+    height: 48px;
 
+    background: url("./images/picture.png");
 
+    background-position: 0px -481px;
 
+    background-size: cover;
 
+}
 
+#main .container .list .listItem:nth-child(10) .picture {
 
+    width: 48px;
 
+    height: 48px;
 
+    background: url("./images/picture.png");
 
+    background-position: 0px -540px;
 
+    background-size: cover;
 
+}
 
+#main .container .shop1 {
 
+    width: 100%;
 
+    height: 457px;
 
+    border: 1px solid #f00;
 
+    margin-top: 12px;
 
+}
 
+#main .container .shop2 {
 
+    width: 100%;
 
+    height: 457px;
 
+    border: 1px solid #f00;
 
+    margin-top: 12px;
 
+}
 
+#main .container .shop3 {
 
+    width: 100%;
 
+    height: 457px;
 
+    border: 1px solid #f00;
 
+    margin-top: 12px;
 
+}
 
+#main .container .shop4 {
 
+    width: 100%;
 
+    height: 457px;
 
+    border: 1px solid #f00;
 
+    margin-top: 12px;
 
+    margin-bottom: 66px;
 
+}
 
+/* 页尾 */
 
+#footer {
 
+    width: 100%;
 
+    height: 350px;
 
+    background: #f8f8f8;
 
+}
 
+#footer .container {
 
+    width: 1200px;
 
+    height: 100%;
 
+    background: #0f0;
 
+    margin: 0 auto;
 
+}

+ 108 - 0
html+css/day6/demo.html
查看文件 

@@ -0,0 +1,108 @@
 
+<!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="./demo.css" />
 
+    <link rel="stylesheet" href="./font/iconfont.css" />
 
+  </head>
 
+  <body>
 
+    <div id="box">
 
+      <div id="header">
 
+        <div class="container">
 
+          <div class="left">
 
+            <img src="./images/logo.png" alt="" />
 
+          </div>
 
+          <div class="mid">
 
+            <div class="address">
 
+              <span class="iconfont icon-dizhiguanli picture1"></span>
 
+              <span class="city">北京</span>
 
+              <span class="iconfont icon-xiajiantou picture2"></span>
 
+            </div>
 
+            <div class="nav">
 
+              <ul>
 
+                <li><a href="">首页</a></li>
 
+                <li><a href="">分类</a></li>
 
+              </ul>
 
+            </div>
 
+          </div>
 
+          <div class="right">
 
+            <div class="search">
 
+              <img src="./images/search.png" alt="" />
 
+              <input type="text" placeholder="搜索明星、演出、体育赛事" />
 
+              <div class="btn">搜索</div>
 
+            </div>
 
+            <div class="login">
 
+              <span class="iconfont icon-gerenxinxi picture"></span>
 
+              <span>登录</span>
 
+            </div>
 
+            <div class="downLoad">
 
+              <span class="iconfont icon-yunduanxiazai picture"></span>
 
+              <span>下载</span>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <div id="main">
 
+        <div class="container">
 
+            <!-- banner图 -->
 
+            <div class="banner">
 
+                <img src="./images/banner.jpg" alt="">
 
+            </div>
 
+            <!-- 列表 -->
 
+            <div class="list">
 
+                <div class="listItem">
 
+                    <div class="picture"></div>
 
+                    <div class="word">演唱会</div>
 
+                </div>
 
+                <div class="listItem">
 
+                    <div class="picture"></div>
 
+                    <div class="word">话剧歌剧</div>
 
+                </div>
 
+                <div class="listItem">
 
+                    <div class="picture"></div>
 
+                    <div class="word">体育</div>
 
+                </div>
 
+                <div class="listItem">
 
+                    <div class="picture"></div>
 
+                    <div class="word">儿童亲子</div>
 
+                </div>
 
+                <div class="listItem">
 
+                    <div class="picture"></div>
 
+                    <div class="word">展览休闲</div>
 
+                </div>
 
+                <div class="listItem">
 
+                    <div class="picture"></div>
 
+                    <div class="word">音乐会</div>
 
+                </div>
 
+                <div class="listItem">
 
+                    <div class="picture"></div>
 
+                    <div class="word">曲苑杂坛</div>
 
+                </div>
 
+                <div class="listItem">
 
+                    <div class="picture"></div>
 
+                    <div class="word">舞蹈芭蕾</div>
 
+                </div>
 
+                <div class="listItem">
 
+                    <div class="picture"></div>
 
+                    <div class="word">二次元</div>
 
+                </div>
 
+                <div class="listItem">
 
+                    <div class="picture"></div>
 
+                    <div class="word">旅游展览</div>
 
+                </div>
 
+            </div>
 
+            <!-- 展示信息 -->
 
+            <div class="shop1"></div>
 
+            <div class="shop2"></div>
 
+            <div class="shop3"></div>
 
+            <div class="shop4"></div>
 
+        </div>
 
+      </div>
 
+      <div id="footer">
 
+        <div class="container"></div>
 
+      </div>
 
+    </div>
 
+  </body>
 
+</html>

+ 539 - 0
html+css/day6/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;
 
+}

+ 280 - 0
html+css/day6/font/demo_index.html
查看文件 

@@ -0,0 +1,280 @@
 
+<!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=4410792" 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">&#xe62c;</span>
 
+                <div class="name">个人信息</div>
 
+                <div class="code-name">&amp;#xe62c;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xec1d;</span>
 
+                <div class="name">云端下载</div>
 
+                <div class="code-name">&amp;#xec1d;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe63f;</span>
 
+                <div class="name">地址管理</div>
 
+                <div class="code-name">&amp;#xe63f;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xeb6d;</span>
 
+                <div class="name">下箭头</div>
 
+                <div class="code-name">&amp;#xeb6d;</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=1705289050393') format('woff2'),
 
+       url('iconfont.woff?t=1705289050393') format('woff'),
 
+       url('iconfont.ttf?t=1705289050393') 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-gerenxinxi"></span>
 
+            <div class="name">
 
+              个人信息
 
+            </div>
 
+            <div class="code-name">.icon-gerenxinxi
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-yunduanxiazai"></span>
 
+            <div class="name">
 
+              云端下载
 
+            </div>
 
+            <div class="code-name">.icon-yunduanxiazai
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-dizhiguanli"></span>
 
+            <div class="name">
 
+              地址管理
 
+            </div>
 
+            <div class="code-name">.icon-dizhiguanli
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-xiajiantou"></span>
 
+            <div class="name">
 
+              下箭头
 
+            </div>
 
+            <div class="code-name">.icon-xiajiantou
 
+            </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-gerenxinxi"></use>
 
+                </svg>
 
+                <div class="name">个人信息</div>
 
+                <div class="code-name">#icon-gerenxinxi</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-yunduanxiazai"></use>
 
+                </svg>
 
+                <div class="name">云端下载</div>
 
+                <div class="code-name">#icon-yunduanxiazai</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-dizhiguanli"></use>
 
+                </svg>
 
+                <div class="name">地址管理</div>
 
+                <div class="code-name">#icon-dizhiguanli</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-xiajiantou"></use>
 
+                </svg>
 
+                <div class="name">下箭头</div>
 
+                <div class="code-name">#icon-xiajiantou</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>

+ 31 - 0
html+css/day6/font/iconfont.css
查看文件 

@@ -0,0 +1,31 @@
 
+@font-face {
 
+  font-family: "iconfont"; /* Project id 4410792 */
 
+  src: url('iconfont.woff2?t=1705289050393') format('woff2'),
 
+       url('iconfont.woff?t=1705289050393') format('woff'),
 
+       url('iconfont.ttf?t=1705289050393') format('truetype');
 
+}
 
+
 
+.iconfont {
 
+  font-family: "iconfont" !important;
 
+  font-size: 16px;
 
+  font-style: normal;
 
+  -webkit-font-smoothing: antialiased;
 
+  -moz-osx-font-smoothing: grayscale;
 
+}
 
+
 
+.icon-gerenxinxi:before {
 
+  content: "\e62c";
 
+}
 
+
 
+.icon-yunduanxiazai:before {
 
+  content: "\ec1d";
 
+}
 
+
 
+.icon-dizhiguanli:before {
 
+  content: "\e63f";
 
+}
 
+
 
+.icon-xiajiantou:before {
 
+  content: "\eb6d";
 
+}
 
+

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


+ 37 - 0
html+css/day6/font/iconfont.json
查看文件 

@@ -0,0 +1,37 @@
 
+{
 
+  "id": "4410792",
 
+  "name": "1.15",
 
+  "font_family": "iconfont",
 
+  "css_prefix_text": "icon-",
 
+  "description": "",
 
+  "glyphs": [
 
+    {
 
+      "icon_id": "900063",
 
+      "name": "个人信息",
 
+      "font_class": "gerenxinxi",
 
+      "unicode": "e62c",
 
+      "unicode_decimal": 58924
 
+    },
 
+    {
 
+      "icon_id": "4932635",
 
+      "name": "云端下载",
 
+      "font_class": "yunduanxiazai",
 
+      "unicode": "ec1d",
 
+      "unicode_decimal": 60445
 
+    },
 
+    {
 
+      "icon_id": "2811144",
 
+      "name": "地址管理",
 
+      "font_class": "dizhiguanli",
 
+      "unicode": "e63f",
 
+      "unicode_decimal": 58943
 
+    },
 
+    {
 
+      "icon_id": "4175511",
 
+      "name": "下箭头",
 
+      "font_class": "xiajiantou",
 
+      "unicode": "eb6d",
 
+      "unicode_decimal": 60269
 
+    }
 
+  ]
 
+}

二进制
html+css/day6/font/iconfont.ttf
查看文件


二进制
html+css/day6/font/iconfont.woff
查看文件


二进制
html+css/day6/font/iconfont.woff2
查看文件


二进制
html+css/day6/images/banner.jpg
查看文件


二进制
html+css/day6/images/logo.png
查看文件


二进制
html+css/day6/images/picture.png
查看文件


二进制
html+css/day6/images/search.png
查看文件


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