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

admin

fengchuanyu 9 hours ago
parent
bc4e219ef2
commit
5f445e9835
7 changed files with 211 additions and 0 deletions
Split View Show Diff Stats
  1. 19 0
      2_CSS/10_背景色.html
  2. 24 0
      2_CSS/11_边距方向.html
  3. 36 0
      2_CSS/12_css_reset.html
  4. 25 0
      2_CSS/13_组合使用_后代关系.html
  5. 35 0
      2_CSS/14_文字样式2.html
  6. 25 0
      2_CSS/15_控制边框方向.html
  7. 47 0
      2_CSS/练习3_盒子模型.html

+ 19 - 0
2_CSS/10_背景色.html
View File 

@@ -0,0 +1,19 @@
 
+<!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: 200px;
 
+            height: 200px;
 
+            /* 背景颜色 */
 
+            background-color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

+ 24 - 0
2_CSS/11_边距方向.html
View File 

@@ -0,0 +1,24 @@
 
+<!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: 200px;
 
+            height: 200px; 
+            background-color: red;
 
+            /* margin:40px 0 0 0; */
 
+            margin-top: 50px;
 
+            margin-left: 50px;
 
+            margin-right: 50px;
 
+            margin-bottom: 50px;
 
+            /* padding 也可以设置方向 */
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

+ 36 - 0
2_CSS/12_css_reset.html
View File 

@@ -0,0 +1,36 @@
 
+<!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>
 
+        /* css reset 样式重置 */
 
+        /* p{
 
+            margin: 0;
 
+        }
 
+        ul{
 
+            margin: 0;
 
+            padding: 0;
 
+        } */
 
+        li{
 
+            list-style: none;
 
+        }
 
+
 
+        /* 简便写法 * 选择器 */
 
+        /* * 选择器 * 选择器可以选中所有标签 */
 
+        *{
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <p>这是一个段落</p>
 
+    <ul>
 
+        <li>列表项 1</li>
 
+        <li>列表项 2</li>
 
+        <li>列表项 3</li>
 
+    </ul>
 
+</body>
 
+</html>

+ 25 - 0
2_CSS/13_组合使用_后代关系.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>
 
+        /* 后代关系 */
 
+        /* 多个选择器并排使用且中间以空格隔开 表示祖先后代关系 前面的是祖先 后面的是后代 */
 
+        .box .box2{
 
+            color: red;
 
+        }
 
+        body .box .box3{
 
+            color: blue;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="box2">hello</div>
 
+        <div class="box3">你好</div>
 
+    </div>
 
+    <div class="box2"> world</div>
 
+</body>
 
+</html>

+ 35 - 0
2_CSS/14_文字样式2.html
View File 

@@ -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>
 
+        span{
 
+            color: red;
 
+        }
 
+        p{
 
+            width: 200px;
 
+            /* 字间距 */
 
+            letter-spacing: 10px;
 
+            background-color: gray;
 
+            /* 文本缩进 */
 
+            text-indent: 40px;
 
+        }
 
+        div{
 
+            width: 200px;
 
+            height: 200px;
 
+            border:1px solid black;
 
+            text-align: center;
 
+            /* 行高 */
 
+            /* 文本会在所在行高内垂直居中 */
 
+            /* 如果实现单行文本垂直居中 只需要设置行高等于高度即可 */
 
+            line-height: 100px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <p>这是<span>一个</span>段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
 
+    <div>这是一个div元素</div>
 
+</body>
 
+</html>

+ 25 - 0
2_CSS/15_控制边框方向.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>
 
+        .box{
 
+            /* border:1px solid black; */
 
+            /* 控制边框方向 */
 
+            /* top 上边框 */
 
+            /* right 右边框 */
 
+            /* bottom 下边框 */
 
+            /* left 左边框 */
 
+            /* border-top: 1px solid red;
 
+            border-right: 1px solid red; */
 
+            border-bottom: 1px solid red;
 
+            /* border-left: 1px solid red; */
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">hello world</div>
 
+</body>
 
+</html>

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

@@ -0,0 +1,47 @@
 
+<!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;
 
+            border:3px solid blue;
 
+            padding:0 40px;
 
+            /* auto 属性只能用于margin */
 
+            margin: 0 auto;
 
+            border-radius: 20px;
 
+        }
 
+        img{
 
+            width: 400px;
 
+            border-radius: 20px;
 
+        }
 
+        li{
 
+            /* 没有设置宽度的情况下，列表项的宽度就是父标签的宽度 */
 
+            /* 列表项前的符号 none 不显示 */
 
+            list-style: none;
 
+            background-color: gray;
 
+            margin:10px 0;
 
+            border-radius: 20px;
 
+            padding:15px 10px;
 
+        }
 
+        ul{
 
+            padding-left: 0;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <h1>盒子模型</h1>
 
+        <img src="./img/img1.jpg" alt="图片">
 
+        <p>这是盒子 1 中的详细描述。这里可能包含更多的文字内容，以展示内边距的效果。</p>
 
+        <ul>
 
+            <li>列表项 1</li>
 
+            <li>列表项 2</li>
 
+            <li>列表项 3</li>
 
+        </ul>
 
+    </div>
 
+</body>
 
+</html>