Etusivu Tutki Apua
Kirjaudu sisään
lovecoding
/
W250913
10
0
Fork 0
Tiedostot Ongelmat 0 Pull-pyynnöt 0 Wiki
Selaa lähdekoodia

admin

fengchuanyu 1 kuukausi sitten
vanhempi
211623c9f8
commit
46a743ef2e
10 muutettua tiedostoa jossa 476 lisäystä ja 1 poistoa
Jaettu näkymä Näytä diff tilastot
  1. 23 0
      2_CSS/17_border.html
  2. 91 0
      2_CSS/18_新增选择器.html
  3. 39 0
      2_CSS/19_层叠样式.html
  4. 38 0
      2_CSS/20_权重值.html
  5. 58 0
      2_CSS/21_BFC.html
  6. 29 0
      2_CSS/22_overflow.html
  7. 28 0
      2_CSS/23_透明.html
  8. 65 1
      2_CSS/练习6_伪类选择器.html
  9. 69 0
      2_CSS/练习7_图形练习.html
  10. 36 0
      2_CSS/练习8_习题解析.html

+ 23 - 0
2_CSS/17_border.html
Näytä tiedosto 

@@ -0,0 +1,23 @@
 
+<!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;
 
+            /* border:10px solid blue; */
 
+            border-top:10px solid blue;
 
+            /* transparent 透明的颜色 */
 
+            border-right: 10px solid transparent;
 
+            border-bottom: 10px solid green;
 
+            border-left: 10px solid orange;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

+ 91 - 0
2_CSS/18_新增选择器.html
Näytä tiedosto 

@@ -0,0 +1,91 @@
 
+<!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>
 
+        /* h1{
 
+            margin: 0;
 
+        }
 
+        p{
 
+            margin: 0;
 
+        }
 
+        ul{
 
+            margin: 0;
 
+        } */
 
+
 
+        /* 去除所有标签自带的margin */
 
+        /* *通配符选择器 可以选中所有的标签 */
 
+        *{
 
+            margin:0;
 
+        }
 
+
 
+
 
+        /* .box2{
 
+            color: red;
 
+        } */
 
+
 
+        /* 后代选择器 */
 
+        /* 前面的选择器为祖先 后面的选择器为后代  中间以空格间隔*/
 
+        /* .box1 .box3 .box2{
 
+            color: red;
 
+        }
 
+        .box4{
 
+            color: red;
 
+        } */
 
+
 
+        /* 并集选择器 */
 
+        /* 合并多组选择器一起控制样式 每组选择器使用"，"进行间隔 */
 
+        .box2,.box4{
 
+            color: red;
 
+        }
 
+
 
+        /* 交集选择器 */
 
+        /* 同时满足多个条件的选择器 多个选择器之间没有间隔 */
 
+        .box2.box5{
 
+            font-size: 100px;
 
+        }
 
+
 
+
 
+        /* 属性选择器 [] */
 
+        input[type="text"]{
 
+            width: 400px;
 
+        }
 
+        [id="span1"]{
 
+            color: red;
 
+        }
 
+
 
+        /* 相邻兄弟选择器 */
 
+        /* 选择紧接在指定元素后的元素 两个选择器之间以"+"间隔 */
 
+        .box4 + .box5{
 
+            font-weight: bold;
 
+        }
 
+        .box5{
 
+            font-weight: normal;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- <h1>hello world</h1>
 
+    <p>这是一个段落</p>
 
+    <ul>
 
+        <li>列表项1</li>
 
+        <li>列表项2</li>
 
+        <li>列表项3</li>
 
+    </ul> -->
 
+
 
+
 
+    <div class="box1">
 
+        <div class="box3">
 
+            <div class="box2 box5">hello world</div>
 
+        </div>
 
+    </div>
 
+    <div class="box2">你好世界</div>
 
+    <div class="box4">四福科技</div>
 
+    <div class="box5">黑龙江</div>
 
+
 
+    <input type="text">
 
+    <span id="span1">这是一个span标签</span>
 
+</body>
 
+</html>

+ 39 - 0
2_CSS/19_层叠样式.html
Näytä tiedosto 

@@ -0,0 +1,39 @@
 
+<!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层叠样式 */
 
+        /* 层叠样式 指的是多个选择器同时作用于一个元素时 最终生效的样式 */
 
+
 
+        /* 层叠样式在合并过程中会冲突的属性 冲突的时候会根据一个原则进行取舍 权重值 */
 
+        
+        /*  *通配符选择器 < 标签选择器 < 类选择器 < id选择器  < (内联样式)行内样式 < !important */
 
+
 
+        /* 伪类选择器 属性选择器 权重值等同于 类选择器 */
 
+        /* 伪元素选择器 权重值等同于 标签选择器 */
 
+        
+        #div1{
 
+            color: green;
 
+        }
 
