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

fix:day16

e 1 year ago
parent
afce4fb50d
commit
65d0cb94bb
6 changed files with 182 additions and 0 deletions
Unified View Show Diff Stats
  1. 14 0
      day16/css/1.浏览器内核.css
  2. 20 0
      day16/css/2.文本样式.css
  3. 96 0
      day16/css/3.选择器.css
  4. 12 0
      day16/html/1.浏览器内核.html
  5. 14 0
      day16/html/2.文本样式.html
  6. 26 0
      day16/html/3.选择器.html

+ 14 - 0
day16/css/1.浏览器内核.css
View File 

@@ -0,0 +1,14 @@
 
+#box {
 
+    width: 200px;
 
+    height: 200px;
 
+    background: #00f;
 
+    border-radius: 50%;
 
+    /* 兼容chrome浏览器 或者safari浏览器 */
 
+    -webkit-border-radius: 5px;
 
+    /* 兼容火狐浏览器 */
 
+    -moz-border-radius: 5px;
 
+    /* 兼容欧鹏浏览器 */
 
+    -o-border-radius: 5px;
 
+    /* 兼容IE浏览器 */
 
+    -ms-border-radius: 5px;
 
+}

+ 20 - 0
day16/css/2.文本样式.css
View File 

@@ -0,0 +1,20 @@
 
+#box {
 
+    width: 200px;
 
+    height: 200px;
 
+    background: #ff0;
 
+    /* 文本阴影
 
+        text-shadow: 左右 上下 清晰度 颜色;
 
+    */
 
+    text-shadow: 5px 5px 5px red;
 
+    /* 
+        盒子阴影
 
+        box-shadow：左右 上下 清晰度 颜色；
 
+    */
 
+    box-shadow: 5px 10px 3px blue;
 
+    /* 溢出隐藏 */
 
+    overflow: hidden;
 
+    /* 不让换行 */
 
+    white-space: nowrap;
 
+    /* 文本变成省略号 */
 
+    text-overflow: ellipsis;
 
+}

+ 96 - 0
day16/css/3.选择器.css
View File 

@@ -0,0 +1,96 @@
 
+/* 标签选择器 */
 
+div {
 
+    color: aqua;
 
+}
 
+/* 标签选择器 */
 
+#choose {
 
+    width: 100px;
 
+    height: 40px;
 
+    background: #f00;
 
+    color: #ff0;
 
+}
 
+/* 类选择器 */
 
+.vase {
 
+    color: aquamarine;
 
+}
 
+/* 伪类选择器 */
 
+/* :hover 划过
 
+   :first-child
 
+   :last-child
 
+   :nth-child(num)
 
+*/
 
+/* :link 点击前的 */
 
+a:link {
 
+    background-color: aquamarine;
 
+}
 
+/* :hover 鼠标划过 悬停 */
 
+a:hover {
 
+    background-color: #f00;
 
+}
 
+
 
+/* :active鼠标点击时 */
 
+a:active {
 
+    background: #00f;
 
+}
 
+/* :visited点击后的状态 */
 
+a:visited {
 
+    background-color: #ff0;
 
+}
 
+/* 后代选择器（包含选择器） */
 
+/* p span {
 
+    color: #f00;
 
+} */
 
+/* > 子类选择器 */
 
+p>span {
 
+    color: #00f;
 
+}
 
+/* 群组选择器 */
 
+h1,h2,b {
 
+    color: #f00;
 
+}
 
+/* 属性选择器 */
 
+img[alt='111'] {
 
+    width: 200px;
 
+    height: 200px;
 
+}
 
+/* 相邻选择器 */
 
+/* h4 + h5 {
 
+    color: aqua;
 
+} */
 
+/* 兄弟选择器 */ 
+h3 ~ h5 {
 
+    color: #f00;
 
+}
 
+/* 伪元素选择器
 
+    ::before
 
+    ::after
 
+*/
 
+#box1 {
 
+    width: 200px;
 
+    height: 200px;
 
+    background: #00f;
 
+    color: #000;
 
+}
 
+#box1::before {
 
+    content: 'before';
 
+    color: #f00;
 
+}
 
+#box1::after {
 
+    content: 'after';
 
+    color: #ff0;
 
+}
 
+/* 通配符选择器 */
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+/* 
+    css选择器的优先级
 
+    !important 正无穷
 
+    内联样式（style）    1,0,0,0
 
+    id选择器             0,1，0,0
 
+    类选择器(class) = 伪类选择器 = 属性选择器 0,0,1，0
 
+    标签选择器 = 伪元素选择器 0,0,0,1
 
+    通配符选择器 0,0,0,0
 
+
 
+*/

+ 12 - 0
day16/html/1.浏览器内核.html
View File 

@@ -0,0 +1,12 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="../css/1.浏览器内核.css">
 
+</head>
 
+<body>
 
+    <div id="box"></div>
 
+</body>
 
+</html>

+ 14 - 0
day16/html/2.文本样式.html
View File 

@@ -0,0 +1,14 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="../css/2.文本样式.css">
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        你好你好你好你好你好你好你好你好你好你好你好
 
+    </div>
 
+</body>
 
+</html>

+ 26 - 0
day16/html/3.选择器.html
View File 

@@ -0,0 +1,26 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="../css/3.选择器.css">
 
+</head>
 
+<body>
 
+    <!-- <div>标签选择器</div>
 
+    <p id="choose">id选择器</p>
 
+    <p class="vase">class(类)选择器</p>
 
+    <a href="">伪类选择器</a> -->
 
+    <!-- <p>
 
+        <span>后代（包含）选择器</span>
 
+    </p> -->
 
+    <!-- <h1>111</h1>
 
+    <h2>222</h2>
 
+    <b>333</b> -->
 
+    <!-- <img src="../../day15/img/1.png" alt="111"> -->
 
+    <!-- <h3>333</h3>
 
+    <h4>444</h4>
 
+    <h5>555</h5> -->
 
+    <div id="box1">我的盒子</div>
 
+</body>
 
+</html>