首頁 探索 說明
登入
lovecoding
/
web0715
10
0
複刻 0
檔案 問題管理 0 Wiki
瀏覽代碼

add

fengchuanyu 8 月之前
父節點
d74d5d3f72
當前提交
c41967c949
共有 4 個文件被更改，包括 254 次插入 和 0 次删除
分割檢視 顯示文件統計
  1. 11 0
      2_css/练习1_正方形.html
  2. 51 0
      8_移动端/7_事件.html
  3. 95 0
      8_移动端/练习题5_响应式布局-图片优化.html
  4. 97 0
      8_移动端/练习题5_响应式布局.html

+ 11 - 0
2_css/练习1_正方形.html
查看文件 

@@ -24,11 +24,22 @@
 
             display: block;
 
             padding-bottom: 100%;
 
         }
 
+        .box4{
 
+            width: 100px;
 
+            background-color: green;
 
+            
+        }
 
+        .box4::after{
 
+            content: "";
 
+            display: block;
 
+            padding-bottom: 100%;
 
+        }
 
     </style>
 
 </head>
 
 <body>
 
     <div class="box"></div>
 
     <div class="box2"></div>
 
     <div class="box3"></div>
 
+    <div class="box4"></div>
 
 </body>
 
 </html>

+ 51 - 0
8_移动端/7_事件.html
查看文件 

@@ -0,0 +1,51 @@
 
+<!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;
 
+            background-color: red;
 
+            position: absolute;
 
+            top:0;
 
+            left: 0;
 
+        }
 
