• CSS结构选择器的使用

    结构选择器

      1. style>
      2.         ul li:first-child {//选出第一个孩子进行变色
      3.             background-color: blue;
      4.         }
      5.     
      6.     <ul>
      7.         <li>我是第1个孩子li>
      8.         <li>我是第2个孩子li>
      9.         <li>我是第3个孩子li>
      10.         <li>我是第4个孩子li>
      11.         <li>我是第5个孩子li>
      12.         <li>我是第6个孩子li>
      13.     ul>

    • 选择某个父元素的一个或多个特定的子元素

      1. nth-child(n) 
      2. ul li: nth-child(even) {//选偶数的孩子,选奇数就（odd)
      3.     background-color: #ccc;
      4. }

    • 直接写n则全选所有的孩子

      2.     <section>
      3.         <p>1p>
      4.         <div>2div>
      5.         <div>3div>
      6.     section>

    • 这里的前面后面是相对body里面的内容的左边和右边

      2.         <div>div>

    • 要使用图例的图案，需要给其方框添加声明，在style.css文件中，然后还要在放font文件放到，该根目录中

    • 接上边土豆的盒子的做法，

      1. .tudou {
      2.             position: relative;
      3.             width: 264px;
      4.             height: 140px;
      5.             background-color: pink;
      6.             margin: 0 auto;   
      7.         }
      8.        /* .hei {
      9.             display: none;
      10.             position: absolute;
      11.             top: 0;
      12.             left: 0;
      13.             width: 100%;
      14.             height: 100%;
      15.             background: rgba(0, 0, 0, .4);
      16.         }
      17.         */
      18.         .hei::before {
      19.            // display: none;
      20.            content: '';
      21.             position: absolute;
      22.             top: 0;
      23.             left: 0;
      24.             width: 100%;
      25.             height: 100%;
      26.             background: rgba(0, 0, 0, .4);
      27.         }
      28.        /* .tudou:hover .hei {
      29.             display: block;
      30.         } */
      31.          .tudou:hover::before {
      32.             display: block;
      33.     
      35. <body>
      36.     <div class="tudou">
      37.        // <div class="hei">div>
      38.         <img src="trans.png" alt="">
      39.     div>

    • 将黑屏幕设置仿元素后，用content设置隐藏层,

    • 清除浮动是插入的元素是块元素

    • 如果想将盒子加入padding和border不改变盒子的大小

    • box-sizing:context-box;

    • 让图片的越模糊

      1. img {
      2. //blur是一个函数小括号里面的数值越大，图片越模糊注意数值要加上px单位
      3.     filter: blur(5);
      4. }
      5. <body>
      6. <img src="图片的地址" alt="" >

    • 用公式将宽度进行删减

    • width: calc(100% - 30px);

    • 过度的语法：

      1. div {
      2.      width: 100%;
      3.      height: 100%;
      4.      background: rgba(0, 0, 0, .4);
      5.      //transition: 变化的属性 花费的时间 运动曲线 何时开始
      6.      transition: width .5s ease 1s , height .2 ease 2s;
      7. }
      8. div: hover {
      9.     width: 400px;
      10. }

    • 既想修改宽也想修改高，则在其后边添加逗号接上值即可，切勿另起transition。也可以这样修改

    • transition: all .3s;

  • 相关阅读:
    Unity Animation、Animator 的使用（超详细）
    VScode配置C语言【详细】
    如何使用html、css制作一个期末作业网站【羽毛球体育运动主题html网页设计】
    阿里云服务器的介绍和使用
    算子开发入门系列（一）
    SCHNOKA施努卡：电池模组回收铣削多功能一体机
    使用 Setter 方法实现 Spring 依赖注入
    Linux搭建文件服务器
    冷知识：SSD或U盘或FLASH闪存要温度高通电使用，温度低断电保存，数据才能更久不丢失！
    Go Exec 僵尸与孤儿进程
  • 原文地址：https://blog.csdn.net/Yyds12300/article/details/133825068