Home Explore Help
Sign In
lovecoding
/
Web1020
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

admin

fengchuanyu 2 months ago
parent
bfd4f9ebfa
commit
4a3e72d4c3
2 changed files with 189 additions and 0 deletions
Unified View Show Diff Stats
  1. 99 0
      10_移动端/练习4_响应式布局.html
  2. 90 0
      10_移动端/练习5_响应式布局等比缩放.html

+ 99 - 0
10_移动端/练习4_响应式布局.html
View File 

@@ -0,0 +1,99 @@
 
+<!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;
 
+            margin-top: 20px;
 
+        }
 
+
 
+        .container{
 
+            max-width: 980px;
 
+            margin: 0 auto;
 
+        }
 
+        header,nav,footer{
 
+            background-color: #ccc;
 
+            height: 50px;
 
+            font-size: 30px;
 
+            font-weight: bolder;
 
+            color: #111;
 
+            text-align: center;
 
+            line-height: 50px;
 
+            margin-top: 20px;
 
+        }
 
+        figure{
 
+            width: 100%;
 
+        }
 
+        
+        figure img{
 
+            width: 100%;
 
+            display: none;
 
+        }
 
+        figure img:first-child{
 
+            display: block;
 
+        }
 
+        .info-content{
 
+            display: flex;
 
+            margin-top: 20px;
 
+        }
 
+        .info-content article{
 
+            background-color: orange;
 
+            margin-right: 20px;
 
+            width: 70%;
 
+        }
 
+        .info-content aside{
 
+            background-color: green;
 
+            width: 30%;
 
+        }
 
+
 
+        @media screen and (max-width:980px){
 
+            .container figure img{
 
+                display: none;
 
+            }
 
+            figure img:nth-child(2){
 
+                display: block;
 
+            }
 
+        }
 
+        @media screen and (max-width:480px){
 
+            .container figure img{
 
+                display: none;
 
+            }
 
+            figure img:nth-child(3){
 
+                display: block;
 
+            }
 
+            .info-content{
 
+                flex-direction: column;
 
+            }
 
+            .info-content article{
 
+                width: 100%;
 
+            }
 
+            .info-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="info-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>

+ 90 - 0
10_移动端/练习5_响应式布局等比缩放.html
View File 

@@ -0,0 +1,90 @@
 
+<!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;
 
+            margin-top: 20px;
 
+        }
 
+
 
+        .container{
 
+            max-width: 980px;
 
+            margin: 0 auto;
 
+        }
 
+        header,nav,footer{
 
+            background-color: #ccc;
 
+            height: 50px;
 
+            font-size: 30px;
 
+            font-weight: bolder;
 
+            color: #111;
 
+            text-align: center;
 
+            line-height: 50px;
 
+            margin-top: 20px;
 
+        }
 
+        figure{
 
+            width: 100%;
 
+        }
 
+        
+        figure .bgi{
 
+            width: 100%;
 
+            padding-top: 56%;
 
+            background-image: url(./img/1.jpg);
 
+            background-size: 100% 100%;
 
+        }
 
+        .info-content{
 
+            display: flex;
 
+            margin-top: 20px;
 
+        }
 
+        .info-content article{
 
+            background-color: orange;
 
+            margin-right: 20px;
 
+            width: 70%;
 
+        }
 
+        .info-content aside{
 
+            background-color: green;
 
+            width: 30%;
 
+        }
 
+
 
+        @media screen and (max-width:980px){
 
+            figure .bgi{
 
+                background-image: url(./img/2.jpg);
 
+            }
 
+        }
 
+        @media screen and (max-width:480px){
 
+            figure .bgi{
 
+                background-image: url(./img/3.jpg);
 
+            }
 
+            .info-content{
 
+                flex-direction: column;
 
+            }
 
+            .info-content article{
 
+                width: 100%;
 
+            }
 
+            .info-content aside{
 
+                width: 100%;
 
+                margin-top: 20px;
 
+            }
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <header>页头</header>
 
+        <nav>导航</nav>
 
+        <figure>
 
+            <div class="bgi"></div>
 
+        </figure>
 
+        <div class="info-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>