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

fix:day4

e 1 year ago
parent
9a122f4fde
commit
6f2061bdc7
6 changed files with 298 additions and 0 deletions
Split View Show Diff Stats
  1. 94 0
      day4/css基础样式.html
  2. 55 0
      day4/css语法.html
  3. 67 0
      day4/demo1.css
  4. 48 0
      day4/demo1.html
  5. BIN
      day4/images/1.jpg
  6. 34 0
      day4/盒模型.html

+ 94 - 0
day4/css基础样式.html
View File 

@@ -0,0 +1,94 @@
 
+<!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>
 
+        a {
 
+            color: #000;
 
+            /* 取消a标签的默认样式 */
 
+            text-decoration: none;
 
+        }
 
+        a:hover {
 
+            color: #f00;
 
+        }
 
+        ul {
 
+            /* 取消无序列表默认样式 */
 
+            list-style: none;
 
+        }
 
+        ul li:hover {
 
+            color: #f00;
 
+            /* 鼠标变小手 */
 
+            cursor: pointer;
 
+        }
 
+        div {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #00f;
 
+            border: 1px solid #f00;
 
+            /* 取消边框 */
 
+            border: none;
 
+            /* 圆角
 
+                border-radius
 
+                50% 变成圆
 
+                左上
 
+                border-top-left-radius
 
+                右上
 
+                border-top-right-radius
 
+                左下
 
+                border-bottom-left-radius
 
+                右下
 
+                border-bottom-right-radius
 
+            */
 
+            border-bottom-right-radius: 10px;
 
+            /* border-radius: 50%; */
 
+        }
 
+        input {
 
+            /* 取消input框点击默认样式 */
 
+            /* outline: none; */
 
+            /* outline: 2px solid #f00; */
 
+            outline-width:4px;
 
+            outline-style: double;
 
+            outline-color: #ff0;
 
+            /* 
+                outline:width style color 轮廓
 
+                复合属性
 
+                outline-width
 
+                outline-style
 
+                outline-color
 
+            */
 
+        }
 
+        /* 
+            伪元素 加上content
 
+            ::after 在后面（位置）
 
+            ::before 在前面（位置）
 
+           
+            css2的语法 :after :before
 
+            css3的语法 ::after ::before
 
+
 
+        */
 
+        p::after{
 
+            content: "今天天气真好";
 
+            color: #f00;
 
+        }
 
+        p::before {
 
+            content: "在前面";
 
+            color: #00f;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div></div>
 
+    <a href="">今天</a>
 
+    <a href="">明天</a>
 
+    <a href="">后天</a>
 
+    <ul>
 
+        <li>1</li>
 
+        <li>2</li>
 
+        <li>3</li>
 
+    </ul>
 
+    <input type="text" placeholder="请输入">
 
+    <p>这是一段文字</p>
 
+</body>
 
+</html>

+ 55 - 0
day4/css语法.html
View File 

@@ -0,0 +1,55 @@
 
+<!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: #00f;
 
+            border: 2px solid #f00;
 
+            /* margin: 30px 40px 10px 20px; */
 
+            /* 外边距：盒子与盒子的距离
 
+                margin 复合属性
 
+                一个值 上下左右
 
+                两个值 上下 左右
 
+                三个值 上 左右 下
 
+                四个值 上 右 下 左
 
+                margin-top
 
+                margin-right
 
+                margin-left
 
+                margin-bottom
 
+            */
 
+        }
 
