测试开发11---Web前端技术---CSS编程实例

初遇我ㄖ寸の热情呢？

已于 2024-01-14 12:21:42 修改

阅读量17

点赞数

分类专栏：【测试开发】Django+Vue实现接口测试平台文章标签： python django

于 2022-04-14 18:28:30 首次发布

本文链接：https://blog.csdn.net/qq_37615098/article/details/115695610

版权

【测试开发】Django+Vue实现接口测试平台专栏收录该内容

47 篇文章 0 订阅

订阅专栏

1.元素选择器（上）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器-普通选择器</title>
    <style>
        /*******************以下是标签选择器1/2/3********************/
        /* span标签选择器（1），字体颜色为红色 */
        span {
           color: red;
        }

        /* ul 标签选择器（2），去掉列表前面的小圆点 */
        ul {        
            list-style: none; /* 去掉无序列表前的小圆点 */
        }

        /* a标签选择器（3），去掉超链接的下划线 */
        a {
            /* 去掉超链接的下划线 */
            text-decoration: none;
        } 

        /*******************4.以下是ID选择器********************/
        #part1 {
            color: blue;
        }

        /*******************5/6/7.以下是样式选择器********************/
        .success {
            color: pink;
        }
        .spec {
            font-weight: bold;
        }
        
        
        /*******************8.以下是原子类举例********************/
        .f12 {
            font-size: 12px;
        }
        .f14 {
            font-size: 14px;
        }
        .f16 {
            font-size: 16px;
        }

        .color-red {
            color: red;
        }
        .color-blue {
            color: blue;
        }
        .color-pink {
            color: pink;
        }
    </style>
</head>
<body>
    <!-- 1.标签选择器（一） -->
    <h2>选择span标签</h2>
     <div>
        <p>一分耕耘一分收获，</p>
        <span>未必！</span>
        <p>九分耕耘一分收获，</p>
        <p><span>一定。</span></p>
     </div>  

     <!-- 2.标签选择器（二） -->
     <h2>相思（去掉小圆点）</h2>
     <ul >
         <li>红豆生南国</li>
         <li>春来发几枝</li>
         <li>愿君多采撷</li>
         <li>此物最相思</li>
     </ul>

    <!-- 3.标签选择器（三）     -->
     <h2>超链接（去掉下划线）</h2>
     <div>
         <a href="">百度一下</a>
     </div>

     <!-- 4.ID选择器 -->
     <h2>ID选择器</h2>
     <p id="part1">这里是第一部分内容</p>

     <!-- 5.Class选择器 -->
     <h2>Class选择器</h2>
     <p class="success">
        操作成功！
     </p>

     <!-- 6.多标签同一Class -->
    <h2>多个标签同一个class</h2>
    <p class="success">操作成功！</p>
    <ul>
         <li>张三</li>
         <li class="success">李四</li>
    </ul>
    <div>
         <span class="success">身无彩凤双飞翼，心有灵犀一点通</span>
    </div>

    <!-- 7.同一标签多个Class -->
    <h2>同一标签多个class</h2>
    <p class="success spec">
        操作成功！
    </p>

    <!-- 8.使用原子类 -->
    <p class="f14 color-blue">长大后，我就称了你...</p>
    


<br>
<br>
<br>

</body>
</html>

在这里插入图片描述

2.元素选择器（中）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器-复合选择器</title>
    <style>
        
        /*******************1.以下是【复合选择器-后代选择器】举例1/2/3*****************/
        .list li {
            color:red;
        }

        .list ul li .top span {   /*选择好几代*/
            color:red;
        }

        /*******************4.以下是【复合选择器-交集选择器】举例********************/
        span.spec {
            font-size: 28px;
        }

        /*******************5.以下是【复合选择器-并集选择器】举例********************/
        p, ul {
            padding: 0px;
            margin: 0px;
        }
     
    </style>
