Home Explore Help
Sign In
lovecoding
/
VIP26
9
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

day4

e 1 year ago
parent
6f2061bdc7
commit
1071632a78
16 changed files with 1171 additions and 2 deletions
Split View Show Diff Stats
  1. 2 2
      day3/选择器的优先级.html
  2. 92 0
      day4/demo2.css
  3. 58 0
      day4/demo2.html
  4. 539 0
      day4/font/demo.css
  5. 234 0
      day4/font/demo_index.html
  6. 23 0
      day4/font/iconfont.css
  7. 0 0
      day4/font/iconfont.js
  8. 23 0
      day4/font/iconfont.json
  9. BIN
      day4/font/iconfont.ttf
  10. BIN
      day4/font/iconfont.woff
  11. BIN
      day4/font/iconfont.woff2
  12. 14 0
      day4/iconfont使用方法.html
  13. BIN
      day4/images/logo.png
  14. 54 0
      day4/浮动.html
  15. 104 0
      day4/清除浮动方法.html
  16. 28 0
      day4/省略号.html

+ 2 - 2
day3/选择器的优先级.html
View File 

@@ -36,8 +36,8 @@
 
     <!-- 
         css选择器优先级及权重：
 
 
-        !important >内联样式（style）> id选择器 >类选择器（class）= 伪类选择器 = 属性选择器 > 标签选择器
 
-   权重：   正无穷     1,0,0,0          0,1,0,0           0,0,1,0                          0,0,0,1
 
+        !important >内联样式（style）> id选择器 >类选择器（class）= 伪类选择器 = 属性选择器 > 标签选择器=伪元素选择器>通配符选择器
 
+   权重：   正无穷     1,0,0,0          0,1,0,0           0,0,1,0                          0,0,0,1                0,0,0,0
 
      -->
 
 </body>
 
 </html>

+ 92 - 0
day4/demo2.css
View File 

@@ -0,0 +1,92 @@
 
+/* 
+    主体样式：给宽不给高
 
+*/
 
+/* 通配符选择器 */
 
+* {
 
+    /* 无序列表默认样式 */
 
+    list-style: none;
 
+    /* a标签默认样式 */
 
+    text-decoration: none;
 
+}
 
+.content {
 
+    width: 960px;
 
+    height: 100%;
 
+}
 
+/* 头部样式 */
 
+.head {
 
+    width: 100%;
 
+    height: 55px;
 
+    overflow: hidden;
 
+}
 
+.logo {
 
+    width: 105px;
 
+    height: 100%;
 
+    float: left;
 
+}
 
+.search {
 
+    width: 555px;
 
+    height: 100%;
 
+    float: left;
 
+}
 
+.search .input {
 
+    width: 377px;
 
+    height: 24px;
 
+    margin-left: 169px;
 
+    margin-top: 13px;
 
+    outline: none;
 
+}
 
+.login {
 
+    width: 300px;
 
+    height: 100%;
 
+    float: left;
 
+}
 
+.directory {
 
+    margin-left: 144px;
 
+}
 
+.login .directory .btn {
 
+    
+    width: 50px;
 
+    height: 42px;
 
+    background: #eee;
 
+    color: blue;
 
+    display: inline-block;
 
+    margin-left: 17px;
 
+    text-align: center;
 
+    line-height: 42px;
 
+    font-size: 14px;
 
+
 
+}
 
+/* 主体样式 */
 
+.main {
 
+    width: 100%;
 
+    height: 500px;
 
+    background: #f00;
 
+}
 
+/* 导航栏 */
 
+.nav {
 
+    width: 100%;
 
+    height: 42px;
 
+    line-height: 42px;
 
+    background: #00f;
 
+}
 
+.nav ul {
 
+    overflow: hidden;
 
+    margin-left: -39px;
 
+}
 
+.nav ul li {
 
+    float: left;
 
+    margin-left: 21px;
 
+}
 
+.nav ul li a {
 
+    color: #fff;
 
+    font-size: 17px;
 
+}
 
+.nav ul li a:hover {
 
+    color: #f00;
 
+}
 
+/* 页尾样式 */
 
+.footer {
 
+    width: 100%;
 
+    height: 100px;
 
+    background: #00f;
 
+}

+ 58 - 0
day4/demo2.html
View File 

@@ -0,0 +1,58 @@
 
+<!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="./demo2.css">
 
+    <link rel="stylesheet" href="./font/iconfont.css">
 
