e 1 年之前
父節點
當前提交
94a5c76ad7
共有 2 個文件被更改,包括 88 次插入0 次删除
  1. 43 0
      html/day3/html/6.边框.html
  2. 45 0
      html/day3/html/demo.html

+ 43 - 0
html/day3/html/6.边框.html

@@ -0,0 +1,43 @@
+<!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: 300px;
+            height: 500px;
+            border:10px solid green;
+            border-width:5px;
+            border-style:double;
+            border-color:red;
+            /* 
+                border: 复合属性 边框
+                粗细 
+                border-width
+                样式 
+                border-style
+                    solid 实线;dotted 点线; dashed 虚线;double 双边框
+                颜色
+                border-color
+                上边框 border-top
+                下边框 border-bottom
+                左边框 border-left
+                右边框 border-right
+            */
+            border-top:1px solid #00f;
+        }
+        p {
+            /* 首行缩进两字符 */
+            text-indent: 2em;
+        }
+    </style>
+</head>
+<body>
+    <div>
+        <h1>标题</h1>
+        <p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
+    </div>
+</body>
+</html>

+ 45 - 0
html/day3/html/demo.html

@@ -0,0 +1,45 @@
+<!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: 300px;
+            height: 100px;
+            background: #0f0;
+        }
+        .btn {
+            width: 300px;
+            height: 100px;
+            color: #00f;
+            text-align: center;
+            line-height: 100px;
+        }
+        .main {
+            opacity: 0;
+            /* display: none; */
+        }
+        .box:hover .main {
+            opacity: 1;
+            /* display: block; */
+        }
+    </style>
+</head>
+<body>
+    <!-- 
+        类选择器
+            写法:
+                在body里
+                开始标签中 class="xxx"
+                在style中
+                .xxx {样式....}
+
+     -->
+     <div class="box">
+        <p class="btn">我的标签</p>
+        <p class="main">具体内容</p>
+     </div>
+</body>
+</html>