</head>
<body>
    <!-- 1.后代选择器 -->
    <h2>古代四大美女</h2>
    <ul class="list">   <!--父-->
        <li>西施</li>   <!--子-->
        <li>王昭君</li>
        <li>貂蝉</li>
        <li>杨玉环</li>
    </ul>

    <!-- 2.后代选择器-不一定是儿子 -->
    <h2>还是古代四大美女</h2>
    <div class="list">       <!--父-->
        <ul>                 
            <li>西施</li>    <!--孙子-->
            <li>王昭君</li>
            <li>貂蝉</li>
            <li>杨玉环</li>
        </ul>
    </div>
    
    <!-- 3.后代选择器-好几代 -->
    <h2>还是古代四大美女</h2>
    <div class="list">                          <!--父-->
        <ul>                                    <!--子-->
            <li>                                <!--孙-->
                <p class="top">                 <!--曾孙-->
                    <span>西施</span>(之首)      <!--玄孙-->
                </p>
            </li>
            <li>王昭君</li>
            <li>貂蝉</li>
            <li>杨玉环</li>
        </ul>
    </div>

    <!-- 4.交集选择器 -->
    <h2>交集选择器</h2>
    <p>
        世界加油！
        <span class="spec">中国加油！</span>
    </p>
    
    <!-- 5.并集选择器(用并集选择器，设置p,ul标签的margin/padding)-->




<br>
<br>
<br>

</body>
</html>

在这里插入图片描述

3.元素选择器（下）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器-关系选择器及属性选择器</title>
    <style>
       /* 1.子选择器，仅选择儿子。和空格不同 */
       div>a{
          color:blue;
       }
       /* 2.相邻兄弟选择器 */
       img+p{
           background:pink;
       }
       /* 3.通用兄弟选择器*/
       p~span{
           background: yellow;
       }
       /* 4.属性选择器 */
       input[name="username"]{
           color: red;
       }

    </style>
</head>
<body>
    <!-- 1.【关系选择器-子选择器】 -->
    <div>
        <p><a href="">点我啊1</a></p>
        <a href="">点我啊2</a>
    </div>

    <!-- 2.【关系选择器-相邻兄弟选择器】 -->
    <div>
        <img src="image/fj.png" width="100px">
        <p>远亲不如近邻啊！</p>
        <p>远亲真不如近邻啊！</p>
    </div>    

    <!-- 3.【关系选择器-通用兄弟选择器】 -->
    <div>
        <p>第一段落</p>
        <span>冬天过去了</span>
        <span>春天还会远吗</span>
    </div>
    
    <!-- 4.属性选择器，input标签的name属性=username的，字体红色 -->
    <div>
        用户名：<input type="text" name="username" id="">
        密码:<input type="text" name="password" id="">
    </div>


<br>
<br>
<br>

</body>
</html>

在这里插入图片描述

4.伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素</title>
    <style>
        /* 1.在a标签的内容的前面，添加一个三角形 */
        a::before {
            content: "🔺";
        }

        p::after{
            content: "！";
        }
       

    </style>

</head>
<body>
    <!-- 伪元素1 -->
    <a href="">超链接1</a>
    <a href="">超链接2</a>
    <a href="">超链接3</a>

    <!-- 伪元素2 -->
    <p>此地无银三百两</p>
    <p>隔壁王二不曾偷</p>

</body>
</html>

