Trang chủ Khám phá Trợ giúp
Đăng nhập
lovecoding
/
W250913
10
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu kéo về 0 Wiki
Browse Source

admin

fengchuanyu 4 giờ trước cách đây
mục cha
24a774f7a2
commit
95e8a5b4c9
9 tập tin đã thay đổi với 212 bổ sung và 0 xóa
View chưa được định nghĩa Hiển thị tình trạng sai khác
  1. 85 0
      5_CSS3/7_flex.html
  2. BIN
      5_CSS3/img/a.jpg
  3. BIN
      5_CSS3/img/b.jpg
  4. BIN
      5_CSS3/img/c.jpg
  5. BIN
      5_CSS3/img/d.jpg
  6. BIN
      5_CSS3/img/e.jpg
  7. BIN
      5_CSS3/img/f.jpg
  8. 92 0
      5_CSS3/练习3_旋转立方体.html
  9. 35 0
      5_CSS3/练习4_骰子.html

+ 85 - 0
5_CSS3/7_flex.html
Xem Tập Tin 

@@ -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>
 
+        .box{
 
+            width: 100%;
 
+            /* height: 600px; */
 
+            border:2px dashed black;
 
+            padding:20px;
 
+            box-sizing: border-box;
 
+            /* flex 弹性盒子 flex布局  内部元素默认为横向排列（主轴依次排列）*/
 
+            /* flex 有两个轴 主轴（默认情况下横向） 交叉轴（默认为纵向） */
 
+            display: flex;
 
+            /* flex-direction 改变flex 主轴的方向 column改为纵向 */
 
+            /* flex-direction: column; */
 
+            /* flex-direction: row-reverse; */
 
+            /* flex-direction: column-reverse; */
 
+            /* justify-content 控制flex元素在主轴上的排列方式 space-between两端对齐 space-around分散对齐 flex-start主轴的开始位置依次排列 flex-end在结束位置依次排列 center居中展示*/
 
+            /* justify-content: center; */
 
+            /* align-items 控制flex元素在交叉轴上的排列方式 */
 
+            /* align-items: center; */
 
+
 
+            /* flex中如果内部元素所在行容纳不下所有元素那么会对内部flex元素进行压缩 */
 
+            /* flex-wrap 控制flex元素是否换行展示 默认为nowrap不换行 wrap换航*/
 
+            /* flex-wrap: wrap; */
 
+            /* align-content 当flex元素换行后产生多个轴的时候布局方式 属性值等同于 justify-content*/
 
+            /* align-content: space-between; */
 
+            
+        }
 
+        .box .box1{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: blue;
 
+            color: white;
 
+            font-size: 50px;
 
+            text-align: center;
 
+            line-height: 200px;
 
+            font-weight: bold;
 
+            margin-left: 5px;
 
+            margin-top: 5px;
 
+            /* float: left; */
 
+            /* flex-grow 放大flex元素 后边的值表示放大比例 相当于把所在空间的剩余位置按照比例划分 */
 
+            /* flex-grow: 1; */
 
+            /* flex-shrink: 1; */
 
+        }
 
+        .box1:nth-child(3){
 
+            /* flex-grow: 4; */
 
+        }
 
+        .box1:nth-child(4){
 
+            /* flex-grow: 1; */
 
+            /* flex:1; */
 
+        }
 
+        .box1:nth-child(6){
 
+            /* flex-shrink 缩小比例 如果元素一行容纳不下flex元素会相应缩小默认都是等比例 也可以flex-shrink设置某一个元素的缩小比例*/
 
+            /* flex-shrink: 2; */
 
+        }
 
+        .box1:nth-child(5){
 
+            /* align-self 可以单独设置某一个flex元素的对齐方式 flex-end flex-start center */
 
+            /* align-self: flex-end; */
 
+        }
 