+        .box{
 
+            color: red;
 
+        }
 
+        div{
 
+            font-size: 100px;
 
+            color: blue;
 
+        }
 
+        *{
 
+            /* !important 权重值最高 会将当前属性提升至最高 会覆盖所有的样式 */
 
+            color: purple !important;
 
+            font-size: 30px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 内联样式 一般是预留给js使用的 -->
 
+    <div class="box" id="div1"  style="color: yellow;">hello world</div>
 
+</body>
 
+</html>

+ 38 - 0
2_CSS/20_权重值.html
Näytä tiedosto 

@@ -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>
 
+        /*  *通配符选择器0 < 标签选择器1 < 类选择器10 < id选择器100  < (内联样式)行内样式1000 < !important10000 */
 
+        /* 权重值是可以累加的 */
 
+        /* 10 + 10 = 20 */
 
+        /* .box1 .box2 {
 
+            color: blue;
 
+        } */
 
+        /* 10 */
 
+        /* .box2 {
 
+            color: red;
 
+        } */
 
+        /* 不允许跨等级对比  比如11类 也不可能超过一个ID */
 
+
 
+        
+        .box1 .box2{
 
+            color: blue !important;
 
+        }
 
+        .box2{
 
+            color: red !important;
 
+        }
 
+        
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="box1">
 
+        <div class="box2">hello world</div>
 
+    </div>
 
+</body>
 
+
 
+</html>

+ 58 - 0
2_CSS/21_BFC.html
Näytä tiedosto 

@@ -0,0 +1,58 @@
 
+<!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>
 
+        .box1{
 
+            width: 400px;
 
+            height: 400px;
 
+            background-color: blue;
 
+            /* float: left; */
 
+            overflow: hidden;
 
+            /* display: inline-block */
 
+            /* border:1px solid black; */
 
+        }
 
+        .box2{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: red;
 
+            margin-top: 100px;
 
+            margin-left: 100px;
 
+        }
 
+        .box3,.box4{
 
+            width: 200px;
 
+            height: 200px;
 
+        }
 
+        .box3{
 
+            background-color: green;
 
+            margin-bottom: 20px;
 
+        }
 
+        .box4{
 
+            margin-top: 30px;
 
+            background-color: yellow;
 
+        }
 
+        .box5{
 
+            overflow: hidden;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 外边距溢出  仅限于垂直方向 margin-top-->
 
+    <!-- BFC 块格式化上下文-->
 
+    <!-- BFC 限制内部元素与外部元素接触 内部元素所有效果仅限于BFC区域内 -->
 
+
 
+
 
+    <div class="box1">
 
+        <div class="box2"></div>
 
+    </div>
 
+
 
+
 
+    <!-- 外边距合并 上下两个相邻元素  垂直方向 margin-top margin-bottom 合并成一个 -->
 
+    <div class="box5">
 
+        <div class="box3"></div>
 
+    </div>
 
+    <div class="box4"></div>
 
+</body>
 
+</html>

+ 29 - 0
2_CSS/22_overflow.html
Näytä tiedosto 

@@ -0,0 +1,29 @@
 
+<!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;
 
+            height: 400px;
 
+            border:3px solid red;
 
+            /* 隐藏超出部分 */
 
+            /* overflow: hidden; */
 
+            /* 滚动条显示 */
 
+            /* overflow: auto; */
 
+            /* overflow: scroll; */
 
+            /* overflow-x 水平方向 */
 
+            /* overflow-y 垂直方向 */
 
+            overflow-x: scroll;
 
+            overflow-y: hidden;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <img src="./img/img1.jpg" alt="">
 
+    </div>
 
+</body>
 
+</html>

+ 28 - 0
2_CSS/23_透明.html
Näytä tiedosto 

@@ -0,0 +1,28 @@
 
+<!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>
 
+        .box1{
 
+            width: 500px;
 
+            height: 500px;
 
+            background-color: red;
 
+            float: left;
 
+            /* 透明度 0 完全透明 1 完全不透明 */
 
+            /* 注意：透明会影响子元素的透明度 */
 
+            opacity: 0.5;
 
+        }
 
+        .box2{
 
+            width: 400px;
 
+            height: 400px;
 
+            background-color: blue;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box1">hello world</div>
 
+    <div class="box2"></div>
 
+</body>
 
+</html>

+ 65 - 1
2_CSS/练习6_伪类选择器.html
Näytä tiedosto 

@@ -4,8 +4,72 @@
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Document</title>
 
+    <style>
 
+        h1{
 
+            text-align: center;
 
+            /* border:1px solid blue; */
 
+            border-bottom: 3px solid blue;
 
+            padding-bottom: 20px;
 
+        }
 
+        /* .line{
 
+            height: 1px;
 
+            background-color: blue;
 
+        } */
 
+        .box{
 
+            width: 400px;
 
+            margin: 0 auto;
 
+        } 
+        li{
 
+            list-style: none;
 
+            height: 70px;
 
+            /* background-color: #999; */
 
+            margin-bottom: 20px;
 
+            padding-left: 20px;
 
+            line-height: 70px;
 
+            color: #fff;
 
+            border-radius: 20px;
 
+        }
 
+        /* li{
 
+            list-style: none;
 
+            margin-top: 20px;
 
+            padding:20px;
 
+            background-color: #999;
 
+        }  */
 
+
 
+        
+        /* 偶数项 even 、 2n */
 
+        li:nth-child(even){
 
+            background-color: #999;
 
+        }
 
+        /* 奇数项 odd 、 2n-1 */
 
+        li:nth-child(odd){
 
+            background-color: #333;
 
+        }
 
+
 
+        li:first-child{
 
+            background-color: #007bff;
 
+        }
 
+
 
+        li:hover{
 
+            background-color: #007bff;
 
+        }
 
+        li:last-child:hover::after{
 
+            content: "最后一个";
 
+        }
 
+    </style>
 
 </head>
 
 <body>
 
-    
+    <h1>我的简单网页</h1>
 
+    <!-- <div class="line"></div> -->
 
+    <div class="box">
 
+        <p>以下是一些列表项：</p>
 
+        <ul>
 
+            <li>列表项1</li>
 
+            <li>列表项2</li>
 
+            <li>列表项3</li>
 
+            <li>列表项4</li>
 
+            <li>列表项5</li>
 
+        </ul>
 
+    </div>
 
 </body>
 
 </html>

+ 69 - 0
2_CSS/练习7_图形练习.html
Näytä tiedosto 

@@ -0,0 +1,69 @@
 
+<!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>
 
+        .box1{
 
+            width: 200px;
 
+            height: 200px;
 
+            border:3px dashed blue
 
+        }
 
+        .box2{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: red;
 
+        }
 
+        /* 块元素在不设置高宽的情况下 */
 
+        /* 宽度默认是父元素的宽度 */
 
+        /* 高度默认是内容的高度 */
 
+        /* .box3{
 
+            background-color: red; */
 
+            /* padding: 100px 0; */
 
+            /* padding-top: 200px;
 
+        } */
 
+        .box3{
 
+            border:100px solid black;
 
+        } 
+
 
+        .box4{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: green;
 
+            /* border-radius: 100px; */
 
+            /* 圆角是可以使用百分比 百分比相较于父元素的宽度 */
 
+            /* 百分比一般使用在未知元素尺寸的情况下 */
 
+            border-radius: 50%;
 
+        }
 
+
 
+        .box5{
 
+            border-top:100px solid transparent;
 
+            border-left: 100px solid green;
 
+            border-bottom: 100px solid transparent;
 
+            border-right: 100px solid transparent;
 
+        }
 
+        .box6{
 
+            width: 0;
 
+            border-top:100px solid transparent;
 
+            border-left: 100px solid transparent;
 
+            border-bottom: 100px solid blue;
 
+            border-right: 100px solid transparent;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box1">
 
+        <div class="box2"></div>
 
+    </div>
 
+    <div class="box1">
 
+        <div class="box3"></div>
 
+    </div>
 
+
 
+    <div class="box4"></div>
 
+
 
+    <div class="box5"></div>
 
+
 
+    <div class="box6"></div>
 
+</body>
 
+</html>

+ 36 - 0
2_CSS/练习8_习题解析.html
Näytä tiedosto 

@@ -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>
 
+        .box2 {
 
+            color: blue;
 
+        }
 
+
 
+        .box1 {
 
+            color: red;
 
+        }
 
+
 
+
 
+        .box4 {
 
+            color: yellow;
 
+        }
 
+
 
+        .box3 {
 
+            color: green;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <!-- <div class=" box1 box2"> hello world </div> -->
 
+
 
+    <div class="box3">
 
+        <div class="box4">你好世界</div>
 
+    </div>
 
+</body>
 
+
 
+</html>