+</head>
 
+<body>
 
+    <div class="content">
 
+        <!-- 头部盒子 -->
 
+        <div class="head">
 
+            <div class="logo">
 
+                <img src="./images/logo.png" alt="">
 
+            </div>
 
+            <div class="search">
 
+                <input type="text" class="input" placeholder="请输入您要搜索的内容">
 
+            </div>
 
+            <div class="login">
 
+                <div class="directory">
 
+                    <span class="iconfont icon-shoucang" style="font-size: 25px;margin-top: 10px;display: inline-block;"></span>
 
+                    <span class="iconfont icon-youjian" style="font-size: 25px;display: inline-block;margin-top: 13px;margin-left: 11px;"></span>
 
+                    <!-- <span>登录</span> -->
 
+                    <div class="btn">登录</div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <!-- 主体盒子 -->
 
+        <div class="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="">新闻</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>
 
+        <!-- 页尾盒子 -->
 
+        <div class="footer"></div>
 
+    </div>
 
+</body>
 
+</html>

+ 539 - 0
day4/font/demo.css
View File 

@@ -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
day4/font/demo_index.html
View File 

@@ -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=4170475" 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">&#xe65e;</span>
 
+                <div class="name">收藏</div>
 
+                <div class="code-name">&amp;#xe65e;</div>
 
+              </li>
 
+          
+            <li class="dib">
 
+              <span class="icon iconfont">&#xe697;</span>
 
+                <div class="name">邮件</div>
 
+                <div class="code-name">&amp;#xe697;</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=1689579658927') format('woff2'),
 
+       url('iconfont.woff?t=1689579658927') format('woff'),
 
+       url('iconfont.ttf?t=1689579658927') 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-shoucang"></span>
 
+            <div class="name">
 
+              收藏
 
+            </div>
 
+            <div class="code-name">.icon-shoucang
 
+            </div>
 
+          </li>
 
+          
+          <li class="dib">
 
+            <span class="icon iconfont icon-youjian"></span>
 
+            <div class="name">
 
+              邮件
 
+            </div>
 
+            <div class="code-name">.icon-youjian
 
+            </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-shoucang"></use>
 
+                </svg>
 
+                <div class="name">收藏</div>
 
+                <div class="code-name">#icon-shoucang</div>
 
+            </li>
 
+          
+            <li class="dib">
 
+                <svg class="icon svg-icon" aria-hidden="true">
 
+                  <use xlink:href="#icon-youjian"></use>
 
+                </svg>
 
+                <div class="name">邮件</div>
 
+                <div class="code-name">#icon-youjian</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
day4/font/iconfont.css
View File 

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

File diff suppressed because it is too large
+ 0 - 0
day4/font/iconfont.js


+ 23 - 0
day4/font/iconfont.json
View File 

@@ -0,0 +1,23 @@
 
+{
 
+  "id": "4170475",
 
+  "name": "demo",
 
+  "font_family": "iconfont",
 
+  "css_prefix_text": "icon-",
 
+  "description": "",
 
+  "glyphs": [
 
+    {
 
+      "icon_id": "1183028",
 
+      "name": "收藏",
 
+      "font_class": "shoucang",
 
+      "unicode": "e65e",
 
+      "unicode_decimal": 58974
 
+    },
 
+    {
 
+      "icon_id": "5831745",
 
+      "name": "邮件",
 
+      "font_class": "youjian",
 
+      "unicode": "e697",
 
+      "unicode_decimal": 59031
 
+    }
 
+  ]
 
+}

BIN
day4/font/iconfont.ttf
View File


BIN
day4/font/iconfont.woff
View File


BIN
day4/font/iconfont.woff2
View File


+ 14 - 0
day4/iconfont使用方法.html
View File 

@@ -0,0 +1,14 @@
 
+<!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">
 
+</head>
 
+<body>
 
+    <!-- 1.link标签引入iconfont.css文件 -->
 
+    <!-- 2.使用方法<span class="iconfont icon-xxx"></span> -->
 
+    <span class="iconfont icon-shoucang"></span>
 
+</body>
 
+</html>

BIN
day4/images/logo.png
View File


+ 54 - 0
day4/浮动.html
View File 

@@ -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>
 
+    <style>
 
+        .one {
 
+            width: 200px;
 
+            height: 200px;
 
+            border: 1px solid #f00;
 
+            /* background: #00f; */
 
+            float: left;
 
+        }
 