+        .box1:nth-child(8){
 
+            /*order 可以控制flex元素的排列顺序 值越小越靠前越大越靠后  */
 
+            /* order: -1; */
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="box1">1</div>
 
+        <div class="box1">2</div>
 
+        <div class="box1">3</div>
 
+        <div class="box1">4</div>
 
+        <div class="box1">5</div>
 
+        <!-- <div class="box1">6</div>
 
+        <div class="box1">7</div>
 
+        <div class="box1">8</div>
 
+        <div class="box1">9</div>
 
+        <div class="box1">10</div>
 
+        <div class="box1">11</div> -->
 
+    </div>
 
+</body>
 
+</html>

BIN
5_CSS3/img/a.jpg
Xem Tập Tin


BIN
5_CSS3/img/b.jpg
Xem Tập Tin


BIN
5_CSS3/img/c.jpg
Xem Tập Tin


BIN
5_CSS3/img/d.jpg
Xem Tập Tin


BIN
5_CSS3/img/e.jpg
Xem Tập Tin


BIN
5_CSS3/img/f.jpg
Xem Tập Tin


+ 92 - 0
5_CSS3/练习3_旋转立方体.html
Xem Tập Tin 

@@ -0,0 +1,92 @@
 
+<!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>
 
+        *{
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+        body{
 
+            background-color: cornflowerblue;
 
+            perspective: 1000px;
 
+            /* 设置body高度为视口高度 */
 
+            height: 100vh;
 
+        }
 
+        .box{
 
+            width: 200px;
 
+            height: 200px;
 
+            border:2px dashed black;
 
+            position: fixed;
 
+            top: 50%;
 
+            left: 50%;
 
+            /* transform: translate(-50%,-50%); */
 
+            margin-top: -100px;
 
+            margin-left: -100px;
 
+            transform-style: preserve-3d;
 
+            animation: run 5s linear infinite;
 
+        }
 
+        @keyframes run {
 
+            from{
 
+                transform: rotateY(0);
 
+            }
 
+            to{
 
+                transform: rotateY(360deg);
 
+            }
 
+        }
 
+        .box img{
 
+            width: 200px;
 
+            height: 200px;
 
+            display: block;
 
+        }
 
+        .box div{
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+            opacity: 0.5;
 
+        }
 
+        .img-one{
 
+            transform: translateZ(100px);
 
+        }
 
+        .img-two{
 
+            transform: translateZ(-100px);
 
+        }
 
+        .img-three{
 
+            transform: rotateY(90deg) translateZ(100px);
 
+        }
 
+        .img-four{
 
+            transform: rotateY(-90deg) translateZ(100px);
 
+        }
 
+        .img-five{
 
+            transform: rotateX(90deg) translateZ(100px);
 
+        }
 
+        .img-six{
 
+            transform: rotateX(-90deg) translateZ(100px);
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="img-one">
 
+            <img src="./img/a.jpg" alt="a">
 
+        </div>
 
+        <div class="img-two">
 
+            <img src="./img/b.jpg" alt="a">
 
+        </div>
 
+        <div class="img-three">
 
+            <img src="./img/c.jpg" alt="a">
 
+        </div>
 
+        <div class="img-four">
 
+            <img src="./img/d.jpg" alt="a">
 
+        </div>
 
+        <div class="img-five">
 
+            <img src="./img/e.jpg" alt="a">
 
+        </div>
 
+        <div class="img-six">
 
+            <img src="./img/f.jpg" alt="a">
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 35 - 0
5_CSS3/练习4_骰子.html
Xem Tập Tin 

@@ -0,0 +1,35 @@
 
+<!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>
 
+        .face {
 
+            float: left;
 
+            margin: 16px;
 
+            padding: 4px;
 
+            background-color: #e7e7e7;
 
+            width: 104px;
 
+            height: 104px;
 
+            box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
 
+            border-radius: 10%;
 
+        }
 
+
 
+        .face span {
 
+            display: block;
 
+            width: 24px;
 
+            height: 24px;
 
+            border-radius: 50%;
 
+            margin: 4px;
 
+            background-color: #333;
 
+            box-shadow: inset 0 3px #111, inset 0 -3px #555;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="face face1">
 
+        <span></span>
 
+    </div>
 
+</body>
 
+</html>