CSS3复习+巩固（第三天）

最新推荐文章于 2024-07-24 20:47:06 发布

骑着鱼过海的猫

最新推荐文章于 2024-07-24 20:47:06 发布

阅读量108

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/qq_41911599/article/details/109612335

版权

CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

背景图片

background：背景颜色图片图片位置平铺方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图片</title>

    <style>
       div{
           width: 1000px;
           height: 700px;
           border: 1px solid red;
           /*默认是平铺*/
           background-image: url("imges/lolo.gif");

       }
       /*水平平铺*/
       .div1{
           background-repeat: repeat-x;
       }

       /*垂直平铺*/
       .div2{
           background-repeat: repeat-y;
       }

       /*不做任何操作*/
       .div3{
           background-repeat: no-repeat;
       }
    </style>

</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>

盒子模型及边框的使用

margin：外边距
padding：内边距
border：边框
在这里插入图片描述
盒子模型的计算：margin+border+padding+内容的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型及边框</title>

    <style>
        /* margin:0 auto 居中*/
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        /* border:粗细 线的样式 线的颜色
           solid:实线
           dashed:虚线
        */

        body{
            width: 300px;
            height: 120px;
            border:1px solid darkgrey;
        }

        h2{
            font-size: 18px;
            background-color: #0bb859;
            text-align: center;
        }

        form{
            background-color: grey;
        }

        form div{
            color: white;
        }

        form div:nth-of-type(1)>input{
            border: 2px solid red;
            margin-left: 20px;
        }

        form div:nth-of-type(2)>input{
            border: 2px solid red;
            margin-left: 20px;
        }

        form div:nth-of-type(3)>input{
            border: 2px dashed red;
            margin-left: 5px;
        }

    </style>

</head>
<body>
    <div id="box">
        <h2>会员登录</h2>
        <!--
        <form> 标签用于为用户输入创建 HTML 表单。
        表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等
        -->
        <form action="#">
            <div>
                <span>登录</span>
                <input type="text">
            </div>
            <div>
                <span>密码</span>
                <input type="text">
            </div>
            <div>
                <span>验证码</span>
                <input type="text">
            </div>
        </form>
    </div>
</body>
</html>

圆角边框及阴影

border-radius(边框)：左上右上右下左下
box-shadow(阴影)：x轴 y轴模糊距离阴影大小
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框及阴影</title>

    <style>
        /* border-redius:左上 右上 右下 左下
           顺时针
        */
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 50px 30px 20px;
        }

        /* */
        div:nth-of-type(2){
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 50px;
            box-shadow: 0px 10px 0px 0px yellow;
        }
    </style>

</head>

<body>
    <div></div>
    <div></div>
</body>
</html>

display和浮动

display：none | inline | block | inline-block
在这里插入图片描述

float(浮动)：
在这里插入图片描述

父级边框塌陷问题

未塌陷的图片：红色边框线为父类边框线，图片还未浮动。
在这里插入图片描述
塌陷：父级边框已塌陷，图片已浮动

解决方法：

增加父级元素的高度
增加一个空的div标签，清除浮动
父级元素增加overflow属性
在父类增加一个伪类 :after （推荐使用）

补充：
overflow属性：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父级边框塌陷</title>

    <!--
    clear（清除浮动）：left | right | both（二者）

    -->
    <style>
        #father{
            border: 1px solid red;
            /*方法1：增加父级元素的高度*/
            /*height: 1000px;*/

            /*方法3：增加overflow属性 */
            /*overflow: hidden;*/
        }

       /* 方法4：增加一个伪类*/

        #father:after{
            content: "";  /*增加空内容*/
            display:block; /* 变成块元素*/
            clear: both; /* 清除两边浮动*/
        }

        .test1{
            border: 1px dashed yellow;
            display: inline-block;
            float: left;
        }
        .test2{
            border: 1px dashed #77ff00;
            display: inline-block;
            float: right;
        }
        .test3{
            border: 1px dashed #00ffff;
            display: inline-block;
            float: left;
        }
        .test4{
            font-size: 12px;
            line-height: 20px;
            border: 1px dashed #6a00ff;
            display: inline-block;
            float: left;
        }

        /*
        方法2 增加一个空的div标签，清除浮动
        */
        /*.test5{
            margin: 0;
            padding: 0;
            clear: both;
        }*/

    </style>
</head>

<body>
    <div id="father">
        <div class="test1"><img src="img.png" alt=""></div>
        <div class="test2"><img src="img.png" alt=""></div>
        <div class="test3"><img src="lolo.gif" alt=""></div>
        <div class="test4">dbasjbdkjasbkdjbaskjdbkjashdbkjbaskjdbaksjdbkjasbdkjasdkjashkdhakjhka</div>
        <!--<div class="test5"></div>-->
    </div>
</body>
</html>

定位

相对定位

position: relative; 偏移后原来的位置会保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>

    <style>
        *{
            text-decoration: none;
        }
        #father{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            padding: 10px;
        }
        a{
            width: 100px;
            height: 100px;
            background-color: #ff00f2;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background-color: #000dff;
        }
        .a1{
            position: relative;

        }
        .a2{
            position: relative;
            top: -100px;
            left: 200px;
        }
        .a3{
            position: relative;
        }
        .a4{
            position: relative;
            top: -100px;
            left: 200px;
        }
        .a5{
            position: relative;
            top: -300px;
            left: 100px;
        }
    </style>

</head>
<body>
    <div id="father">
        <a href="" class="a1">链接1</a>
        <a href="" class="a2">链接2</a>
        <a href="" class="a3">链接3</a>
        <a href="" class="a4">链接4</a>
        <a href="" class="a5">链接5</a>
    </div>
</body>
</html>

绝对定位

没有父级元素定位的前提下，相对于浏览器定位
假设父级存在定位，通常会相对于父级元素进行偏移
父级元素的范围内移动
相对于父级或浏览器的位置，进行指定偏移，绝对定位，原来的位置不会保留

固定定位

position：fixed

补充

position属性值：
相对定位的值
opacity:设置背景透明度

骑着鱼过海的猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3复习+巩固（第三天）

背景图片background：背景颜色图片图片位置平铺方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>背景图片</title> <style> div{ width: 1000px; height: 700px; b
复制链接

扫一扫

专栏目录