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

admin

fengchuanyu 2 weeks ago
parent
94392a95c1
commit
e7812f9602
5 changed files with 120 additions and 0 deletions
Split View Show Diff Stats
  1. 27 0
      2_CSS/12_方向属性.html
  2. 30 0
      2_CSS/13_盒子模型2.html
  3. 25 0
      2_CSS/14_省略号效果.html
  4. 0 0
      2_CSS/练习2_盒子模型.html
  5. 38 0
      2_CSS/练习3_行块元素.html

+ 27 - 0
2_CSS/12_方向属性.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>
 
+        div{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            /* 下外边距 */
 
+            margin-bottom: 20px;
 
+            /* 上外边距 */
 
+            /* margin-top: 20px; */
 
+            /* 左外边距 */
 
+            /* margin-left: 20px; */
 
+            /* 右外边距 */
 
+            /* margin-right: 20px; */
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div>hello</div>
 
+    <div>world</div>
 
+</body>
 
+</html>

+ 30 - 0
2_CSS/13_盒子模型2.html
View File 

@@ -0,0 +1,30 @@
 
+<!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>
 
+        /* 正常情况下 给一个元素加上padding 和 border 会导致元素的宽度和高度增加 */
 
+        /* div{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: red;
 
+            padding: 20px;
 
+        } */
 
+
 
+        div{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: red;
 
+            padding: 20px;
 
+            box-sizing: border-box;
 
+        }
 
+
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    <div>hello world</div>
 
+</body>
 
+</html>

+ 25 - 0
2_CSS/14_省略号效果.html
View File 

@@ -0,0 +1,25 @@
 
+<!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>
 
+        div{
 
+            width: 190px;
 
+            height: 190px;
 
+            border: 1px solid black;
 
+            /* 超出部分省略号显示 */
 
+            /* 文字不换行 */
 
+            white-space: nowrap;
 
+            /* 超出部分隐藏 */
 
+            overflow: hidden;
 
+            /* 文字超出部分省略号显示 */
 
+            text-overflow: ellipsis;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div>可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。</div>
 
+</body>
 
+</html>

+ 0 - 0
2_CSS/练习2盒子模型.html → 2_CSS/练习2_盒子模型.html
View File


+ 38 - 0
2_CSS/练习3_行块元素.html
View File 

@@ -0,0 +1,38 @@
 
+<!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{
 
+            border:3px solid black;
 
+            padding: 20px;
 
+            margin: 20px 0 20px 0;
 
+        }
 
+        img{
 
+            width: 400px;
 
+        }
 
+        span{
 
+            background-color: gray;
 
+            /* margin: 10px; */
 
+            margin:0 10px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <h1>欢迎来到我的简单网页</h1>
 
+    <div class="box">
 
+        <img src="./img/img1.jpg" alt="img">
 
+        <p>这是一幅美丽的风景图片，让人心旷神怡。</p>
 
+    </div>
 
+    <span>这是一个行内元素示例 1 。</span>
 
+    <span>这是一个行内元素示例 2 。</span>
 
+    <div class="box">
 
+        <img src="./img/img1.jpg" alt="img">
 
+        <p>这这是一只可爱的动物，十分惹人喜爱。</p>
 
+    </div>
 
+    <span>这是一个行内元素示例 3 。</span>
 
+    <span>这是一个行内元素示例 4 。</span>
 
+</body>
 
+</html>