Home Explore Help
Sign In
lovecoding
/
web0715
10
0
Fork 0
Files Issues 0 Wiki
Browse Source

add

fengchuanyu 10 months ago
parent
23ee702e92
commit
11ced7b333
5 changed files with 87 additions and 3 deletions
Split View Show Diff Stats
  1. 45 0
      2_css/26_定位.html
  2. 21 0
      2_css/27_雪碧图.html
  3. BIN
      2_css/img/icon-slides.png
  4. BIN
      2_css/img/sliderbg.jpg
  5. 21 3
      2_css/练习17_垂直居中.html

+ 45 - 0
2_css/26_定位.html
View File 

@@ -0,0 +1,45 @@
 
+<!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>
 
+        .box1{
 
+            width: 600px;
 
+            height: 600px;
 
+            border:3px solid black;
 
+            margin: 50px;
 
+            position: absolute;
 
+            /* position: relative; */
 
+        }
 
+        .box2{
 
+            width: 400px;
 
+            height: 400px;
 
+            border:3px solid red;
 
+            margin:50px;
 
+        }
 
+        .box3{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: blue;
 
+            position: absolute;
 
+            top:0;
 
+            left: 0;
 
+        }
 
+        .box4{
 
+            height: 100px;
 
+            background-color: yellow;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box1">
 
+        <div class="box2">
 
+            <div class="box3"></div>
 
+        </div>
 
+    </div>
 
+
 
+    <div class="box4"></div>
 
+</body>
 
+</html>

+ 21 - 0
2_css/27_雪碧图.html
View File 

@@ -0,0 +1,21 @@
 
+<!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: 41px;
 
+            height: 69px;
 
+            border: 1px solid black;
 
+            background-image: url(./img/icon-slides.png);
 
+            background-repeat: no-repeat;
 
+            background-position:-42px 0;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

BIN
2_css/img/icon-slides.png
View File


BIN
2_css/img/sliderbg.jpg
View File


+ 21 - 3
2_css/练习17_垂直居中.html
View File 

@@ -11,11 +11,29 @@
 
             border:3px solid black;
 
             float: left;
 
         }
 
+        .box1{
 
+            text-align: center;
 
+            line-height: 400px;
 
+        }
 
         .box3{
 
             width: 100px;
 
             height: 100px;
 
             background-color: red;
 
         }
 
+        .box4{
 
+            margin-top: 150px;
 
+            margin-left: 150px;
 
+        }
 
+        .box6{
 
+            position: relative;    
+        }
 
+        .box5{
 
+            position: absolute;
 
+            left: 50%;
 
+            top: 50%;
 
+            margin-top: -50px;
 
+            margin-left: -50px;
 
+        }
 
     </style>
 
 </head>
 
 <body>
 
@@ -23,10 +41,10 @@
 
         <span>hello</span>
 
     </div>
 
     <div class="box2">
 
-        <div class="box3"></div>
 
+        <div class="box3 box4"></div>
 
     </div>
 
-    <div class="box2">
 
-        <div class="box3"></div>
 
+    <div class="box2 box6">
 
+        <div class="box3 box5"></div>
 
     </div>
 
 </body>
 
 </html>