在这里插入图片描述
5.颜色的4种表示方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色的四种表示法</title>
    <style>
        /*
            color 属性可设置文本内容的前景色
            color 属性值表示方法有四种：英语单词、十六进制、rgb()、rgba()
            1.英语单词表示法，仅用于学习时临时设置颜色，在工作中，由于追求精确，基本上不用该表示法
            2.十六进制表示法，是所有设计软件中通用的颜色表示法，十六进制ff就是十进制的255，每种颜色分量都是0~255的数字
              如果颜色值是 #112233 的形式，可以简写为：#123
            3.rgb() 表示法格式为：color:rgb(xxx,xxx,xxx);
            4.rgba() 表示法是在rgb()表示法的基础上，后面添加一个表示透明度的参数，值介于0~1之间，0表示纯透明，1表示纯实心

        */

        /* 1.颜色英文表示法 */
        .c1 {
           color: red;
        }
        /* 2.颜色十六进制表示法 */
        .c2 {
           color: #ff00bb;   /*可以简写为：f0b*/
        }
        /* 3.颜色rgb()表示法 */
        .c3 {
           color: rgb(255,0,183);
        }
        /* 4.颜色rgba()表示法 */
        .c4 {
           color: rgb(255,0,183,0.5);
        }

    </style>

</head>
<body>
    <h2>静夜思</h2>
    <p class="c1">床前明月光，</p>
    <p class="c2">疑是地上霜。</p>
    <p class="c3">举头望明月，</p>
    <p class="c4">低头思故乡。</p>

</body>
</html>

在这里插入图片描述
6.文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本样式</title>
    <style>
        /*
            font-size 属性用来设置文本字号，单位通常是px。此外还有：em、rem等单位
            font-weight 属性设置字体的粗细程度，用的最多的通常是：normal 和bold 两个值
            font-style 属性用于设置字体的倾斜，取值：italic（倾斜）、normal（不倾斜）
            font-family 属性用于设置文本的字体，可以同时设置多个，后面的是备胎，
            text-decoration 属性用于设置文本的修饰线（下划线、删除线），取值：underline（下划线）、line-through（删除线）

        */

        p {
           font-size: 32px;
           font-weight: bold;/*加粗*/
           font-style: italic;/*倾斜*/
           font-family: "宋体";/*字体  Arial  "Times New Roman"  "宋体"  */
           text-decoration: underline;/*下划线*/
        }


    </style>

</head>
<body>
    <h2>静夜思</h2>
    <p>床前明月光，</p>
    <p>疑是地上霜。</p>
    <p>举头望明月，</p>
    <p>低头思故乡。</p>

</body>
</html>

在这里插入图片描述
7.段落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落</title>
    <style>
        /*
            段落：一般有段落缩进、行高
            如果设置行高=盒子高度，则可实现单行文本的垂直居中
        */

        /* 1.设置缩进 */
        p,div {
           height: 50px;
           text-indent: 2em;
           border: pink solid 1px;
        }

        /* 2.定义行高(如果设置行高=盒子高度，则可实现单行文本的垂直居中) */
        .lh50 {
           line-height: 50px;
        }
       

    </style>

</head>
<body>
    <h2>静夜思1</h2>
    <p>床前明月光，</p>
    <p class="lh50">疑是地上霜。</p>
    <p>举头望明月，</p>
    <p>低头思故乡。</p>

    <h2>静夜思2</h2>
    <div>床前明月光，</div>
    <div class="lh50">疑是地上霜。</div>
    <div>举头望明月，</div>
    <div>低头思故乡。</div>

</body>
</html>

在这里插入图片描述
8.盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4.盒模型</title>
</head>
<style>
    /*
        盒模型：所有的HTML标签，都可以看成矩形的盒子，由宽度、高度、padding、border构成，称为：盒模型
    */

    /* 没有设置box-sizing属性。盒子的宽度就是220 */
    .box1 {
        width: 220px;
        height: 220px;
        padding: 30px;
        border: 30px solid red;
        margin: 60px;
    }

    
   /*如果设置了box-sizing属性=border-box，盒子的宽度则包含了padding 和 border   */
    .box2 {
        box-sizing: border-box;
        width: 220px;
        height: 220px;
        padding: 30px;
        border: 30px solid red;
        margin: 60px;
    }
  
    /*如果设置了box-sizing属性=inherit，规定应从父元素继承 box-sizing 属性的值。 */
    .box3 {
        box-sizing: inherit;
        width: 80px;
        height: 80px;
        padding: 10px;
        border: 10px solid red;
        margin: 0px;
    }

