1 年之前 · 44525a41a0
--- a/day3/html/5.选择器.html
+++ b/day3/html/5.选择器.html
@@ -146,9 +146,35 @@
 
				         h1~h6 {
			
 
				             color: #0f0;
			
 
				         }
			
 
				+        /* 
			
 
				+            伪元素选择器
			
 
				+            ::after {content:""}
			
 
				+            ::before {content:""}
			
 
				+          面试题：:before与::before区别
			
 
				+          实际意义上没有太大的区别 
			
 
				+          只是写法不同
			
 
				+          :是css2中的写法
			
 
				+          ::是css3中的写法
			
 
				+         */
			
 
				+        .word::after {
			
 
				+            content: '今天';
			
 
				+            color: #00f;
			
 
				+            font-weight: lighter;
			
 
				+        }
			
 
				+        .word:before {
			
 
				+            content: "1111";
			
 
				+        }
			
 
				+        /* 通配符选择器：匹配全局 */
			
 
				+        * { 
			
 
				+            /* 去除无序列表的默认样式 */
			
 
				+            list-style: none;
			
 
				+            /* 去除a标签的默认样式 */
			
 
				+            text-decoration: none;
			
 
				+        }
			
 
				     </style>
			
 
				 </head>
			
 
				 <body>
			
 
				+    <p class="word">一段文字</p>
			
 
				     <a href="">q我问问</a>
			
 
				     <a href="">q我问问</a>
			
 
				     <a href="">q我问问</a>
			
@@ -190,5 +216,6 @@
 
				     <h4>h4</h4>
			
 
				     <h5>h5</h5>
			
 
				     <h6>h6</h6>
			
 
				+    
			
 
				 </body>
			
 
				 </html>
			
--- a/day3/html/6.选择器优先级.html
+++ b/day3/html/6.选择器优先级.html
@@ -0,0 +1,26 @@
 
				+<!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>
			
 
				+        p {
			
 
				+            color: #f00;
			
 
				+            color: #00f;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 
			
 
				+        选择器的优先级及其权重
			
 
				+        !important > 行内样式（内联样式）> id选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 伪元素选择器 = 标签选择器 > 通配符选择器
			
 
				+    权重： 正无穷       1,0,0,0            0,1,0,0               0,0,1,0                    0,0,0,1              0,0,0,0
			
 
				+     -->
			
 
				+     <p style="color: #0f0;">1234</p>
			
 
				+     <!-- 
			
 
				+        HTML为什么语义化？
			
 
				+        1.便携开发
			
 
				+      -->
			
 
				+</body>
			
 
				+</html>
			
--- a/day3/html/7.垂直导航.html
+++ b/day3/html/7.垂直导航.html
@@ -0,0 +1,59 @@
 
				+<!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>
			
 
				+        * {
			
 
				+            list-style: none;
			
 
				+            text-decoration: none;
			
 
				+        }
			
 
				+        ul li {
			
 
				+            width: 100px;
			
 
				+            height: 100px;
			
 
				+            border: 1px solid #f00;
			
 
				+            text-align: center;
			
 
				+            line-height: 100px;
			
 
				+            /* border-radius: 8px; */
			
 
				+            /* 下边框：border-bottom */
			
 
				+            /* 上边框：border-top */
			
 
				+            /* 左边框：border-left */
			
 
				+            /* 右边框：border-right */
			
 
				+            border-bottom: none;
			
 
				+            border-top: none;
			
 
				+            /* display:inline-block; */
			
 
				+        }
			
 
				+        ul li:last-child {
			
 
				+            border: 1px solid #f00;
			
 
				+            border-top: none;
			
 
				+        }
			
 
				+        ul li:first-child {
			
 
				+            border: 1px solid #f00;
			
 
				+            border-bottom: none;
			
 
				+        }
			
 
				+        ul li a {
			
 
				+            color: #000;
			
 
				+        }
			
 
				+        ul li:hover {
			
 
				+            background: #f00;
			
 
				+        }
			
 
				+         
			
 
				+        ul li:hover a {
			
 
				+            color: #ff0;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div>
			
 
				+        <ul>
			
 
				+            <li><a href="https://www.baidu.com">画画</a></li>
			
 
				+            <li><a href="">书发</a></li>
			
 
				+            <li><a href="">跳舞</a></li>
			
 
				+            <li><a href="">唱歌</a></li>
			
 
				+            <li><a href="">篮球</a></li>
			
 
				+            <li><a href="">跑步</a></li>
			
 
				+        </ul>
			
 
				+    </div>
			
 
				+</body>
			
 
				+</html>
			
--- a/day3/html/8.三角形.html
+++ b/day3/html/8.三角形.html
@@ -0,0 +1,26 @@
 
				+<!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: 0;
			
 
				+            height: 0;
			
 
				+            border:40px solid #f00;
			
 
				+            border-color:  transparent  transparent  transparent red;
			
 
				+            /* 
			
 
				+             transparent 透明
			
 
				+             border-color: 上 右 下 左;
			
 
				+             */
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 
			
 
				+        css三角形
			
 
				+     -->
			
 
				+     <div></div>
			
 
				+</body>
			
 
				+</html>