first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/逯帅帅/项目开发/学生项目/应越波/day1/css总结.html
+++ b/历届学生/逯帅帅/项目开发/学生项目/应越波/day1/css总结.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .span {
+            width: 100px;
+            height: 100px;
+            background-color: pink;
+        }
+
+        .test {
+            width: 100px;
+            height: 100px;
+            background-color: blanchedalmond;
+        }
+
+        .test:hover {
+            background-color: blue;
+        }
+    </style>
+</head>
+
+<body>
+    给html添加样式有三种:
+    1.行内样式
+    <p style="width: 100px;height: 100px;background-color:red">我是段落标签</p>
+    2.在head头标签里面书写style样式
+    <span class="span">我是span标签</span>
+    3.外链样式
+    <link rel="stylesheet" href="./test.css">
+    <div id="a">我是div标签</div>
+
+    选择器类型:
+    1.标签选择器,直接选择标签添加样式
+    2.class选择器,通过给标签添加class值,然后在样式使用.的方式添加样式
+    3.id选择器,通过给标签添加id值,然后在样式使用#的方式添加样式,口头约定id的值不能重复,与js配套使用
+    4.通配符选择器,*{},选择所有的标签并设置样式
+    5.伪类选择器,:hover鼠标经过
+    <p class="test">test</p>
+
+    <style>
+        p,
+        ul {
+            /* 同时选中p标签和ul标签 */
+        }
+
+        ul li {
+            /* 选中ul里面所有的li */
+        }
+
+        ul>li {
+            /* 作用和上面的是差不多 */
+        }
+
+        ul div+li {
+            /* 选择ul里面的div和同级最近的li(只选择第一个li) */
+        }
+
+        li:nth-child(2n+1) {
+            /* 里面的2n+1,分开来看,右边的+1代表从第一个开始,左边的2n就是隔俩个,这句话的意思就是从第一个开始,然后隔俩个 */
+
+        }
+
+        /* 从第5个开始，到最后 */
+        ul li:nth-child(n+5) {
+            width: 100px;
+            height: 100px;
+            background-color: red;
+        }
+
+        /* 前俩个 */
+        ul li:nth-child(-n+2) {
+            width: 100px;
+            height: 100px;
+            background-color: skyblue;
+        }
+
+        /* 伪元素 */
+        ul li:nth-child(10)::after {
+            content: '111';
+            background-color: pink;
+        }
+
+    </style>
+    <p></p>
+    <ul>
+        <div>0</div>
+        <li>1</li>
+        <li>2</li>
+        <li>3</li>
+        <li>4</li>
+        <li>5</li>
+        <li>6</li>
+        <li>7</li>
+        <li>8</li>
+        <li>9</li>
+    </ul>
+</body>
+
+</html>