Home Explore Help
Sign In
lovecoding
/
web0715
10
0
Fork 0
Files Issues 0 Wiki
Browse Source

add

fengchuanyu 9 months ago
parent
e2af2ebaf4
commit
cb0eadb04b
9 changed files with 123 additions and 70 deletions
Split View Show Diff Stats
  1. BIN
      .DS_Store
  2. BIN
      2_css/.DS_Store
  3. 11 0
      2_css/10_盒模型.html
  4. 1 0
      2_css/1_css.html
  5. 1 0
      2_css/2_选择器.html
  6. 2 2
      2_css/3_属性选择器.html
  7. 20 2
      2_css/8_多选择器.html
  8. 88 0
      2_css/练习2_歌曲.html
  9. 0 66
      2_css/练习2_歌曲播放页面.html

BIN
.DS_Store
View File


BIN
2_css/.DS_Store
View File


+ 11 - 0
2_css/10_盒模型.html
View File 

@@ -23,10 +23,21 @@
 
             /* margin 代表外边距 */
 
             margin:0;
 
         }
 
+        .box2{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color:blue;
 
+            /* margin-left: auto;
 
+            margin-right: auto; */
 
+            /*     上下 左右        */
 
+            margin : 0 auto; 
+        }
 
     </style>
 
 </head>
 
 <body>
 
     <div class="box1">1</div>
 
     <div>hello</div>
 
+
 
+    <div class="box2"></div>
 
 </body>
 
 </html>

+ 1 - 0
2_css/1_css.html
View File 

@@ -5,6 +5,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Document</title>
 
     <style>
 
+        /* css选择器 选中要控制的目标标签 */
 
         div{
 
             color: red;
 
         }

+ 1 - 0
2_css/2_选择器.html
View File 

@@ -22,6 +22,7 @@
 
     <div class="div1" id="divid">hello</div>
 
     <div>world</div>
 
     <div class="div1">你好</div>
 
+    <!-- 内联样式 -->
 
     <div style="color:blue">世界</div>
 
 </body>
 
 </html>

+ 2 - 2
2_css/3_属性选择器.html
View File 

@@ -17,9 +17,9 @@
 
         /* li[class=a]{
 
             color: red;
 
         } */
 
-        li[class~=a]{
 
+        /* li[class~=a]{
 
             color: red;
 
-        }
 
+        } */
 
     </style>
 
 </head>
 
 <body>

+ 20 - 2
2_css/8_多选择器.html
View File 

@@ -11,12 +11,30 @@
 
         /* .a .b .c{
 
             color: red;
 
         } */
 
+        /* id选择器（百位） > 类选择器（十位） > 标签选择器（个位） */
 
+        /* 0-0-0 */
 
+
 
+
 
+        /* 0-2-0 */
 
         .a .c{
 
             color: red;
 
         }
 
+        /* 0-1-0 */
 
         .c{
 
             color: blue;
 
         }
 
+        /* 1-0-0 */
 
+        #id1{
 
+            color: purple;
 
+        }
 
+        /* 0-0-1 */
 
+        div{
 
+            color: yellow;
 
+        }
 
+        /* 1-1-0 */
 
+        .a #div2{
 
+            color: aqua;
 
+        }
 
     </style>
 
 </head>
 
 <body>
 
@@ -24,11 +42,11 @@
 
         hello
 
         <div class="b">
 
             world
 
-            <div class="c">
 
+            <div class="c" id="div2">
 
                 你好
 
             </div>
 
         </div>
 
     </div>
 
-    <div class="c">世界</div>
 
+    <div class="c" id="id1">世界</div>
 
 </body>
 
 </html>

+ 88 - 0
2_css/练习2_歌曲.html
View File 

@@ -0,0 +1,88 @@
 
+<!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>
 
+        *{
 
+            text-align: center;
 
+        }
 
+        .music-info h1{
 
+            color: #007bff;
 
+        }
 
+        .music-info h2,.music-info h3{
 
+            color: #666;
 
+        }
 
+        .music-img img{
 
+            width: 400px;
 
+            border:2px solid #007bff;
 
+        }
 