+        .div1{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: blue;
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+            z-index: 1;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="div1"></div>
 
+    <div class="box"></div>
 
+    <script>
 
+        let oBox = document.querySelector(".box");
 
+        let oDiv = document.querySelector(".div1");
 
+
 
+        oBox.onclick = function(){
 
+            console.log("click");
 
+        }
 
+        // oDiv.ontouchstart = function(){
 
+        //     console.log("ontouchstart")
 
+        // }
 
+        // oDiv.ontouchmove = function(){
 
+        //     console.log("ontouchmove");
 
+        // }
 
+        // oDiv.ontouchend = function(){
 
+        //     console.log("ontouchend");
 
+        // }
 
+        oDiv.ontouchstart = function(){
 
+            console.log("ontouchstart");
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 95 - 0
8_移动端/练习题5_响应式布局-图片优化.html
查看文件 

@@ -0,0 +1,95 @@
 
+<!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;
 
+        }
 
+        figure{
 
+            margin: 0;
 
+        }
 
+        
+        
+        .container{
 
+            max-width: 980px;
 
+            margin: 0 auto;
 
+        }
 
+        header,nav,footer{
 
+            height: 50px;
 
+            background-color:#ccc;
 
+            font-size: 20px;
 
+            text-align: center;
 
+            line-height: 50px;
 
+            font-weight: bolder;
 
+            margin-bottom: 20px;
 
+        }
 
+        figure .bg-img{
 
+            background-image: url("./img/1.jpg");
 
+            background-size: contain;
 
+            background-repeat: no-repeat;
 
+            width: 100%;
 
+            padding-bottom: 56%;
 
+        }
 
+       
+        .content{
 
+            display: flex;
 
+            justify-content: space-between;
 
+            margin: 20px 0;
 
+        }
 
+        .content article{
 
+            background-color: chocolate;
 
+            /* flex-grow:3; */
 
+            width: 60%;
 
+        }
 
+        .content aside{
 
+            background-color: palegreen;
 
+            width: 38%;
 
+            /* flex-grow: 1; */
 
+        }
 
+        @media screen and (min-width:480px) and (max-width:960px) {
 
+            .container figure .bg-img{
 
+                background-image: url("./img/2.jpg");
 
+            }
 
+           
+        }
 
+        @media screen and (max-width:480px) {
 
+            .container figure .bg-img{
 
+                background-image: url("./img/3.jpg");
 
+            }
 
+            
+            .content{
 
+                /* display: block; */
 
+                flex-direction: column;
 
+            }
 
+            .content article,.content aside{
 
+                width: 100%;
 
+                margin-top: 20px;
 
+            }
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="container">
 
+        <header>页头</header>
 
+        <nav>导航</nav>
 
+        <figure>
 
+            <div class="bg-img"></div>
 
+            <!-- <img src="./img/1.jpg" alt="img">
 
+            <img src="./img/2.jpg" alt="img">
 
+            <img src="./img/3.jpg" alt="img"> -->
 
+        </figure>
 
+        <div class="content">
 
+            <article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem erat, egestas quis luctus ut, rhoncus vitae risus. Integer venenatis libero sit amet sapien dictum, quis bibendum mi volutpat. Cras pretium quam quis magna facilisis, eget feugiat nisi lacinia.</article>
 
+            <aside>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem erat, egestas quis luctus ut, rhoncus vitae risus. Integer venenatis libero sit amet sapien dictum, quis bibendum mi volutpat. Cras pretium quam quis magna facilisis, eget feugiat nisi lacinia.</aside>
 
+        </div>
 
+        <footer>页脚</footer>
 
+    </div>
 
+
 
+</body>
 
+
 
+</html>

+ 97 - 0
8_移动端/练习题5_响应式布局.html
查看文件 

@@ -0,0 +1,97 @@
 
+<!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;
 
+        }
 
+        figure{
 
+            margin: 0;
 
+        }
 
+        
+        
+        .container{
 
+            max-width: 980px;
 
+            margin: 0 auto;
 
+        }
 
+        header,nav,footer{
 
+            height: 50px;
 
+            background-color:#ccc;
 
+            font-size: 20px;
 
+            text-align: center;
 
+            line-height: 50px;
 
+            font-weight: bolder;
 
+            margin-bottom: 20px;
 
+        }
 
+        figure img{
 
+            width: 100%;
 
+            display: none;
 
+        }
 
+        figure img:first-child{
 
+            display: block;
 
+        }
 
+        .content{
 
+            display: flex;
 
+            justify-content: space-between;
 
+            margin: 20px 0;
 
+        }
 
+        .content article{
 
+            background-color: chocolate;
 
+            /* flex-grow:3; */
 
+            width: 60%;
 
+        }
 
+        .content aside{
 
+            background-color: palegreen;
 
+            width: 38%;
 
+            /* flex-grow: 1; */
 
+        }
 
+        @media screen and (min-width:480px) and (max-width:960px) {
 
+            .container figure img{
 
+                display: none;
 
+            }
 
+            .container figure img:nth-child(2){
 
+                display: block;
 
+            }
 
+        }
 
+        @media screen and (max-width:480px) {
 
+            .container figure img{
 
+                display: none;
 
+            }
 
+            .container figure img:nth-child(3){
 
+                display: block;
 
+            }
 
+            .content{
 
+                /* display: block; */
 
+                flex-direction: column;
 
+            }
 
+            .content article,.content aside{
 
+                width: 100%;
 
+                margin-top: 20px;
 
+            }
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="container">
 
+        <header>页头</header>
 
+        <nav>导航</nav>
 
+        <figure>
 
+            <img src="./img/1.jpg" alt="img">
 
+            <img src="./img/2.jpg" alt="img">
 
+            <img src="./img/3.jpg" alt="img">
 
+        </figure>
 
+        <div class="content">
 
+            <article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem erat, egestas quis luctus ut, rhoncus vitae risus. Integer venenatis libero sit amet sapien dictum, quis bibendum mi volutpat. Cras pretium quam quis magna facilisis, eget feugiat nisi lacinia.</article>
 
+            <aside>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sem erat, egestas quis luctus ut, rhoncus vitae risus. Integer venenatis libero sit amet sapien dictum, quis bibendum mi volutpat. Cras pretium quam quis magna facilisis, eget feugiat nisi lacinia.</aside>
 
+        </div>
 
+        <footer>页脚</footer>
 
+    </div>
 
+
 
+</body>
 
+
 
+</html>