</style>
<body>

    <!-- 盒模型1：没有设置box-sizing属性。盒子的宽度就是220 -->
    <div class="box1">
        220*220
    </div>
    
    <!-- 盒模型2：设置了box-sizing属性=border-box，盒子的宽度则包含了padding 和 border -->
    <div class="box2">
        100*100
    </div>

    <!-- 盒模型3：设置了box-sizing属性=padding-box，盒子的宽度则包含了padding -->
    <div class="box2">
        <div class="box3">
            40*40
        </div>
    </div>

    

</body>
</html>

在这里插入图片描述
9.padding的四个方向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>padding的四个方向</title>
    <style>
        /*
          padding 的定义：padding 是盒子的内边距，即盒子边框内壁到文字的距离
          margin 的定义：是盒子的外边距，即盒子和盒子之间的距离（最后顺便讲一下）
        */

        /* 四值表示法 (上、右、下、左) */
        .box1 {
            padding: 50px 50px 50px 50px;
        }
        
        /* 三值表示法  (上、左右、下) */
        .box2 {
            padding: 50px 50px 50px;
        }
        /* 二值表示法 (上下、左右) */
        .box3 {
            padding: 50px 50px;
        }
        /* 一值表示法 (四周) */
        .box4 {
            padding: 50px;
        }
        /* 最小属性法 */
        .box5 {
            padding-top: 50px;
            padding-left: 50px;
            padding-right: 50px;
            padding-bottom: 50px;
        }


        div {
            border: 30px pink solid;
            width: 250px;
            height: 250px;
            margin-top:30px;
            overflow:hidden;  
        }

    </style>
</head>
<body>
    <div class="box1">1.北国风光，千里冰封，万里雪飘。望长城内外，惟馀莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红妆素裹，分外妖娆。江山如此多娇，引无数英雄竟折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汉，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。</div>
    <div class="box2">2.北国风光，千里冰封，万里雪飘。望长城内外，惟馀莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红妆素裹，分外妖娆。江山如此多娇，引无数英雄竟折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汉，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。</div>
    <div class="box3">3.北国风光，千里冰封，万里雪飘。望长城内外，惟馀莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红妆素裹，分外妖娆。江山如此多娇，引无数英雄竟折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汉，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。</div>
    <div class="box4">4.北国风光，千里冰封，万里雪飘。望长城内外，惟馀莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红妆素裹，分外妖娆。江山如此多娇，引无数英雄竟折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汉，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。</div>
    <div class="box5">5.北国风光，千里冰封，万里雪飘。望长城内外，惟馀莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红妆素裹，分外妖娆。江山如此多娇，引无数英雄竟折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汉，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。</div>

</body>
</html>

在这里插入图片描述
10.margin塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin塌陷</title>
    <style>
        /*
           竖直方向的margin有塌陷现象。即：margin不叠加，小的margin会塌陷到大的margin中，以大的为准。
        */
        div {
            border: 30px pink solid;
            width: 250px;
            height: 250px;
            overflow:hidden;  
        }
        .box1 {
            margin-bottom: 50px;
        }
        .box2 {
            margin-top: 100px;
        }
    </style>
</head>
<body>

    <div class="box1">1.北国风光，千里冰封，万里雪飘。望长城内外，惟馀莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红妆素裹，分外妖娆。江山如此多娇，引无数英雄竟折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汉，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。</div>
    <div class="box2">2.北国风光，千里冰封，万里雪飘。望长城内外，惟馀莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红妆素裹，分外妖娆。江山如此多娇，引无数英雄竟折腰。惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。一代天骄，成吉思汉，只识弯弓射大雕。俱往矣，数风流人物，还看今朝。</div>
   
</body>
</html>

