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

fix:day3

e 1 year ago
parent
8a8729ec96
commit
869ed65799
3 changed files with 113 additions and 3 deletions
Split View Show Diff Stats
  1. 4 3
      day3/html/2.常用样式.html
  2. 63 0
      day3/html/3.文字样式.html
  3. 46 0
      day3/html/4.颜色.html

+ 4 - 3
day3/html/2.常用样式.html
View File 

@@ -10,7 +10,7 @@
 
             高度 height
 
             单位 px
 
             颜色 color
 
-            背景：background 复合属性
 
+            背景：background:color image repeat position; 复合属性
 
                 背景色:background-color
 
                 背景图:background-image:url("引入图片的路径")
 
                 背景是否平铺：background-repeat
 
@@ -60,19 +60,20 @@
 
         div {
 
             width: 1000px;
 
             height: 500px;
 
+            padding: 200px;
 
             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;
 
+            /* background-origin: border-box; */
 
             color: #f00;
 
         }
 
     </style>
 
 </head>
 
 <body>
 
     <div>
 
-        <p>哈哈哈哈</p>
 
+        <!-- <p>哈哈哈哈</p> -->
 
         <!-- <img src="../../day1/images/img01.jpeg" alt=""> -->
 
     </div>
 
     <!-- <img src="../images/1.jpg" style="width: 200px;height: 300px;" alt=""> -->

+ 63 - 0
day3/html/3.文字样式.html
View File 

@@ -0,0 +1,63 @@
 
+<!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>
 
+        /* 
+            1.font-size 字体大小
 
+                浏览器可支持最小字体为12px
 
+                浏览器根字体 16px
 
+            2.font-weight 字体粗细
 
+                100~300 细 lighter
 
+                400~500 正常 normal
 
+                600~900 粗 bold bolder
 
+            3.font-family 字体
 
+            4.font-style 字体样式
 
+                normal 正常
 
+                italic 倾斜
 
+                oblique 倾斜（一点弧度 不常用）
 
+
 
+            文字在已知宽高的盒子内居中：
 
+                水平:text-align(文本位置)：center(left/right)
 
+                垂直：line-height(行间距)：当前高度；
 
+
 
+            圆角框：
 
+                border-radius:50%;圆形
 
+                border-bottom-right-radius 右下
 
+                border-bottom-left-radius 左下
 
+                border-top-right-radius 右上
 
+                border-top-left-radius 左上
 
+
 
+
 
+        */
 
+        div {
 
+            width: 400px;
 
+            height: 400px;
 
+            border: 3px solid #0f0;
 
+            text-align: center;
 
+            line-height: 400px;
 
+            /* border-radius: 50%; */
 
+            border-bottom-right-radius: 10px;
 
+        }
 
+        p {
 
+            
+            /* font-size: 32px; */
 
+            /* 缩放 0~1 */
 
+            /* scale: 0.5; */
 
+            font-weight: bolder;
 
+            font-family:'Times New Roman', Times, serif;
 
+            font-style: oblique;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div>
 
+        今天天气真好
 
+    </div>
 
+</body>
 
+</html>

+ 46 - 0
day3/html/4.颜色.html
View File 

@@ -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>
 
+        div {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: rgb(255,255,0);
 
+            /* opacity: 0; */
 
+            /* 
+                隐藏元素：display:none; 相当于将元素从页面删掉 不占位 
+                显示元素: display:block;
 
+                透明：opacity：0~1[0.5=>.5] 元素隐藏扔占位     
+            */
 
+            /* display: none;
 
+            display: block; */
 
+        }
 
+        div {
 
+            width: 300px;
 
+            height: 300px;
 
+            background: #f00;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!--  
+        16进制颜色             rgb颜色 
+
 
+        红色 #ff0000 #f00     rgb(255,0,0)
 
+        黄色 #ffff00 #ff0     rgb(255,255,0)
 
+        蓝色 #0000ff #00f     rgb(0,0,255)
 
+        绿色 #00ff00 #0f0     rgb(0,255,0)
 
+        黑色 #000000 #000     rgb(0,0,0)
 
+        白色 #ffffff #fff     rgb(255,255,255)
 
+
 
+     -->
 
+    <!-- 
+        rgba() =>rgb + alpha(透明度0~1[0.5=>.5]<只是颜色透明，标签仍占位>)
 
+     -->
 
+    <div></div>
 
+    111111111111111111111
 
+</body>
 
+</html>