Halaman utama Jelajahi Bantuan
Masuk
lovecoding
/
W260426
10
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

admin

fengchuanyu 1 Minggu lalu
induk
bd6fb23d9c
melakukan
53bfffa733
6 mengubah file dengan 101 tambahan dan 1 penghapusan
Tampilan Split Tampilkan Statistik Diff
  1. 4 0
      2_CSS/31_标签嵌套规则.html
  2. 5 1
      2_CSS/32_选择器权重值.html
  3. 36 0
      2_CSS/36_背景图片.html
  4. 37 0
      2_CSS/css/login.css
  5. TEMPAT SAMPAH
      2_CSS/img/banner.jpg
  6. 19 0
      2_CSS/练习8_小米登录.html

+ 4 - 0
2_CSS/31_标签嵌套规则.html
Tampilan Berkas 

@@ -26,5 +26,9 @@
 
     <span>
 
         <div>这是一个div元素</div>
 
     </span> -->
 
+
 
+    <!-- 标签嵌套规则：行块标签 img、input、select等 -->
 
+     <!--  不能嵌套块级元素。 -->
 
+
 
 </body>
 
 </html>

+ 5 - 1
2_CSS/32_选择器权重值.html
Tampilan Berkas 

@@ -7,7 +7,7 @@
 
     <style>
 
         /* css 权重值 */
 
         /* 可控范围越广选择器权重值越低 */
 
-        /* “*”通配符选择器 <  标签选择器 < 类选择器 < id选择器 < 行内(内联)样式 < !important */
 
+        /* “*”通配符选择器 0 <  标签选择器 1 < 类选择器 10 < id选择器 100 < 行内(内联)样式 1000 < !important 10000 */
 
         /* 如果权重值相同 则根据选择器的顺序来确定最终样式 */
 
         #div1{
 
             color: green;
 
@@ -34,9 +34,13 @@
 
         /* .p3{
 
             color: green;
 
         } */
 
+
 
+        /* 选择器权重值可以累加  */
 
+        /* 1 + 10 = 11 */
 
         div .p3{
 
             color: green;
 
         }
 
+        /* 10 */
 
         .p3{
 
             color: purple;
 
         }

+ 36 - 0
2_CSS/36_背景图片.html
Tampilan Berkas 

@@ -0,0 +1,36 @@
 
+<!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>
 
+        .box{
 
+            width: 200px;
 
+            height: 200px;
 
+            border:3px solid black;
 
+            /* 背景图片 */
 
+            /* 背景图片默认为图片的原始尺寸 */
 
+            /* 如果单个图片无法显示完整 可以使用背景图片的重复出现直到铺满元素 */
 
+            /* background-image: url("./img/qq.png"); */
 
+            background-image: url("./img/banner.jpg");
 
+            /* 背景重复  no-repeat 不重复 */
 
+            background-repeat: no-repeat;
 
+            /* 图片尺寸 */
 
+            /* 可以写数值 第一个参数为宽度 第二个参数为高度 */
 
+            /* 可以写百分比 第一个参数为宽度 第二个参数为高度 */
 
+            /* background-size: 100% 100%; */
 
+            /* cover  图片会等比例缩放 直到图片完全覆盖元素 但有可能出现图片不完整 */
 
+            /* contain  图片会等比例缩放 保证图片完整 直到图片完全显示在元素内 但有可能出现空白区域 */
 
+            background-size: cover;
 
+            /* 背景图片位置 */
 
+            /* 两个值 第一个参数为横向位置 第二个参数为纵向位置 */
 
+            /* left right top bottom center 以及数值 */
 
+            background-position: -20px -20px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

+ 37 - 0
2_CSS/css/login.css
Tampilan Berkas 

@@ -0,0 +1,37 @@
 
+/* css reset 重置样式 */
 
+body{
 
+    margin: 0;
 
+}
 
+ul{
 
+    padding: 0;
 
+    margin: 0;
 
+}
 
+li{
 
+    list-style: none;
 
+}
 
+
 
+/* 工具类 */
 
+.clearfix::after{
 
+    content: "";
 
+    display: block;
 
+    /* 清除所有方向的浮动 */
 
+    clear: both;
 
+}
 
+
 
+/* 左侧图片部分 */
 
+.left-img{
 
+    height: 100vh;
 
+    width:375px;
 
+    float: left;
 
+    /* ../ 表示返回上一级目录*/
 
+    background-image: url("../img/banner.jpg");
 
+    background-size: cover;
 
+    background-position: center center;
 
+}
 
+/* 登录页面主要功能部分 */
 
+.right-content{
 
+    height: 100vh;
 
+    width: calc(100vw - 375px);
 
+    background-color: #f5f5f5;
 
+    float: left;
 
+}

TEMPAT SAMPAH
2_CSS/img/banner.jpg
Tampilan Berkas


+ 19 - 0
2_CSS/练习8_小米登录.html
Tampilan Berkas 

@@ -0,0 +1,19 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <!-- 引入css文件 rel="stylesheet" href为css文件路径 -->
 
+    <link rel="stylesheet" href="./css/login.css"> 
+</head>
 
+<body>
 
+    <!-- 最外层容器 -->
 
+    <div class="container clearfix">
 
+        <!-- 登录页面左侧图片 -->
 
+        <div class="left-img"></div> 
+        <!-- 登录页面主要功能部分 -->
 
+        <div class="right-content"></div> 
+    </div>
 
+</body>
 
+</html>