ホーム エクスプローラ ヘルプ
サインイン
lovecoding
/
W250511
10
0
フォーク 0

2 コミット 201db4b9d1 ... 2d6190a1ff

作者 SHA1 メッセージ 日付
  fengchuanyu 2d6190a1ff admin 1 週間 前
  fengchuanyu 915e5ae20d admin 2 週間 前
15 ファイル変更、418 行追加、2 行削除
分割表示 差分情報を表示
  1. BIN
      1-html/.DS_Store
  2. 6 1
      1-html/2_常用标签.html
  3. 18 0
      1-html/6_标签嵌套.html
  4. 1 1
      1-html/9_表单标签.html
  5. 13 0
      1-html/作业/1.html
  6. 79 0
      1-html/作业/2.html
  7. 22 0
      2-CSS/1_CSS基础.html
  8. 36 0
      2-CSS/2_CSS选择器.html
  9. 25 0
      2-CSS/3_层叠样式表.html
  10. 29 0
      2-CSS/4_和模型.html
  11. 27 0
      2-CSS/5_简单布局.html
  12. 43 0
      2-CSS/6_选择器组合继承.html
  13. 46 0
      2-CSS/7_权重值.html
  14. BIN
      2-CSS/image/img1.jpg
  15. 73 0
      2-CSS/练习1_歌曲.html

BIN
1-html/.DS_Store
ファイルの表示


+ 6 - 1
1-html/2_常用标签.html
ファイルの表示 

@@ -1,19 +1,24 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
+
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Document</title>
 
 </head>
 
+
 
 <body>
 
     <!-- div 页面布局当中最常用的容器 -->
 
     <div>hello</div>
 
     <div>
 
         <!-- 标签可以实现嵌套 -->
 
-        <div></div>
 
+        <div>
 
+            <div></div>
 
+        </div>
 
         <div></div>
 
     </div>
 
     <div></div>
 
     <div></div>
 
 </body>
 
+
 
 </html>

+ 18 - 0
1-html/6_标签嵌套.html
ファイルの表示 

@@ -10,8 +10,26 @@
 
         <div>hello world</div>
 
     </div>
 
 
+    <!-- p 内部不能嵌套块标签 -->
 
     <p>
 
         <div>hello</div>
 
     </p>
 
+
 
+    <p>
 
+        你好
 
+        <span>hello</span>
 
+        世界
 
+    </p>
 
+
 
+
 
+    <h1>hello</h1>
 
+    <h1>hello</h1>
 
+    <span>world</span>
 
+    <span>world</span>
 
+
 
+    <img src="./111.jpeg" width="100" alt="111">
 
+    <img src="./111.jpeg" width="100" alt="111">
 
+
 
+
 
 </body>
 
 </html>

+ 1 - 1
1-html/9_表单标签.html
ファイルの表示 

@@ -32,7 +32,7 @@
 
     <!-- 文本域 -->
 
     <textarea cols="20" rows="5"></textarea>
 
 
-    <!-- 文本上传 -->
 
+    <!-- 文件上传 -->
 
     <input type="file">
 
     <br/>
 
     <br/>

+ 13 - 0
1-html/作业/1.html
ファイルの表示 

@@ -0,0 +1,13 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <h1>我的第一个网页</h1>
 
+    <p>这是一个示例段落</p>
 
+    <img src="../111.jpeg" alt="图片">
 
+</body>
 
+</html>

+ 79 - 0
1-html/作业/2.html
ファイルの表示 

@@ -0,0 +1,79 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <table border="1" cellspacing="0" cellpadding="0">
 
+        <tr>
 
+            <td>普通单元格</td>
 
+            <td>图片单元格</td>
 
+            <td>列表单元格</td>
 
+            <td>表单单元格</td>
 
+        </tr>
 
+        <tr>
 
+            <td>这是一个普通文本单元格</td>
 
+            <td>
 
+                <img src="../111.jpeg" height="100" alt="图片">
 
+            </td>
 
+            <td>
 
+                <ul>
 
+                    <li>列表项1</li>
 
+                    <li>列表项2</li>
 
+                    <li>列表项3</li>
 
+                </ul>
 
+            </td>
 
+            <td>
 
+                <form action="http://localhost:4000">
 
+                    <label for="username">用户名：</label>
 
+                    <input id="username" type="text">
 
+                    <input type="button" value="提交">
 
+                </form>
 
+            </td>
 
+        </tr>
 
+        <tr>
 
+            <td>行内元素单元格</td>
 
+            <td>块元素单元格</td>
 
+            <td>嵌套表格单元格</td>
 
+            <td>合并单元格示例</td>
 
+        </tr>
 
+        <tr>
 
+            <td>
 
+                <span style="color: red;">这是一个行元素</span>
 
+                <a href="https://www.taobao.com">链接</a>
 
+                <b>加粗文本</b>
 
+            </td>
 
+            <td>
 
+                <div>这是一个块元素</div>
 
+                <p>这是一个段落</p>
 
+            </td>
 
+            <td>
 
+                <table border="1" cellspacing="0" cellpadding="0">
 
+                    <tr>
 
+                        <td>嵌套表格行1</td>
 
+                        <td>嵌套表格行2</td>
 
+                    </tr>
 
+                    <tr>
 
+                        <td>嵌套表格行3</td>
 
+                        <td>嵌套表格行4</td>
 
+                    </tr>
 
+                </table>
 
+            </td>
 
+            <td rowspan="2">
 
+                这是一个跨行合并的单元格
 
+            </td>
 
+        </tr>
 
+        <tr>
 
+            <td>
 
+                多行单元格示例
 
+            </td>
 
+            <td colspan="2">
 
+                这是一个跨列合并的单元格
 
+            </td>
 
+            
+        </tr>
 
+    </table>
 
+</body>
 
+</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>