千峰JAVA逆战班Day45

最新推荐文章于 2024-10-18 18:01:20 发布

真的要穿格子衫吗

最新推荐文章于 2024-10-18 18:01:20 发布

阅读量117

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/hsee2006/article/details/105278197

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Day45

*CSS部分（三）

I. 浮动：（什么是标椎文档流：就是行内元素在行内从左到右有序排列，块级元素都会独占一行，从上到下有序排列。）

        .box{
            height: 500px;
            width: 500px;
            background-color: #e3e3e3;
        }
        .box1{
            height: 100px;
            width: 100px;
            background-color: red;
            /* 浮动会脱离标椎文档流 */
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: #a35f23;
        }

在这里插入图片描述

案例： 导航图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            height: 50px;
            width: 605px;
            line-height: 50px;
            text-align: center;
            /* 上下值100px 左右值为auto，则会自动调整左右两边一样，也就是居中 */
            margin: 100px auto;
        }
        div li {
            border-right: 1px solid white;
            list-style: none;
            float: left;
        }
        div li:last-child{
            border-right: 0;
        }
        div li a{
            text-decoration: none;
            display: inline-block;
            width: 100px;
            height: 50px ;
            color: white;
            background-color: #51b7ec;
        }
        div li a:hover{
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><a href="#">java</a></li>
            <li><a href="#">java</a></li>
            <li><a href="#">java</a></li>
            <li><a href="#">java</a></li>
            <li><a href="#">java</a></li>
            <li><a href="#">java</a></li>
        </ul>
    </div>
</body>
</html>

II. 定位：

1）相对定位：相对定位是的参考物为盒子上一次所在的位置。作用为：微调元素

        .box1{
            width: 100px;
            height: 100px;
            background-color: #a35f23;
            position: relative;
            left: 100px;/* 相对之前的位置，往右边移动100个像素 */
            top: 100px; /** 相对之前的位置，往下边移动100个像素 */
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
        }

在这里插入图片描述

2）绝对定位：绝对定位的参考物为浏览器的边框

/* 对上面的box1进行更改，移动后如下图 */
position: absolute; /* 绝对定位会脱离标椎文档流 */
right: 100px;

在这里插入图片描述
3）相对定位和绝对定位配合使用：子绝父相(子盒子绝对定位，父盒子相对定位，此时子盒子的参考物为父盒子)

        .father{
            width: 200px;
            height: 200px;
            background-color: #97A9B9;
            position: relative;
        }
        .son{
            width: 50px;
            height: 50px;
            background-color: red;
            /* 这里的绝对定位的参考系是父盒子 */
            position: absolute;
            top: 50px;
            left: 75px;
        }

在这里插入图片描述

III. css3样式

1）渐变

       /*  线性渐变色  */
            width: 100px;
            height: 100px;
            margin-left: 50px;
            margin-top: 50px;
            /* 第一个值表示渐变方向：to left/right/top/bottom
            第二个值：最开始的颜色
            最后一个值：最终的颜色
            中间相加多少个颜色都可以
             */
            background-image: linear-gradient(to right,white,gray,black);

2）阴影

            /* 阴影：第一个值：水平宽度
            第二个值：垂直宽度
            第三个值：羽化值
            第四个值：阴影的颜色
             */
            box-shadow: 3px 3px 5px gray;

3）状态变化：常用的有三种：rotate、scale、translate

            /*  旋转 20deg表示顺时针旋转的度数  */
            transform: rotate(20deg);
            /*  按比例放大或缩小：0.6表示为原盒子的0.6倍  */
            transform: scale(0.6);
            /* 偏移：第一个值：沿x轴正方向偏移的长度
             第二个值：沿y轴正方向偏移的长度
             */
            transform: translate(5px,5px);