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

fix:day3

e 1 year ago
parent
973eea1241
commit
9a122f4fde
4 changed files with 153 additions and 4 deletions
Split View Show Diff Stats
  1. 42 0
      day3/垂直导航.html
  2. 20 2
      day3/常用样式.html
  3. 89 0
      day3/文字常用样式.html
  4. 2 2
      day3/选择器的优先级.html

+ 42 - 0
day3/垂直导航.html
View File 

@@ -0,0 +1,42 @@
 
+<!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>
 
+        /* 取消ul li 标签默认样式 */
 
+        ul {
 
+            list-style: none;
 
+        }
 
+        ul li {
 
+            width: 100px;
 
+            height: 80px;
 
+            border: 1px solid #000;
 
+            text-align: center;
 
+            line-height: 80px;
 
+        }
 
+        ul li:hover {
 
+            color: rgb(255,0,0);
 
+            background: #f00;
 
+        }
 
+        /* 
+            颜色（十六进制颜色）   rgb颜色
 
+            红色 #f00  #ff0000   rgb(255,0,0)
 
+            黄色 #ff0  #ffff00   rgb(255,255,0)
 
+            绿色 #0f0  #00ff00   rgb(0,255,0)
 
+            蓝色 #00f  #0000ff   rgb(0,0,255)
 
+            黑色 #000  #000000   rgb(0,0,0)
 
+            白色 #fff  #ffffff   rgb(255,255,255)
 
+        */
 
+    </style>
 
+</head>
 
+<body>
 
+    <ul>
 
+        <li>音乐</li>
 
+        <li>舞蹈</li>
 
+        <li>书画</li>
 
+        <li>绘画</li>
 
+    </ul>
 
+</body>
 
+</html>

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

@@ -10,8 +10,8 @@
 
             /* 宽度 width */
 
             /* 高度 height */
 
             /* 颜色 color */
 
-            /* 背景色 background-color/background */
 
             /* 背景 background */
 
+            /* 背景色 background-color */
 
             /* 背景图片 background-image:url("引入图片路径") */
 
             /* 背景平铺 background-repeat:
 
                 no-repeat 不平铺
 
@@ -25,9 +25,16 @@
 
             */
 
             /* 
                 背景位置 background-position
 
+                一个值：
 
+                同时代表x y轴
 
+                两个值的情况：
 
                 1.x轴 y轴
 
                 2.right/left top/bottom                  
             */
 
+            /* 
+                background 复合属性
 
+                background: color image repeat position;
 
+            */
 
             width: 300px;
 
             height: 300px;
 
             color: red;
 
@@ -39,9 +46,20 @@
 
             background-position:200px;
 
             
         }   
+        .main {
 
+            width: 900px;
 
+            height: 400px;
 
+            /* background: red url("./images/img01.gif") no-repeat; */
 
+            background-color: blueviolet;
 
+            background-image: url('./images/img01.gif');
 
+            background-repeat: no-repeat;
 
+            /* background-size: cover; */
 
+            background-position: right bottom;
 
+        }
 
     </style>
 
 </head>
 
 <body>
 
-    <div class="box"></div>
 
+    <!-- <div class="box"></div> -->
 
+    <div class="main"></div>
 
 </body>
 
 </html>

+ 89 - 0
day3/文字常用样式.html
View File 

@@ -0,0 +1,89 @@
 
+<!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>
 
+        p {
 
+            color: red;
 
+            /* 字体粗细 
+                font-weight:
 
+                字体变细：100-300 lighter
 
+                正常字体: 400-500 normal
 
+                字体变粗：600-900 bold bolder
 
+            */
 
+            font-weight: normal;
 
+            /* 字体大小
 
+                font-size
 
+                浏览器识别最小字体 12px
 
+            */
 
+            font-size: 20px;
 
+            /* 
+                缩放 scale:0~1
 
+            */
 
+            /* scale: 0.7; */
 
+            /* 字体样式
 
+                font-style:
 
+                    italic 倾斜
 
+                    normal 正常
 
+            */
 
+            font-style: normal;
 
+            /* 
+                字体格式 font-family
 
+            */
 
+            font-family:"Times New Roman",Georgia,Serif;
 
+        }
 
+        div {
 
+            width: 300px;
 
+            height: 200px;
 
+            /* background: #00f; */
 
+            color: #ff0;
 
+            /* 控制文字横向位置
 
+                text-align:
 
+                    center 居中
 
+                    left 居左
 
+                    right 居右
 
+            */
 
+            /* 
+                行间距
 
+                line-height
 
+            */
 
+            /* 文字在盒子内居中
 
+                text-align:center;
 
+                line-height
 
+            */
 
+            text-align: center;
 
+            line-height: 200px;
 
+            /* 
+                text-indent 文本（缩进）
 
+                text-indent:2em;缩进2字符
 
+            */
 
+            /* 边框
 
+                复合属性
 
+                border:宽度 样式 颜色;
 
+            */
 
+            /* border: 10px solid #000; */
 
+            /* 边框宽度 */
 
+            border-width: 10px;
 
+            /* 边框样式 
+                solid 实线
 
+                double 双边框
 
+                dashed 虚线
 
+                dotted 点线
 
+            */
 
+            border-style: dotted;
 
+            /* 边框颜色 */
 
+            border-color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <p style="text-indent: 2em;">这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
 
+    <span style="font-size: 12px;">12号字体</span>
 
+    <div>
 
+        这是一段文字
 
+    </div>
 
+
 
+</body>
 
+</html>

+ 2 - 2
day3/选择器的优先级.html
View File 

@@ -26,7 +26,7 @@
 
     </style>
 
 </head>
 
 <body>
 
-    <div  class="text">这个文字</div>
 
+    <div  class="text" style="color: #ff0;">这个文字</div>
 
     <!-- <ul>
 
         <li class="text">1</li>
 
         <li>2</li>
 
@@ -34,7 +34,7 @@
 
         <li>4</li>
 
     </ul> -->
 
     <!-- 
-        css选择器层级及权重：
 
+        css选择器优先级及权重：
 
 
         !important >内联样式（style）> id选择器 >类选择器（class）= 伪类选择器 = 属性选择器 > 标签选择器
 
    权重：   正无穷     1,0,0,0          0,1,0,0           0,0,1,0                          0,0,0,1