+        .box {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: pink;
 
+            margin-top: 30px;
 
+            margin-right: 30px;
 
+            margin-left: 30px;
 
+            margin-bottom: 30px;
 
+            /* padding-top: 20px; */
 
+            /* padding: 30px 20px; */
 
+            /* 
+                内边距:盒子与内容的距离
 
+                padding 复合属性
 
+                一个值 上下左右
 
+                两个值 上下 左右
 
+                三个值 上 左右 下
 
+                四个值 上 右 下 左
 
+                padding-top
 
+                padding-right
 
+                padding-left
 
+                padding-bottom
 
+            */
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div></div>
 
+    <div class="box">我是一段文字</div>
 
+</body>
 
+</html>

+ 67 - 0
day4/demo1.css
View File 

@@ -0,0 +1,67 @@
 
+.box {
 
+    width: 480px;
 
+    height: 850px;
 
+    border: 3px solid green;
 
+    /* 已知宽高的盒子在浏览器中居中
 
+        margin:0 auto(自适应);
 
+    */
 
+    margin: 0 auto;
 
+}
 
+.main {
 
+    width: 443px;
 
+    height: 816px;
 
+    margin: 17px;
 
+}
 
+
 
+.head {
 
+    /* 
+        继承父级宽高为100%
 
+    */
 
+    width: 100%;
 
+    height: 35px;
 
+    background: #ccc;
 
+    line-height: 35px;
 
+}
 
+.head span:first-child {
 
+    font-weight: 800;
 
+}
 
+.head span:last-child {
 
+    color: rgb(0, 140, 255);
 
+    /* 浏览器默认字体16px */
 
+    font-size: 14px;
 
+    padding-left: 10px;
 
+}
 
+
 
+.list .title {
 
+    font-weight: bold;
 
+    color: orange;
 
+    margin-bottom: 0;
 
+}
 
+
 
+.list .title>span {
 
+    color: rgb(0, 140, 255);
 
+}
 
+
 
+.list .word {
 
+    color: #ccc;
 
+    font-size: 15px;
 
+    text-indent: 2em;
 
+    margin-top: 5px;
 
+}
 
+.list ul li a{
 
+    text-decoration: none;
 
+    color: #000;
 
+    font-size: 16px;
 
+}
 
+.list ul li a span {
 
+    color: rgb(0, 140, 255);
 
+}
 
+
 
+.advertising {
 
+    width: 100%;
 
+    height: 95px;
 
+}
 
+.advertising img {
 
+    width: 100%;
 
+    height: 100%;
 
+}

+ 48 - 0
day4/demo1.html
View File 

@@ -0,0 +1,48 @@
 
+<!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="./demo1.css">
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="main">
 
+            <!-- 第一个小盒子 -->
 
+            <div class="head">
 
+                <span>出行风向标</span>
 
+                <span>更多>></span>
 
+            </div>
 
+            <!-- 第二个盒子 -->
 
+            <div class="list">
 
+                <p class="title">节日独享：<span>在他乡过大年，体验别致年味</span></p>
 
+                <p class="word">
 
+                    距离春节愈来愈近了，过年的气息已经在空气中开始弥漫。辛勤忙碌了一年，想给自己放个假，匆忙不玩的工作生活中解脱出来
 
+                </p>
 
+                <ul type="square">
 
+                    <li><a href="">深度出游:<span>验客20000元奖金,寻找最会泡的人</span></a></li>
 
+                    <li><a href="">深度出游:<span>验客20000元奖金,寻找最会泡的人</span></a></li>
 
+                    <li><a href="">深度出游:<span>验客20000元奖金,寻找最会泡的人</span></a></li>
 
+                </ul>
 
+            </div>
 
+            <!-- 第三个盒子 -->
 
+            <div class="list">
 
+                <p class="title">节日独享：<span>在他乡过大年，体验别致年味</span></p>
 
+                <p class="word">
 
+                    距离春节愈来愈近了，过年的气息已经在空气中开始弥漫。辛勤忙碌了一年，想给自己放个假，匆忙不玩的工作生活中解脱出来
 
+                </p>
 
+                <ul type="square">
 
+                    <li><a href="">深度出游:<span>验客20000元奖金,寻找最会泡的人</span></a></li>
 
+                    <li><a href="">深度出游:<span>验客20000元奖金,寻找最会泡的人</span></a></li>
 
+                    <li><a href="">深度出游:<span>验客20000元奖金,寻找最会泡的人</span></a></li>
 
+                </ul>
 
+            </div>
 
+            <!-- 第四个盒子 -->
 
+            <div class="advertising">
 
+                <img src="./images/1.jpg" alt="">
 
+            </div>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

BIN
day4/images/1.jpg
View File


+ 34 - 0
day4/盒模型.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>
 
+    <style>
 
+        div {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #0f0;
 
+            padding: 25px;
 
+            border: 2px solid #f00;
 
+            margin: 10px;
 
+            box-sizing: border-box;
 
+        }
 
+        /* 
+            盒模型
 
+            1.标准盒模型 box-sizing:content-box;
 
+                width = content(内容宽度) + padding +border
 
+                height = content(内容高度) + padding +border
 
+
 
+
 
+            2.怪异盒模型(IE盒模型) box-sizing:border-box;
 
+                width = content(内容宽度+ padding +border) 
+                height = content(内容高度+ padding +border) 
+
 
+        */
 
+    </style>
 
+</head>
 
+<body>
 
+    <div></div>
 
+</body>
 
+</html>