在这里插入图片描述
11.块级元素和行内元素互转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级函数、行内元素互转</title>
    <style>
        /* 
            display 属性规定元素应该生成的框的类型，因此可以用它来进行块级元素和行内元素转换

        */
        a,span {
            display: block; /*行内元素转块级元素*/
            width: 200px;   /*可以设置宽高了*/
        }

        p,div {
            display: inline;/*块级元素转换为行内元素*/
        }
       
    </style>
</head>
<body>
    
    <h2>1.以下a、span、元素转换为块级元素了（不并排显示了）</h2>
    <a href="www.baidu.com">到百度</a>
    <a href="www.google.com">到谷歌</a>
    <span>你好，</span>
    <i>天猫</i>
    
    <hr>
    
    <h2>2.以下p、h元素转换为行内元素了(可以并排显示)</h2>
    <p>贵州茅台</p>
    <div>不错</div>
    
</body>
</html>

在这里插入图片描述
12.浮动是用来实现并排的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动1</title>
<style>
    /*
        浮动是用来实现并排的，本例：实现三个块级元素（div）能够并排显示。
    */
    .box {
        width: 1000px; /*父盒子要有足够的宽度，否则浮动会掉下去*/
        border:blue 1px solid;
        margin: 20px;
        height: 100px;    /* 清除浮动方式1,后面会讲*/
    } 
    .box1 {
        width: 100px;
        height: 100px; 
        float: left;
        background-color: red;
    }
    .box2 {
        width: 100px;
        height: 100px; 
        float: left;
        background-color: blue;
    }
    .box3 {
        width: 800px;
        height: 100px; 
        float: right;
        background-color: yellow;
    }

</style>
</head>
<body>
        
    <div class="box">
        <div class="box1 ">div盒子1</div>
        <div class="box2 ">div盒子2</div>
        <div class="box3 ">div盒子3</div>
    </div>    

   
</body>
</html>

在这里插入图片描述
13.清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动2</title>
<style>
      /*
        浮动的目的：浮动是用来实现并排的，即：浮动是为了解决左边图片，右边文字的需求
        浮动的实现：子元素在父元素内浮动，只需要对子元素设置float: left/right 即可
        浮动可能会带来的问题：如果父元素不设置高度（有时候不好计算父元素的高度），子元素浮动后，会导致父元素高度塌陷变为0
        解决父元素高度塌陷变为0的方法，叫浮动清除（注意：是清除带来的问题，而不是删除浮动）。
        浮动清除的方法：
        方法1：设置父元素的高度
        方法2：给父元素添加：overflow:hidden; 样式
        方法3：在父元素内，添加冗余元素：clear:both;
    */
    .box {
        width: 1000px;
        border:blue 1px solid;
        margin: 20px;
        height: 100px;    /* 清除浮动方式1*/
        overflow:hidden;  /* 清除浮动方式2*/
    } 
    .box1 {
        width: 100px;
        height: 100px; 
        float: left;
        background-color: red;
    }
    .box2 {
        width: 100px;
        height: 100px; 
        float: left;
        background-color: blue;
    }
    .box3 {
        width: 800px;
        height: 100px; 
        float: right;
        background-color: yellow;
    }
    /* 清除浮动方式3 */
    .clear {
        clear:both;
    }

  

</style>
</head>
<body>
        
    <div class="box">
        <div class="box1 ">div盒子1</div>
        <div class="box2 ">div盒子2</div>
        <div class="box3 ">div盒子3</div>
        <div class="clear"></div>  <!--清除浮动方式3  -->
    </div>    

   
</body>
</html>

在这里插入图片描述
14.简单实现一个网页头部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动3</title>
<style> 
    .headerA {
        width: 1000px; 
        margin-top: 20px;
        overflow:hidden; 
    }
    .logo {
        float: left;
        width: 200px;
    }
    .title {
        float: left;
        width: 380px;
        margin-left: 20px;
        font-size: 24px;
        color:blue;
    }
    .search {
        float: left;
        width: 400px;
    }

    #navbar{
        overflow:hidden;
        margin-top:30px;
    }

