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

add

fengchuanyu 8 months ago
parent
32751f26e3
commit
bc29495720
3 changed files with 177 additions and 0 deletions
Unified View Show Diff Stats
  1. 56 0
      6_css3/7_flex.html
  2. 85 0
      6_css3/练习题3_旋转立方体.html
  3. 36 0
      6_css3/练习题4_垂直水平居中.html

+ 56 - 0
6_css3/7_flex.html
View File 

@@ -0,0 +1,56 @@
 
+<!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>
 
+        body ul{
 
+            margin: 0;
 
+            padding: 0;
 
+            min-height: 100vh;
 
+        }
 
+        ul{
 
+            background-color: blue;
 
+            /* flex 控制内部元素的布局 */
 
+            display: flex;
 
+            /* flex-direction 调整当前flex元素主轴方向 */
 
+            /* flex-direction: row-reverse; */
 
+            /* flex-direction: column-reverse; */
 
+            /* flex-wrap 当内部的所有flex元素一行内容不下的时候换行 */
 
+            /* flex-flow 是 flex-direction flex-wrap 的缩写*/
 
+            /* flex-flow: row-reverse wrap; */
 
+
 
+            /* justify-content: flex-end; */
 
+            /* justify-content: space-around; */
 
+
 
+            /* flex-direction: row-reverse; */
 
+
 
+            /* align-items: stretch; */
 
+        }
 
+        li{
 
+            list-style: none;
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: orangered;
 
+            margin: 10px;
 
+            /* float: left; */
 
+            color: #fff;
 
+            text-align: center;
 
+            line-height: 100px;
 
+        }
 
+       
+    </style>
 
+</head>
 
+<body>
 
+    <!-- <a href="https://www.runoob.com/w3cnote/flex-grammar.html">flex 文档</a> -->
 
+    <ul>
 
+        <li>1</li>
 
+        <li>2</li>
 
+        <li>3</li>
 
+        <li>4</li>
 
+        <li>5</li>
 
+        <li>6</li>
 
+    </ul>
 
+</body>
 
+</html>

+ 85 - 0
6_css3/练习题3_旋转立方体.html
View File 

@@ -0,0 +1,85 @@
 
+<!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>
 
+        body{
 
+            margin: 0;
 
+            height: 100vh;
 
+            background-color: cornflowerblue;
 
+            /* overflow: hidden; */
 
+            perspective: 1000px;
 
+        }
 
+        .box{
 
+            width: 200px;
 
+            height: 200px;
 
+            border:1px dashed black;
 
+            position: fixed;
 
+            top: 50%;
 
+            left: 50%;
 
+            margin-top: -100px;
 
+            margin-left: -100px;
 
+            transform-style: preserve-3d;
 
+            /* transform: rotateY(30deg); */
 
+            animation-name: foo;
 
+            animation-duration: 2s;
 
+            animation-iteration-count: infinite;
 
+            animation-timing-function:linear;
 
+        }
 
+        @keyframes foo {
 
+            0%{
 
+                transform: rotateY(0deg);
 
+            }
 
+            100%{
 
+                transform: rotateY(360deg);
 
+            }
 
+        }
 
+        .box div{
 
+            width: 200px;
 
+            height: 200px;
 
+            position: absolute;
 
+            top:0;
 
+            left: 0;
 
+            background-size: 100% 100%;
 
+            opacity: 0.5;
 
+            border-radius: 15px;
 
+        }
 
+        .box .one{
 
+            background-image: url("./img/a.jpg");
 
+            transform: translateZ(100px);
 
+        }
 
+        .box .two{
 
+            background-image: url("./img/b.jpg");
 
+            transform: translateZ(-100px);
 
+        }
 
+        .box .three{
 
+            background-image: url("./img/c.jpg");
 
+            transform: rotateY(90deg) translateZ(100px);
 
+        }
 
+        .box .four{
 
+            background-image: url("./img/d.jpg");
 
+            transform: rotateY(90deg) translateZ(-100px);
 
+        }
 
+        .box .five{
 
+            background-image: url("./img/e.jpg");
 
+            transform: rotateX(90deg) translateZ(100px);
 
+        }
 
+        .box .six{
 
+            background-image: url("./img/f.jpg");
 
+            transform: rotateX(90deg) translateZ(-100px);
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="one"></div>
 
+        <div class="two"></div>
 
+        <div class="three"></div>
 
+        <div class="four"></div>
 
+        <div class="five"></div>
 
+        <div class="six"></div>
 
+    </div>
 
+</body>
 
+</html>

+ 36 - 0
6_css3/练习题4_垂直水平居中.html
View File 

@@ -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: 400px;
 
+            height: 400px;
 
+            border:1px dashed black;
 
+            float: left;
 
+            margin-left: 50px;
 
+            margin-top: 50px;
 
+        }
 
+        .div1{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+        }
 
+        span{
 
+            background-color: red;
 
+            color: #fff;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="div1"></div>
 
+    </div>
 
+
 
+    <div class="box">
 
+        <span>hello</span>
 
+    </div>
 
+</body>
 
+</html>