+        .two {
 
+            width: 200px;
 
+            height: 200px;
 
+            border: 1px solid #f00;
 
+            /* background: #f0f; */
 
+            float: left;
 
+        }
 
+        .three {
 
+            width: 200px;
 
+            height: 200px;
 
+            border: 1px solid #f00;
 
+            /* background: #0ff; */
 
+            float: left;
 
+        }
 
+        .four {
 
+            width: 200px;
 
+            height: 200px;
 
+            border: 1px solid #f00;
 
+            /* background: #ff0; */
 
+            /* float: left; */
 
+        }
 
+
 
+        /* 
+            浮动
 
+            为什么使用浮动：因为想让元素在一行显示
 
+            float:left/right
 
+            添加浮动属性后对浮动前的元素无影响，对浮动后的元素有影响
 
+            浮动会导致元素脱离文档流 不占位
 
+            缺点：会导致父元素的高度塌陷
 
+        */
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="main">
 
+        <div class="one">1</div>
 
+        <div class="two">2</div>
 
+        <div class="three">3</div>
 
+    </div>
 
+</body>
 
+</html>

+ 104 - 0
day4/清除浮动方法.html
View File 

@@ -0,0 +1,104 @@
 
+<!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>
 
+        .main {
 
+            /* overflow: hidden; */
 
+        }
 
+        .one {
 
+            width: 200px;
 
+            height: 200px;
 
+            border: 1px solid #f00;
 
+            /* background: #00f; */
 
+            float: left;
 
+        }
 
+        .two {
 
+            width: 200px;
 
+            height: 200px;
 
+            border: 1px solid #f00;
 
+            /* background: #f0f; */
 
+            float: left;
 
+        }
 
+        .three {
 
+            width: 200px;
 
+            height: 200px;
 
+            border: 1px solid #f00;
 
+            /* background: #f0f; */
 
+            float: left;
 
+        }
 
+        .four {
 
+            width: 200px;
 
+            height: 200px;
 
+            float: left;
 
+            background: #00f;
 
+        }
 
+        .clearfix::after {
 
+            content: "";
 
+            display: block;
 
+            clear: both;
 
+        }
 
+        /* .empty {
 
+            clear: left;
 
+        } */
 
+        /* div {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+            margin-top: 10px;
 
+            display: inline-block;
 
+        }
 
+        span {
 
+            width: 100px;
 
+            height: 100px;
 
+            margin-top: 10px;
 
+            background: #00f;
 
+            display: inline-block;
 
+        } */
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 
+        清浮动方法
 
+        1.溢出隐藏法
 
+            在父级盒子上 添加overflow:hidden（隐藏）| auto（自适应）
 
+        2.额外标签法
 
+            在与浮动同级上添加一个空盒子，单独添加属性clear:both|none|left|right
 
+        3.伪元素清浮动
 
+        .clearfix::after {
 
+            content: "";
 
+            display: block;
 
+            clear: both;
 
+        }
 
+        添加到浮动的父级元素上
 
+     -->
 
+     <!-- 
+        块级元素 display: block
 
+        行内元素 display: inline
 
+        行内块元素 display: inline-block
 
+      -->
 
+      <!-- 
+        特殊符号
 
+        &nbsp; 半格
 
+        &gt; 大于号
 
+        &lt; 小于号
 
+        &reg; 商标
 
+       -->
 
+      <!-- <div></div>
 
+      <div></div>
 
+      <span>1</span>
 
+      <span>2</span> -->
 
+      &gt;
 
+      &lt;
 
+      &reg;
 
+    <div class="main clearfix">
 
+        <div class="one">1</div>
 
+        <div class="two">2</div>
 
+        <div class="three">3</div>
 
+        <div class="four">4</div>
 
+        <!-- <div class="empty"></div> -->
 
+    </div>
 
+</body>
 
+</html>

+ 28 - 0
day4/省略号.html
View File 

@@ -0,0 +1,28 @@
 
+<!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>
 
+        p {
 
+            width: 400px;
 
+            border: 1px solid #000;
 
+            /* 
+              超出宽度部分变成省略号
 
+            */
 
+            /* 不允许换行 */
 
+            white-space: nowrap;
 
+            /* 溢出隐藏 */
 
+            overflow: hidden;
 
+            /* 变成省略号 */
 
+            text-overflow: ellipsis;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <p>
 
+        这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
 
+    </p>
 
+</body>
 
+</html>

Some files were not shown because too many files changed in this diff