Главная Обзор Помощь
Вход
lovecoding
/
W260426
10
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

admin

fengchuanyu 5 часов назад
Родитель
fa558dd533
Сommit
79d2ec37bc
3 измененных файлов с 124 добавлено и 2 удалено
Единый вид Показать статистику Diff
  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;
 
     width: 450px;
 
     background-color: #fff;
 
     background-color: #fff;
 
     box-shadow:0 0 10px #aaa;
 
     box-shadow:0 0 10px #aaa;
 
-    margin: 100px auto;
 
+    margin: 30px auto;
 
     padding: 40px 45px;
 
     padding: 40px 45px;
 
     box-sizing: border-box;
 
     box-sizing: border-box;
 
 }
 
 }
 
@@ -177,6 +177,58 @@ li{
 
 .login-box .text-btn span:last-child{
 
 .login-box .text-btn span:last-child{
 
     float: right;
 
     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>
 
     <title>Document</title>
 
     <!-- 引入css文件 rel="stylesheet" href为css文件路径 -->
 
     <!-- 引入css文件 rel="stylesheet" href为css文件路径 -->
 
     <link rel="stylesheet" href="./css/login.css">
 
     <link rel="stylesheet" href="./css/login.css">
 
+    <!-- 引入iconfont字体库 -->
 
+    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_5209207_75gnoupm8ng.css">
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
@@ -72,11 +74,26 @@
 
                 </div>
 
                 </div>
 
                 <!-- 其他登录方式 -->
 
                 <!-- 其他登录方式 -->
 
                 <div class="login-other">
 
                 <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>
 
             </div>
 
             <!-- 底部区域 -->
 
             <!-- 底部区域 -->
 
             <div class="bottom-bar">
 
             <div class="bottom-bar">
 
+                小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
 </body>
 
 </body>