h5c3

最新推荐文章于 2024-02-22 16:37:47 发布

℡清欢

最新推荐文章于 2024-02-22 16:37:47 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/weixin_44695219/article/details/89527802

版权

    <style>
        /*==============伪类选择器*/
        /*  !*找到所有同级元素，同级元素中第一个是p标签，设置样式*!
          p:first-of-type{
                 background-color:pink;
             }
          p:last-of-type{
              background-color:green;
          }*/
        /*
                !*找到父元素中所有的子元素，如果第一个子元素是p标签，那么就设置样式*!
                p:first-child{
                    font-size:22px;
                }

                p:last-child{
                    color:red;
                }
                !*先找到父元素中所有的子元素，在找到第一个子元素，再找到第一个子元素是p标签，*!
                p:nth-child(1){
                    background-color:pink;
                }*/

        .uu li:nth-child(1) {
            background-color: pink;
        }

        .uu li:nth-child(2) {
            background-color: greenyellow;
        }

        .uu li:nth-child(3) {
            background-color: lightblue;
        }

        .uu li:nth-child(4) {
            background-color: orange;
        }

        p:not(.cls){
            color:orange;
        }
      /*  !*==============伪元素选择器*!
        !*先找到所有的p标签，再找到p标签中的第一个字符*!
        p::first-letter{
            font-size:33px;
        }

        !*在p标签里 最后添加元素，默认span *!
        p::after{
            content:'先给自己打个气';
            display: block;
            width:200px;
            height: 50px;
            background-color: yellowgreen;
        }
        p::before{
            content:'燃烧我的卡路里'
        }
        p::first-line{
            background-color: purple;
        }
        p::selection{
            color:blue;
            background-color:gold;
        }*/

        /*先找到p标签，再找到p标签中有class属性的p标签*/
        p[class]{
            background-color:pink;
        }
        /*先找到p标签，再找到p标签中有class属性='cls'的p标签*/
        p[class='cls']{
            font-size:22px;
        }
        /*先找到p标签，在找到p标签中有class属性以'cls'开头的p标签*/
        p[class^='cls']{
            color:red;
        }
        p[class$='1']{
            font-size:66px;
        }
        /*先找到p标签，在找到p标签中有class属性 属性值包括cls 的所有的p标签*/
        p[class*='cls']{
            font-weight: 700;
        }

    </style>
</head>
<body>
<div>

    <p class="cls">div中的第一个pdiv中的第一个pdiv中的第一个pdiv中的第一个pdiv中的第一个pdiv中的第一个pdiv中的第一个pdiv中的第一个pdiv中的第一个pdiv中的第一个pdiv中的第一个pdiv中的第一个pdiv中的第一个pdiv中的第一个p</p>
    <p>div中的第二个p</p>
    <div>
        <span>儿子div中的第一个span</span>
        <p class="hhcls">儿子div中的第一个p</p>
    </div>
</div>
<p class="cls1">div的兄弟p1</p>
<p class="p1">div的兄弟p2</p>
<span>div的兄弟span</span>

<ul class="uu">
    <li>第1个li</li>
    <li>第2个li</li>
    <li>第3个li</li>
    <li>第4个li</li>
</ul>
</body>

凹凸文字:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: #ccc;
        }

        div {
            color:#ccc;
            font: 700 66px '微软雅黑';
        }
        div:first-child{
            /*凸出来的文字*/
            /*text-shadow:水平偏移量 垂直偏移量 模糊距离 阴影颜色*/
            text-shadow:2px 2px 5px #000,-2px -2px 5px #fff;
        }
        div:last-child{
            /*立体的文字*/
            text-shadow:2px 2px 1px #fff,-2px  -2px 1px #000;
        }

    </style>
</head>
<body>
<div>咱也不知道，咱也不敢问</div>
<div>燃烧我的卡路里</div>

背景样式:

<style>
        div{
            width:200px;
            height:100px;
            border:20px dashed red;
            padding:50px;
            background-image:url(images/cai.png);
            background-repeat:no-repeat;
            background-position:0 0;
            /*设置图片从盒子的哪个位置开始显示*/
            background-origin:border-box;
            /*设置背景图片从那个地方以外开始裁剪*/
            background-clip:border-box;
            /*设置背景图片的大小:
            ①普通长度（水平长度，垂直高度）
            ②百分比（宽度占盒子的百分比，高度占盒子的百分比）
            ③auto：背景图片自适应
            ④cover:等比缩放背景图片完全覆盖住盒子，有可能背景图片会超过盒子
            ⑤contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。 */
            background-size:contain;
            /*背景的综合使用：排名不分先后顺序，注意：背景图片尽量放在第一个*/
            /*background:url('images/cai.png') no-repeat 0 0 /100% 50% green border-box padding-box;*/
            /*渐变的起始位置， 起始颜色， 结束颜色*/
            /*background:-webkit-linear-gradient(right top,red,blue);*/
            background:-webkit-Radial-gradient(yellow,red);
        }
    </style>
</head>
<body>
<div></div>
</body>

过渡动画:

<style>
        div{
            width: 200px;
            height:200px;
            background-color:pink;
            /*过渡：要过渡的属性 过渡的时间 运动曲线 何时开始*/
            /*transition: width 2s,height 3s;*/
            transition:all 2s cubic-bezier(.17,.67,.83,.67) 2s ;
            /*贝塞尔曲线：cubic-bezier(.17,.67,.83,.67)，建议下去研究一下*/
        }
        div:hover{
            width:400px;
            height:400px;
        }

    </style>
</head>
<body>
<div></div>
</body>

2d变形:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:200px;
            height:200px;
            background-color:pink;
            margin:100px auto;
            transition:all 2s;
            /*变形的原点: 缩放原点  旋转原点*/
            transform-origin:left top;
        }
        div:hover{
            /*2d变形=====1.位移
                    ①translate（水平偏移量，垂直偏移量）
                    ②translateX(偏移量) translateY(偏移量)*/

            /*transform:translate(100px,100px);*/
            /*transform:translateX(-100px);*/

            /*2d变形=====2.缩放
                    scale(水平缩放值，竖直缩放比例（小数）)
                    也可以设置一个值，水平垂直等比缩放*/
            /*transform:scale(2);*/

            /*2d变形=====3. 旋转*/
            /*transform:rotate(45deg);*/

            /*2d变形====4.倾斜*/
            transform:skew(30deg,30deg);


        }
    </style>
</head>
<body>
<div></div>
</body>

3d变形:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            text-align:center;
            padding-top:50px;
            /*呈现3d的效果*/
            transform-style:preserve-3d;
            /*透视效果：近大远小*/
            perspective:1000px;


        }
        img{

            transition:all 2s;
        }
        img:hover{
            transform:rotateX(180deg);
            /*transform:rotateY(45deg);*/
            /*transform:translateZ(10px);*/
            /*transform:translate3d(100px,100px,100px);*/
            backface-visibility:hidden;
        }
    </style>
</head>
<body>
<div>
    <img src="images/cai.png">
</div>
</body>