Home Explore Help
Sign In
lovecoding
/
VIP28
9
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

day:3

e 1 year ago
parent
961c8d32b8
commit
8a8729ec96
5 changed files with 121 additions and 1 deletions
Unified View Show Diff Stats
  1. 2 1
      day2/3.表单.html
  2. 5 0
      day3/css/1.css
  3. 34 0
      day3/html/1.css样式引入.html
  4. 80 0
      day3/html/2.常用样式.html
  5. BIN
      day3/images/1.jpg

+ 2 - 1
day2/3.表单.html
View File 

@@ -17,7 +17,8 @@
 
                               c.button 按钮
 
                               c.button 按钮
 
                               d.reset 重置按钮
 
                               d.reset 重置按钮
 
                               e.submit 提交按钮
 
                               e.submit 提交按钮
 
-                              f.radio 单选框 注：实现单选框加相同的name属性名称
 
+                              f.radio 单选框 
+                                注：实现单选框加相同的name属性名称
 
                               h.checkbox 多选框 
                               h.checkbox 多选框 
                                 checked默认选择  disabled禁止选中
 
                                 checked默认选择  disabled禁止选中
 
                            2.value 内容/值
 
                            2.value 内容/值

+ 5 - 0
day3/css/1.css
View File 

@@ -0,0 +1,5 @@
 
+div {
 
+    width: 200px;
 
+    height: 200px;
 
+    background-color: yellow;
 
+}

+ 34 - 0
day3/html/1.css样式引入.html
View File 

@@ -0,0 +1,34 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <!-- 
+        css样式引入：
 
+        1.行内样式/内联样式 
+        格式：在标签内 style=""
 
+        2.内部样式表
 
+        格式：在头部标签内 style标签 
+        3.外部样式表
 
+        方法：通过link标签引入
 
+        rel 引入表与现有表的关系
 
+        stylesheet 样式表
 
+        href 引入的路径
 
+     -->
 
+     <link rel="stylesheet" href="../css/1.css">
 
+     <style>
 
+        div {
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: blue;
 
+        }
 
+     </style>
 
+</head>
 
+<body>
 
+    <b>加粗的内容</b>
 
+    <p>这是一段文字</p>
 
+    <!-- 行内样式 > 内部样式表 > 外部样式表 -->
 
+    <div style="width: 200px;height: 200px;background-color: red;"></div>
 
+</body>
 
+</html>

+ 80 - 0
day3/html/2.常用样式.html
View File 

@@ -0,0 +1,80 @@
 
+<!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>
 
+        /*
 
+            宽度 width
 
+            高度 height
 
+            单位 px
 
+            颜色 color
 
+            背景：background 复合属性
 
+                背景色:background-color
 
+                背景图:background-image:url("引入图片的路径")
 
+                背景是否平铺：background-repeat
 
+                            repeat 平铺
 
+                            repeat-x 横向平铺
 
+                            repeat-y 纵向平铺
 
+                            no-repeat 不平铺
 
+                背景尺寸：background-size
 
+                            cover 全覆盖
 
+                            contain 等比例放至最大
 
+                背景图位置：background-position:x y;
 
+                            center 中间
 
+                            left   左
 
+                            right  右
 
+                            top    上
 
+                            bottom 下
 
+                            百分比及像素单位同时生效
 
+                背景图基点位置：background-origin
 
+                    border-box - 背景图片从边框的左上角开始
 
+                    padding-box -背景图像从内边距边缘的左上角开始（默认）
 
+                    content-box - 背景图片从内容的左上角开始
 
+            边框：border：width style color； 复合属性
 
+            border-width：1px; 边框粗细
 
+            border-color 边框颜色
 
+            border-style 边框样式
 
+                double 双边框 
+                dotted 点线
 
+                solid  实线
 
+                dashed 虚线
 
+
 
+            注：同标签 同级别 同样式 后面的样式会覆盖前面的样式
 
+
 
+ 
+        */
 
+        /* div {
 
+            width:500px;
 
+            height: 300px;
 
+            border:10px dotted red;
 
+            border-width: 3px;
 
+            border-style: dashed;
 
+            border-color: yellow;
 
+            background: blue;
 
+            background:url("../images/1.jpg");
 
+            background-color: red;
 
+            color: yellow;
 
+        } */
 
+        div {
 
+            width: 1000px;
 
+            height: 500px;
 
+            border: 3px solid #f00;
 
+            background: url("../../day1/images/img01.jpeg");
 
+            background-repeat: no-repeat;
 
+            /* background-size: contain; */
 
+            /* background-position: 100% 200px; */
 
+            background-origin: border-box;
 
+            color: #f00;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div>
 
+        <p>哈哈哈哈</p>
 
+        <!-- <img src="../../day1/images/img01.jpeg" alt=""> -->
 
+    </div>
 
+    <!-- <img src="../images/1.jpg" style="width: 200px;height: 300px;" alt=""> -->
 
+</body>
 
+</html>

BIN
day3/images/1.jpg
View File