+        .music-text p{
 
+            color: #666;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="container">
 
+        <div class="music-info">
 
+            <h1>《枫》</h1>
 
+            <h2>歌手：周杰伦</h2>
 
+            <h3>作词人：弹头（宋健彰）</h3>
 
+            <h3>作曲人：周杰伦</h3>
 
+        </div>
 
+        <div class="music-img">
 
+            <img src="https://i2.hdslb.com/bfs/archive/041b97a7e12aa6f37885540e53e3d963f88a9d2f.jpg" alt="图片">
 
+        </div>
 
+        <div class="music-text">
 
+            <h4>歌词：</h4>
 
+            <p>
 
+                乌云在我们心里搁下一块阴影<br>
 
+                我聆听沉寂已久的心情<br>
 
+                清晰透明 就像美丽的风景<br>
 
+                总在回忆里才看得清<br>
 
+                被伤透的心能不能够继续爱我<br>
 
+                我用力牵起没温度的双手<br>
 
+                过往温柔 已经被时间上锁<br>
 
+                只剩挥散不去的难过<br>
 
+                缓缓飘落的枫叶像思念<br>
 
+                我点燃烛火温暖岁末的秋天<br>
 
+                极光掠夺天边<br>
 
+                北风掠过想你的容颜<br>
 
+                我把爱烧成了落叶<br>
 
+                却换不回熟悉的那张脸<br>
 
+                缓缓飘落的枫叶像思念<br>
 
+                为何挽回要赶在冬天来之前<br>
 
+                爱你穿越时间<br>
 
+                两行来自秋末的眼泪<br>
 
+                让爱渗透了地面<br>
 
+                我要的只是你在我身边<br>
 
+                被伤透的心能不能够继续爱我<br>
 
+                我用力牵起没温度的双手<br>
 
+                过往温柔 已经被时间上锁<br>
 
+                只剩挥散不去的难过<br>
 
+                在山腰间飘逸的红雨<br>
 
+                随着北风凋零 我轻轻摇曳风铃<br>
 
+                想唤醒被遗弃的爱情<br>
 
+                雪花已铺满了地<br>
 
+                深怕窗外枫叶已结成冰<br>
 
+                缓缓飘落的枫叶像思念<br>
 
+                我点燃烛火温暖岁末的秋天<br>
 
+                极光掠夺天边<br>
 
+                北风掠过想你的容颜<br>
 
+                我把爱烧成了落叶<br>
 
+                却换不回熟悉的那张脸<br>
 
+                缓缓飘落的枫叶像思念<br>
 
+                为何挽回要赶在冬天来之前<br>
 
+                爱你穿越时间<br>
 
+                两行来自秋末的眼泪<br>
 
+                让爱渗透了地面<br>
 
+                我要的只是你在我身边<br>
 
+            </p>
 
+        </div>
 
+    </div>
 
+</body>
 
+
 
+</html>

+ 0 - 66
2_css/练习2_歌曲播放页面.html
View File 

@@ -1,66 +0,0 @@
 
-<!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>周杰伦 - 枫 歌词界面</title>
 
-</head>
 
-
 
-<body style="background-color: #f5f5f5; font-family: Arial, sans-serif;">
 
-
 
-  <h1 style="color: #007bff; text-align: center;">《枫》</h1>
 
-  <h2 style="color: #666; text-align: center;">歌手：周杰伦</h2>
 
-  <h3 style="color: #666; text-align: center;">作词人：弹头（宋健彰）</h3>
 
-  <h3 style="color: #666; text-align: center;">作曲人：周杰伦</h3>
 
-
 
-  <img src="https://i2.hdslb.com/bfs/archive/041b97a7e12aa6f37885540e53e3d963f88a9d2f.jpg" alt="周杰伦 - 枫 封面" height="300" style="display: block; margin: 0 auto; border: 2px solid #007bff; border-radius: 5px;">
 
-
 
-  <p style="color: #333; text-align: center; font-size: 18px;">歌词：</p>
 
-  <p style="color: #555; text-align: center; font-size: 16px;">乌云在我们心里搁下一块阴影<br>
 
-    我聆听沉寂已久的心情<br>
 
-    清晰透明 就像美丽的风景<br>
 
-    总在回忆里才看得清<br>
 
-    被伤透的心能不能够继续爱我<br>
 
-    我用力牵起没温度的双手<br>
 
-    过往温柔 已经被时间上锁<br>
 
-    只剩挥散不去的难过<br>
 
-    缓缓飘落的枫叶像思念<br>
 
-    我点燃烛火温暖岁末的秋天<br>
 
-    极光掠夺天边<br>
 
-    北风掠过想你的容颜<br>
 
-    我把爱烧成了落叶<br>
 
-    却换不回熟悉的那张脸<br>
 
-    缓缓飘落的枫叶像思念<br>
 
-    为何挽回要赶在冬天来之前<br>
 
-    爱你穿越时间<br>
 
-    两行来自秋末的眼泪<br>
 
-    让爱渗透了地面<br>
 
-    我要的只是你在我身边<br>
 
-    被伤透的心能不能够继续爱我<br>
 
-    我用力牵起没温度的双手<br>
 
-    过往温柔 已经被时间上锁<br>
 
-    只剩挥散不去的难过<br>
 
-    在山腰间飘逸的红雨<br>
 
-    随着北风凋零 我轻轻摇曳风铃<br>
 
-    想唤醒被遗弃的爱情<br>
 
-    雪花已铺满了地<br>
 
-    深怕窗外枫叶已结成冰<br>
 
-    缓缓飘落的枫叶像思念<br>
 
-    我点燃烛火温暖岁末的秋天<br>
 
-    极光掠夺天边<br>
 
-    北风掠过想你的容颜<br>
 
-    我把爱烧成了落叶<br>
 
-    却换不回熟悉的那张脸<br>
 
-    缓缓飘落的枫叶像思念<br>
 
-    为何挽回要赶在冬天来之前<br>
 
-    爱你穿越时间<br>
 
-    两行来自秋末的眼泪<br>
 
-    让爱渗透了地面<br>
 
-    我要的只是你在我身边<br>
 
-  </p>
 
-
 
-</body>
 
-
 
-</html>