</style>
</head>
<body> 
    <div class="headerA" style="">
        <img src="image/fj.png" class="logo" width="200px" height="80px">
        <h3 class="title">XX省XXXXXX管理系统</h3>
        <form class="search">
            <div>
                全文搜索：<input type="text">
                <input type="button" value="确定">
            </div>            
        </form>
    </div>

    <div id="navbar">
        导航区
    </div>

</body>
</html>

在这里插入图片描述
15.相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style> 

        /*
         相对定位：相对定位的元素，会在“老家留坑”，本质上仍然在原来的位置，只不过渲染在新的地方而已，
                  渲染的图像可以比喻成“影子”，不会对页面上的其他元素产生任何影响
         特点：它相对的是自己原来的位置。         
         使用场景：微调元素位置、用作绝对定位的参考盒子
        */
        * {
            padding: 0px;
            margin: 0px;
        }
        
       .box1 {
           border: 3px dashed #000;
           width: 150px;
           height: 150px;
       }

       .box2 {
           background-color: pink;
           width: 150px;
           height: 150px; 
       }

       .relative {
           position: relative;    /*相对定位*/
           top: 50px;
           left: 50px;
       }

    </style>
</head>
<body>
    
     <div class="box1">
         <div class="box2 relative">
             这个div相对于原来的位置偏移了
         </div>
     </div>
     <div class="box1">这个div不受到影响，内容只是被压盖</div>

</body>
</html>

在这里插入图片描述
16.绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style> 
        /*
            绝对定位：绝对定位的元素，会脱离标准文档流，释放自己原来的位置，对其他元素不会产生任何干扰，二是对它们进行压盖

            特点：正常情况下，绝对定位以浏览器作为基点

            使用场景：用来制作：压盖、遮罩效果、结合js实现动画
        */
        * {
            padding: 0px;
            margin: 0px;
        }
        
       .box1 {
           border: 3px dashed #000;
           width: 150px;
           height: 150px;
       }

       .box2 {
           background-color: pink;
           width: 150px;
           height: 150px; 
       }

       .absolute {
           position: absolute;/*绝对定位*/
           top: 50px;
           left: 50px;
       }

    </style>
</head>
<body>
    
     <div class="box1">老家没有留坑，这里可以写内容。
         <div class="box2 absolute">
           绝对定位
         </div>
     </div>
     <div class="box1">这个div不受到影响，内容只是被压盖</div>
</body>
</html>

在这里插入图片描述
17.子绝父相

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子绝父相</title>
    <style> 
        /*
           子绝父相
           绝对定位的盒子，会以自己祖先元素中，离自己最近的，拥有定位属性的盒子，作为基准点。
           这个盒子通常是相对定位的盒子，所以这个性质也叫做 “子绝父相”
        */
        * {
            padding: 0px;
            margin: 0px;
        }
        
       .box1 {
           border: 3px dashed #000;
           width: 150px;
           height: 150px; 
       }

       .box2 {
           background-color: pink;
           width: 150px;
           height: 150px; 
       }

       .ralative {
           position: relative;/*相对定位*/
       }
       .absolute {
           position: absolute;/*绝对定位*/
           top: 50px;
           left: 50px;
       }

    </style>
</head>
<body>
    
     <div class="box1">盒子1 </div>

     <div class="box1 ralative">
        <div class="box2 absolute">
            子绝父相
      </div>
    </div>
</body>
</html>

在这里插入图片描述
18.固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位</title>
    <style> 
        /*
            固定定位：不管页面如何滚动，它永远固定在那里。语法是：position: fixed;
            特点：固定定位只能以页面作为基准点，没有“子固父相”性质
            使用场景：返回顶部、楼层导航等
        */
        * {
            padding: 0px;
            margin: 0px;
        }

       .box2 {
           background-color: pink;
           width: 80px;
           height: 30px; 
       }
 
       .fixed {
           position: fixed;/*固定定位*/
           right: 50px;
           bottom: 50px;
       }

    </style>
