fengchuanyu 5 小时之前
父节点
当前提交
79d2ec37bc
共有 3 个文件被更改,包括 124 次插入2 次删除
  1. 53 0
      2_CSS/37_iconfont.html
  2. 53 1
      2_CSS/css/login.css
  3. 18 1
      2_CSS/练习8_小米登录.html

+ 53 - 0
2_CSS/37_iconfont.html

@@ -0,0 +1,53 @@
+<!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="https://at.alicdn.com/t/c/font_5209207_75gnoupm8ng.css">
+    <style>
+        /* @font-face 定义字体 引入字体库  */
+        /* @font-face { */
+            /* 字体名称 */
+            /* font-family: "iconfont"; */
+            /* Project id 5209207 */
+            /* 字体库地址 */
+            /* src: url('https://at.alicdn.com/t/c/font_5209207_bdvu781tnbt.woff2?t=1783925904214') format('woff2'),
+                url('https://at.alicdn.com/t/c/font_5209207_bdvu781tnbt.woff?t=1783925904214') format('woff'),
+                url('https://at.alicdn.com/t/c/font_5209207_bdvu781tnbt.ttf?t=1783925904214') format('truetype'); */
+        /* } */
+
+        /* .iconfont { */
+            /* 字体名称 */
+            /* font-family: "iconfont" !important; */
+            /* font-size: 16px; */
+            /* font-style 字体样式 normal 正常 italic 斜体 */
+            /* font-style: normal; */
+            /* 字体平滑 */
+            /* -webkit-(webkit浏览器 比如chrome) -moz-(firefox浏览器) 用作与适配不同的浏览器 */
+            /* -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale; */
+        /* } */
+
+        /* .icon-zhifubao:before {
+            content: "\e60f";
+        }
+
+        .icon-qq:before {
+            content: "\e68d";
+        } */
+        .icon-qq{
+            color: red;
+            font-size: 100px;
+        }
+    </style>
+</head>
+
+<body>
+    <i class="iconfont icon-qq"></i>
+    <i class="iconfont icon-zhifubao"></i>
+    <i class="iconfont icon-weibo"></i>
+</body>
+
+</html>

+ 53 - 1
2_CSS/css/login.css

@@ -94,7 +94,7 @@ li{
     width: 450px;
     background-color: #fff;
     box-shadow:0 0 10px #aaa;
-    margin: 100px auto;
+    margin: 30px auto;
     padding: 40px 45px;
     box-sizing: border-box;
 }
@@ -177,6 +177,58 @@ li{
 .login-box .text-btn span:last-child{
     float: right;
 }
+/* 其他登录方式 */
+.login-other{
+    text-align: center;
+}
+.login-other p{
+    font-size: 17px;
+    color: #aaa;
+    font-weight: 400;
+}
+.login-other ul{
+    width: 264px;
+    margin: 0 auto;
+}
+.login-other ul li{
+    float: left;
+    width: 46px;
+    height: 46px;
+    border-radius: 50%;
+    background-color: #aaa;
+    color: #fff;
+    line-height: 46px;
+    text-align: center;
+    margin: 0 10px;
+}
+.login-other ul li i{
+    font-size: 30px;
+}
+.login-other ul li:first-child{
+    background-color: #007bff;
+}
+.login-other ul li:nth-child(2){
+    background-color: #50B674;
+}
+.login-other ul li:nth-child(3){
+    background-color: #18ACFC;
+}
+.login-other ul li:nth-child(4){
+    background-color: #EA5D5C;
+}
+/* 底部区域 */
+.bottom-bar{
+    text-align: center;
+    color: #999;
+    font-size: 12px;
+}
+
+
+
+
+
+
+
 
 
 

+ 18 - 1
2_CSS/练习8_小米登录.html

@@ -7,6 +7,8 @@
     <title>Document</title>
     <!-- 引入css文件 rel="stylesheet" href为css文件路径 -->
     <link rel="stylesheet" href="./css/login.css">
+    <!-- 引入iconfont字体库 -->
+    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_5209207_75gnoupm8ng.css">
 </head>
 
 <body>
@@ -72,11 +74,26 @@
                 </div>
                 <!-- 其他登录方式 -->
                 <div class="login-other">
-
+                    <p>其他登录方式</p>
+                    <ul class="clearfix">
+                        <li>
+                            <i class="iconfont icon-qq"></i>
+                        </li>
+                        <li>
+                            <i class="iconfont icon-zhifubao"></i>
+                        </li>
+                        <li>
+                            <i class="iconfont icon-weibo"></i>
+                        </li>
+                        <li>
+                            <i class="iconfont icon-weixin"></i>
+                        </li>
+                    </ul>
                 </div>
             </div>
             <!-- 底部区域 -->
             <div class="bottom-bar">
+                小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号
             </div>
         </div>
 </body>