从0开始学web-day14_此题为【从0开始学web】系列第十四题-CSDN博客

本文链接：https://blog.csdn.net/oxygen_ls/article/details/122647484

1.复习
day13复习
2.结构伪类选择器
:first-child 这个结构中的第一个一旦结构发生改变就会导致不生效
:first-of-type 这个类型的第一个选择精准度高

:last-child 这个结构中的最后一个一旦结构发生改变就会导致不生效
:last-of-type 这个类型的最后一个选择精准度高

:nth-child(n) 这个结构中的第几个 n可以写第几阿拉伯数字，从1开始写n代表所有 2n或者even代表偶数 2n+1或2n-1或odd代表奇数
:nth-of-type(n) 这个类型的第几个

:nth-last-child(n) 这个结构中倒数第几个
:nth-last-of-type(n) 这个类型的倒数第几个

:only-child 这个结构中自存在一个这个元素并且不能存在任何其他元素
:only-of-type 这个结构中这个类型的元素只存在一个
:empty 元素内容为空的时候
:root 根

3.百度导航

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            height: 50px;
            line-height: 50px;
            background: blue;
        }
        div a {
            float: left;
            text-decoration: none;
            width: 100px;
            color: #fff;
            text-align: center;
        }
        span {
            display: block;
            width: 100px;
            height: 50px;
            background: red;
            transition: 0.5s;
        }
        a:first-of-type {
            background: red;
        }
        a:hover ~ span {
            margin-left: 100px;
        }
        a:nth-child(3):hover ~ span {
            margin-left: 200px;
        }
        a:nth-child(4):hover ~ span {
            margin-left: 300px;
        }
        a:nth-child(5):hover ~ span {
            margin-left: 400px;
        }
        a:nth-child(6):hover ~ span {
            margin-left: 500px;
        }
        a:nth-child(7):hover ~ span {
            margin-left: 600px;
        }
        a:nth-child(8):hover ~ span {
            margin-left: 700px;
        }
        a:nth-child(9):hover ~ span {
            margin-left: 800px;
        }
        a:nth-child(10):hover ~ span {
            margin-left: 900px;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">首页</a>
        <a href="#">首页</a>
        <a href="#">首页</a>
        <a href="#">首页</a>
        <a href="#">首页</a>
        <a href="#">首页</a>
        <a href="#">首页</a>
        <a href="#">首页</a>
        <a href="#">首页</a>
        <a href="#">首页</a>
        <span></span>
    </div>
</body>
</html>

4.阴影属性

        盒子阴影 box-shadow
        box-shadow：水平偏移 垂直偏移 模糊半径 阴影的扩张位置 影音颜色 阴影位置（默认是外阴影 inset内阴影）

        文本阴影 text-shadow
        text-shadow : 水平偏移 垂直偏移 模糊半径

        阴影不会占据空间，阴影可以同时设置多个，中间用逗号隔开

5.圆角属性

圆角属性 border-radius
        如果宽度高度一致，写一个值 值是大于或等于宽高一半可以形成一个圆形 或者写50%也行
        可以设置
        一个值 代表上下左右都是这个值
        两个值 上下 左右
        三个值 上 左右 下
        四个值 上 右 下 左（顺时针）
        五个值 例如5px 10px 20px 25px/10px /前面代表x轴 水平 后边代表y轴 垂直
        六个值

6.背景图片
css3支持一个元素同时添加多张背景图片中间用逗号隔开
多张背景图注意使用顺序，谁写在前边谁在上边显示，大图写在最后
如果一个元素存在多张背景图片的同时存在背景颜色，背景颜色一定要放在最后的位置

7.背景相关属性
背景颜色可以出现在边框区域，如果背景图片默认水平垂直平铺，背景图片会出现在边框区域，是通过重复出现的，不平铺背景图片是不会出现在左边和上边边框区域的
background-clip背景的裁切位置border-box content-box padding-box
background-origin背景的绘制起点border-box content-box padding-box
background-size背景图片的尺寸
一个值等比例缩放将背景图片的宽度设置为给定值
两个值第一个代表图片的宽度第二个代表图片的高度
contain 等比例缩放宽度高度都不能缩放之后停止
cover 等比例缩放宽度高度有一个方向不能进行缩放就停止

8.背景的渐变

兼容前缀
            -webkit-谷歌 苹果
            -ms- ie
            -moz- 火狐
            -o- 欧朋
        背景渐变background或者background-image
            线性渐变
            径向渐变
     -->
     <!-- 线性渐变-webkit-linear-gradient -->
     <div></div>

     <!-- 径向渐变radial-gradient -->