</head>
<body>
    <div>
        <p >拉拉拉</p>
        <p >拉拉拉</p>
    </div>
    <div class="box2 fixed">
        返回顶部
    </div>
</body>
</html>

在这里插入图片描述

19.背景颜色及绘制区

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景绘制区</title>
    <style>
        /*
            background-color属性用来设置背景颜色，padding 区域，是有背景颜色的
            background-clip 属性，用来指定背景的绘制区域（俗称：背景裁剪）
                            border-box：背景绘制在边框及以内（默认）
                            padding-box：背景绘制在padding及以内
                            content-box：背景绘制在内容区

        */
        div {
            padding:35px;
        }
        /* 1. 背景绘制在边框及以内（默认） */
        #example1 {
            border: 10px dotted black;
            background-color: yellow;
            /* 默认：border-box*/
            /* background-clip:border-box; */  
        }
        /* 2. 背景绘制在padding及以内 */
        #example2 {
            border: 10px dotted black;
            background-color: yellow;
            background-clip: padding-box;
        }
        /* 3. 背景绘制在内容区 */
        #example3 {
            border: 10px dotted black;
            background-color: yellow;
            background-clip: content-box;
            background-size:10px 10px;
        }
    </style>
</head>
<body>
    <h1>背景裁剪</h1>
    <h2>1、background-clip:border-box（默认）</h2>
    <div id="example1">
        <p>背景绘制在边框及以内（默认）</p>
    </div>

    <h2>2、background-clip: padding-box</h2>
    <div id="example2">
        <p>背景绘制在padding及以内</p>
    </div>

    <h2>3、background-clip: content-box</h2>
    <div id="example3">
        <p>背景绘制在内容区</p>
    </div>
</body>
</html>

在这里插入图片描述
20.背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片及平铺</title>
    <style>
        /*
            background-image   属性用来设置背景图片，语法格式如下background-image: url(图片路径)
            background-repeat  背景平铺属性
                               1.repeat  表示xy都平铺（默认）
                               2.no-repeat  表示xy都平铺（默认）
                               3.repeat-x  表示xy都平铺（默认）
                               4.repeat-y  表示xy都平铺（默认）
            background-size    用来设置背景图片的尺寸，默认值为auto                   
        */
        div{
            height: 300px;
            padding:35px;
        }
        /* 1.默认x,y都平铺 */
        #example1 {
            border: 10px dotted black;            
            background-image: url(image/fj.png);      
            /* 默认repeat */
            /* background-repeat: repeat; */
        }
        /* 2.不平铺 */
        #example2 {
            border: 10px dotted black;
            background-image: url(image/fj.png) ;
            background-repeat: no-repeat;
        }
        /* 3.x方向平铺 */
        #example3 {
            border: 10px dotted black;
            background-image: url(image/fj.png);
            background-repeat: repeat-x;
        }
        /* 4.y方向平铺 */
        #example4 {
            border: 10px dotted black;
            background-image: url(image/fj.png);
            background-repeat: repeat-y;
        }

        /* 5.背景图片大小 */
        #example5 {
            border: 10px dotted black;
            background-image: url(image/fj.png);
            background-repeat: no-repeat;
            background-size: 100px 100px;
        }

    </style>
</head>
<body>
    <h1>背景图片</h1>
    <h2>1、背景平铺</h2>
    <div id="example1"></div>

    <h2>2、背景不平铺</h2>
    <div id="example2"></div>

    <h2>3、x方向平铺</h2>
    <div id="example3"></div>

    <h2>4、y方向平铺</h2>
    <div id="example4"></div>

    <h2>5、图片大小</h2>
    <div id="example5"></div>

</body>
</html>

在这里插入图片描述

初遇我ㄖ寸の热情呢？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
测试开发11---Web前端技术---CSS编程实例

1.元素选择器（上）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择器-普通选择器</title> <style> /*****
复制链接

扫一扫