Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
W250511
10
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

admin

fengchuanyu 6 өдөр өмнө
parent
915e5ae20d
commit
2d6190a1ff
9 өөрчлөгдсөн 301 нэмэгдсэн , 0 устгасан
Өөрчлөлтийг ялгаж харах Өөрчлөлтийн статистик харах
  1. 22 0
      2-CSS/1_CSS基础.html
  2. 36 0
      2-CSS/2_CSS选择器.html
  3. 25 0
      2-CSS/3_层叠样式表.html
  4. 29 0
      2-CSS/4_和模型.html
  5. 27 0
      2-CSS/5_简单布局.html
  6. 43 0
      2-CSS/6_选择器组合继承.html
  7. 46 0
      2-CSS/7_权重值.html
  8. BIN
      2-CSS/image/img1.jpg
  9. 73 0
      2-CSS/练习1_歌曲.html

+ 22 - 0
2-CSS/1_CSS基础.html
Файл харах 

@@ -0,0 +1,22 @@
 
+<!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>
 
+        /* 当我们要改变某个html标签时  */
 
+        /* 第一步：通过选择器选中要控制的标签 */
 
+        /* 第二步：通过css属性来控制标签的样式 */
 
+
 
+        /* css 选择器 */
 
+        div{
 
+            /* color css属性名  red css属性值 */
 
+            color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div>hello world</div>
 
+</body>
 
+</html>

+ 36 - 0
2-CSS/2_CSS选择器.html
Файл харах 

@@ -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>
 
+        /* 标签选择器 */
 
+        /* 标签选择器 根据标签名获取html标签 */
 
+        /* div{
 
+            color: red;
 
+        } */
 
+
 
+        /* 类选择器 */
 
+        /* 根据类名获取html标签  类名允许重复*/
 
+        .box1{
 
+            color: red;
 
+        }
 
+        .box2{
 
+            color: blue;
 
+        }
 
+        /* ID选择器 */
 
+        /* 根据ID获取html标签 ID不允许重复 */
 
+        #div1{
 
+           color: green; 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box1">hello world</div>
 
+    <div class="box2">你好世界</div>
 
+    <div class="box2" id="div1">love coding</div>
 
+    <!-- ID不允许重复 -->
 
+    <!-- <div id="div1">hello</div> -->
 
+</body>
 
+</html>

+ 25 - 0
2-CSS/3_层叠样式表.html
Файл харах 

@@ -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>
 
+        /* css 权重值 */
 
+        /* ID选择器 > 类选择器 > 标签选择 */
 
+        div{
 
+          font-size: 30px;
 
+          color: green;  
+        }
 
+        .box1{
 
+            color: red;
 
+        }
 
+        #div1{
 
+            color: blue;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box1" id="div1">hello world</div>
 
+</body>
 
+</html>

+ 29 - 0
2-CSS/4_和模型.html
Файл харах 

@@ -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>
 
+        div{
 
+            /* 宽度 */
 
+            width: 100px;
 
+            /* 高度 */
 
+            height: 100px;
 
+            /* 背景色 */
 
+            background-color: red;
 
+            /* 外边距  让边框外面的标签距离当前标签的距离*/
 
+            margin:10px;
 
+            /* 边框  第一个值表示边框粗细  第二个值边框样式（solid 实线） 第三个值边框颜色 每个值之间用空格连接*/
 
+            border: 1px solid black;
 
+            /* 内边距  内部内容与边框的距离*/
 
+            padding: 10px;
 
+        }
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    <div>hello</div>
 
+    <div>world</div>
 
+</body>
 
+</html>

+ 27 - 0
2-CSS/5_简单布局.html
Файл харах 

@@ -0,0 +1,27 @@
 
+<!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{
 
+            border:3px solid red;
 
+            /*  text-align 控制当前元素内的行元素对齐方式 left center right */
 
+            text-align: center;
 
+        }
 
+        div{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: red;
 
+            /* margin 两个值的时候 第一个值代表上下外边距 第二个值代表左右外边距 */
 
+            margin:0 auto;
 
+        }
 
+        /* 控制块元素水平居中的时候 可以使用margin:o auto; 他回把当前元素左右两边剩余的空间平局分配为左右外边距 */
 
+    </style>
 
+</head>
 
+<body>
 
+    <h1>这是一个标题</h1>
 
+    <div>hello</div>
 
+</body>
 
+</html>

+ 43 - 0
2-CSS/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>
 
+        /* .span1{
 
+            color:blue;
 
+        } */
 
+
 
+        /* 嵌套选择器 控制box 里面的 span1 */
 
+        /* .box .span1{
 
+            color:blue;
 
+        } */
 
+
 
+        /* .span1{
 
+            color: red;
 
+        }
 
+        .span2{
 
+            color: red;
 
+        } */
 
+        /* 选择器组合 */
 
+        /* .span1,.span2{
 
+            color: red;
 
+        } */
 
+
 
+        .box .span1,.span2{
 
+            color: green;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <span>hello</span>
 
+        <div>
 
+            <span class="span1">world</span>
 
+        </div>
 
+    </div>
 
+    <span class="span1">你好</span>
 
+    <span class="span2">世界</span>
 
+</body>
 
+</html>

+ 46 - 0
2-CSS/7_权重值.html
Файл харах 

@@ -0,0 +1,46 @@
 
+<!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>
 
+
 
+        /* important 优先级最高  > 内联样式（1000） > ID选择器(100) > 类选择器(10) > 标签选择(1) > 通配符选择器(0)*/
 
+
 
+        /* 两个类 20 */
 
+        /* .box .span1{
 
+            color: green;
 
+        } */
 
+        /* 一个类 10 */
 
+        /* .span1{
 
+            color: yellow;
 
+        }
 
+
 
+        div .span1{
 
+            color: red;
 
+        } */
 
+
 
+        /* 星号选择器（通配符）控制页面中所有的标签 */
 
+        /* *{
 
+            color: blue;
 
+        } */
 
+
 
+        /* #id-span{
 
+            color: green;
 
+        } */
 
+        *{
 
+            color: blue !important;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <span>hello</span>
 
+        <div>
 
+            <!-- style 为内联样式 -->
 
+            <span style="color: red" id="id-span" class="span1">world</span>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

BIN
2-CSS/image/img1.jpg
Файл харах


+ 73 - 0
2-CSS/练习1_歌曲.html
Файл харах 

@@ -0,0 +1,73 @@
 
+<!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>
 
+        /* 部分属性具有继承性 */
 
+        .music-title{
 
+            color:blue;
 
+            text-align: center;
 
+        }
 
+        .music-author{
 
+            text-align: center;
 
+        }
 
+
 
+        .music-pic{
 
+            width: 400px;
 
+            border:3px solid blue;
 
+            margin:auto;
 
+        }
 
+        
+        img{
 
+            width: 400px;
 
+        }
 
+        .music-info{
 
+            text-align: center;
 
+        }
 
+        .music-text{
 
+            text-align: center;
 
+            line-height: 30px;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <!-- 页面最外部容器 -->
 
+    <div class="container">
 
+        <!-- 歌曲标题 -->
 
+        <div class="music-title">
 
+            <h1>《枫》</h1>
 
+            <hr>
 
+        </div>
 
+        <!-- 作者 -->
 
+        <div class="music-author">
 
+            <h2>歌手：周杰伦</h2>
 
+            <h3>作词人：弹头（宋健彰）</h3>
 
+            <h3>作曲人：周杰伦</h3>
 
+        </div>
 
+        <!-- 歌曲图片 -->
 
+        <div class="music-pic">
 
+            <img src="./image/img1.jpg" alt="图片">
 
+        </div>
 
+        <!-- 歌曲信息 -->
 
+        <div class="music-info">
 
+            <p>
 
+                <b>歌词：</b>
 
+            </p>
 
+        </div>
 
+        <!-- 歌词 -->
 
+        <div class="music-text">
 
+            乌云在我们心里搁下一块阴影<br>
 
+            我聆听沉寂已久的心情<br>
 
+            清晰透明 就像美丽的风景<br>
 
+            总在回忆里才看得清<br>
 
+            被伤透的心能不能够继续爱我<br>
 
+            我用力牵起没温度的双手<br>
 
+        </div>
 
+    </div>
 
+</body>
 
+
 
+</html>