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

admin

fengchuanyu 2 weeks ago
parent
d18c0b9ee9
commit
ba4e3cca0e
5 changed files with 176 additions and 0 deletions
Unified View Show Diff Stats
  1. 2 0
      2-CSS/复习/定位3.html
  2. 27 0
      2-CSS/综合练习1.html
  3. 29 0
      2-CSS/综合练习题1.html
  4. 41 0
      2-CSS/综合练习题2.html
  5. 77 0
      2-CSS/综合练习题3.html

+ 2 - 0
2-CSS/复习/定位3.html
View File 

@@ -29,6 +29,8 @@
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
+
 
+    
     <div class="box">
 
     <div class="box">
 
         <div class="div1"></div>
 
         <div class="div1"></div>
 
     </div>
 
     </div>

+ 27 - 0
2-CSS/综合练习1.html
View File 

@@ -0,0 +1,27 @@
 
+<!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>
 
+        span{
 
+            font-style: italic;
 
+            /* border:1px solid red; */
 
+            border-width: 1px;
 
+            border-style: solid;
 
+            border-color: red;
 
+            font-family: "Arial, sans-serif";
 
+        }
 
+        i{
 
+            /* display: none; */
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <i>hello world 你好世界</i>
 
+    <span>hello world 你好世界</span>
 
+    <hr>
 
+    <img src="./image/logo.png" width="200px" height="400px" alt="">
 
+</body>
 
+</html>

+ 29 - 0
2-CSS/综合练习题1.html
View File 

@@ -0,0 +1,29 @@
 
+<!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>
 
+        img{
 
+            width: 200px;
 
+        }
 
+        p{
 
+            color: blue;
 
+        }
 
+        .box{
 
+            text-align: center;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="box">
 
+        <h1>标题</h1>
 
+        <p>段落</p>
 
+        <img src="./image/logo.png" alt="">
 
+    </div>
 
+</body>
 
+
 
+</html>

+ 41 - 0
2-CSS/综合练习题2.html
View File 

@@ -0,0 +1,41 @@
 
+<!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>
 
+        table{
 
+            border: 1px solid black;
 
+            /* 去掉单元格之间的空隙 */
 
+            border-collapse: collapse;
 
+            margin: 0 auto;
 
+        }
 
+        td{
 
+            border: 1px solid black;
 
+            width: 100px;
 
+            height: 50px;
 
+            text-align: center ;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <table>
 
+        <tr>
 
+            <td>1</td>
 
+            <td>2</td>
 
+            <td>3</td>
 
+        </tr>
 
+        <tr>
 
+            <td>4</td>
 
+            <td>5</td>
 
+            <td>6</td>
 
+        </tr>
 
+        <tr>
 
+            <td>7</td>
 
+            <td>8</td>
 
+            <td>9</td>
 
+        </tr>
 
+    </table>
 
+</body>
 
+</html>

+ 77 - 0
2-CSS/综合练习题3.html
View File 

@@ -0,0 +1,77 @@
 
+<!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>
 
+        .header{
 
+            text-align: center;
 
+            background-color: #ccc;
 
+            height: 100px;
 
+            line-height: 100px;
 
+        }
 
+        .nav{
 
+            text-align: center;
 
+            background-color: #ccc;
 
+            height: 50px;
 
+            line-height: 50px;
 
+            margin-top: 10px;
 
+        }
 
+
 
+        .left,.center,.right{
 
+            height: 300px;
 
+            /* background-color: #ccc; */
 
+            text-align: center;
 
+            line-height: 300px;
 
+            float: left;
 
+        }
 
+        .content{
 
+            margin-top: 10px;
 
+        }
 
+        .content::after{
 
+            content: "";
 
+            display: block;
 
+            clear: both;
 
+        }
 
+        .content .left{
 
+            width: 20%;
 
+            background-color: #ccc;
 
+        }
 
+        .content .center{
 
+            width: 60%;
 
+        }
 
+        .content .center-box{
 
+            background-color: #ccc;
 
+            margin:0 10px;
 
+        }
 
+        .content .right{
 
+            width: 20%;
 
+            background-color: #ccc;
 
+        }
 
+        .footer{
 
+            background-color: #ccc;
 
+            text-align: center;
 
+            height: 100px;
 
+            line-height: 100px;
 
+            margin-top: 10px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <div class="header">头部区域</div>
 
+        <div class="nav">菜单导航区域</div>
 
+        <div class="content">
 
+            <div class="left">左侧内容</div>
 
+            <div class="center">
 
+                <div class="center-box">
 
+                    中间区域
 
+                </div>
 
+            </div>
 
+            <div class="right">右侧内容</div>
 
+        </div>
 
+        <div class="footer">底部区域</div>
 
+    </div>
 
+</body>
 
+</html>