【CSS】sass与less，九宫格，轮播图，ios-checkbox，级联菜单

李小浦

已于 2023-11-27 15:21:11 修改

阅读量126

点赞数

分类专栏： # CSS 文章标签： 1024程序员节

于 2022-10-24 17:49:45 首次发布

本文链接：https://blog.csdn.net/partworld/article/details/127474184

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

❤️ Author：老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事乐观面对
😍 系列专栏：

文章目录

sass与less
- less和scss区别
- less/scss的使用
九宫格
根据元素数量调整布局效果(微信照片九宫格)
用后面元素覆盖前面元素实现控制前面的元素
：focus-within
轮播图
- 高级版本
ios-checkbox
级联菜单

sass与less

在这里插入图片描述

css选择器中会有一部分重复的，例如图片中的".menu"，于是就出现了less和sass，这个是将css语言进行了一个扩展，sass有很多功能，其中一个就是选择器的嵌套功能
但是:hover前面是不加空格的，所以前面要带上一个&连接符
Sass分为两种后缀：.sass语法：sass语法就是scss语法把所有的{}去掉，缩进不要去掉；.scss语法就是正常有大括号的
第二个语法就是用做变量，Sass前面加$符号，less前面加@
第三个是循环，sass循环@for $i from 1 to 100
第四个是@extend，想在div里面用上foo的样式

less和scss区别

1.less中，数学表达式2px * 3em = 6px在less中是合法的，单位就是第一个数字当作整个表达式的单位，后面表达式就不考虑单位的事情了，scss中这种表达式是不合法的
2. scss中的变量是$开头，less中的变量是@开头，虽然css中本来就存在 $符号的应用，例div[title $=“fdsf”],表示title属性以fdsf结尾的选择器，但是css中还有使用@开头的，@import “a.css"，这样也可以引入css文件，所以我认为scss的 $符号开头好一些。

less/scss的使用

第一种加scripe标签，然后style后面跟text/less

<!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 type="text/less">
    nav{
      li{
        display: inline-block;
        border : 2px solid;
        width : 100px;
        height : 50px;
        background-color: red;
      }
    }
  </style>
</head>

<body>
  <nav>
    <div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </nav>
</body>
<script src="https://cdn.jsdelivr.net/npm/less"></script>

</html>

第二种是通过link来实现，引用外部的less文件，这个只能在网页中打开

九宫格

子元素垂直方向上的padding可以将元素撑大
在css里面，padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候，参照的是父元素的宽度。

<!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>
    * {
      background-color: rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 0 1px red;
    }

    ul {
      padding: 0;
      margin: 0;
      list-style: none;
      font-size: 0;
    }

    ul li {
      display: inline-block;
      font-size: 16px;
      width: 33.33%;
    }

    ul li::after {
      content: '';
      display: block;
      padding-bottom: 100%;
    }

  </style>
</head>

<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>

</html>

根据元素数量调整布局效果(微信照片九宫格)

<!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>
    * {
      background-color: rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 0 1px red;
    }

    ul {
      padding: 0;
      margin: 0;
      list-style: none;
      font-size: 0;
    }

    ul li {
      display: inline-block;
      font-size: 16px;
      width: 33.33%;
    }

    ul li::after {
      content: '';
      display: block;
      padding-bottom: 100%;
    }

    ul li:first-child:nth-last-child(1) {
      width: 80%
    }

    ul li:first-child:nth-last-child(2),
    ul li:first-child:nth-last-child(2)~li {
      width: 50%;
    }

    ul li:first-child:nth-last-child(3),
    ul li:first-child:nth-last-child(3)~li {
      width: 33.33%;
    }

    ul li:first-child:nth-last-child(4),
    ul li:first-child:nth-last-child(4)~li {
      width: 25%;
    }

    ul li:first-child:nth-last-child(5),
    ul li:first-child:nth-last-child(5)+li {
      width: 50%;
    }

    ul li:first-child:nth-last-child(5)+li~li {
      width: 33.33%;
    }

  </style>
</head>

<body>
  <ul>
    <li></li>
  </ul>
</body>

</html>

用后面元素覆盖前面元素实现控制前面的元素

<!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>
    * {
      background-color: rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 0 1px red;
    }

    div {
      border: 5px solid;
      padding: 10px;
      position: relative;
    }

    input:focus {
      border: 3px solid red;
    }

    input:focus+span {
      /*让元素成为影子一样的，看得见摸不到*/
      pointer-events: none;
      position: absolute;
      top: -5px;
      bottom: -5px;
      left: -5px;
      right: -5px;
      border: 5px solid red;
    }

  </style>
</head>

<body>
  <div>
    <input type="text">
    <span></span>
  </div>
</body>

</html>

：focus-within

光标在div内部的时候，设置样式

<!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>
    * {
      background-color: rgba(0, 0, 0, 0.08);
      box-shadow: inset 0 0 1px red;
    }

    div {
      border: 5px solid;
      padding: 10px;
      position: relative;
    }
/*光标在div内部的时候，div的样式*/
    div:focus-within {
      border-color: red;
    }

    input:focus {
      border: 3px solid red;
    }

  </style>
</head>

<body>
  <div>
    <input type="text">
  </div>
</body>

</html>

轮播图

<!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>
    div {
      position: relative;
      width: 400px;
      height: 300px;
    }

    div img {
      xdisplay: none;
      height: 100%;
      width: 100%;
      /*opacity是设置透明度的*/
      opacity: 0;
      transition: 1s;
      position: absolute;
    }

    input:nth-child(1):checked~div img:nth-child(1) {
      xdisplay: block;
      opacity: 1;
    }

    input:nth-child(2):checked~div img:nth-child(2) {
      display: block;
      opacity: 1;
    }

    input:nth-child(3):checked~div img:nth-child(3) {
      display: block;
      opacity: 1;
    }

    input:nth-child(4):checked~div img:nth-child(4) {
      display: block;
      opacity: 1;
    }

  </style>
</head>

<body>
  <section>
    <input type="radio" name="radio1">
    <input type="radio" name="radio1">
    <input type="radio" name="radio1">
    <input type="radio" name="radio1">

    <div>
      <img
        src="https://travel.12306.cn/imgs/resources/uploadfiles/images/243945e6-c45d-4870-9cf5-77e488068646_product_W572_H370.jpg"
        alt="">
      <img
        src="https://travel.12306.cn/imgs/resources/uploadfiles/images/fcd7173f-7651-46e7-a126-bdc199e1f6f7_product_W572_H370.jpg"
        alt="">
      <img
        src="https://travel.12306.cn/imgs/resources/uploadfiles/images/b0c76b21-531b-4af4-a607-cf5672c72ded_product_W572_H370.jpg"
        alt="">
      <img
        src="https://travel.12306.cn/imgs/resources/uploadfiles/images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg"
        alt="">
    </div>
  </section>
</body>

</html>

高级版本

<!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>
    section {
      position: relative;
    }

    .imgs {
      position: relative;
      width: 400px;
      height: 300px;
    }

    .imgs img {
      xdisplay: none;
      height: 100%;
      width: 100%;
      /*opacity是设置透明度的*/
      opacity: 0;
      transition: 1s;
      position: absolute;
    }

    .indicators {
      position: absolute;
      bottom: 10px;
      left: 10px;
      z-index: 8;
      font-size: 0;
    }

    .indicators label {
      margin: 3px;
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: grey;
      cursor: pointer;
    }

    .indicators label:hover {
      background-color: red;
    }

    input:nth-child(1):checked~.imgs img:nth-child(1),
    input:nth-child(2):checked~.imgs img:nth-child(2),
    input:nth-child(3):checked~.imgs img:nth-child(3),
    input:nth-child(4):checked~.imgs img:nth-child(4) {
      display: block;
      opacity: 1;
    }

    input:nth-child(1):checked~.indicators label:nth-child(1),
    input:nth-child(2):checked~.indicators label:nth-child(2),
    input:nth-child(3):checked~.indicators label:nth-child(3),
    input:nth-child(4):checked~.indicators label:nth-child(4) {
      background-color: red;
    }

    section input {
      position: relative;
      top: 300px;
      z-index: 8;
      display: none;
    }

  </style>
</head>

<body>
  <section>
    <input type="radio" id="r1-1" name="radio1" checked>
    <input type="radio" id="r1-2" name="radio1">
    <input type="radio" id="r1-3" name="radio1">
    <input type="radio" id="r1-4" name="radio1">

    <div class="indicators">
      <label for="r1-1"></label>
      <label for="r1-2"></label>
      <label for="r1-3"></label>
      <label for="r1-4"></label>
    </div>

    <div class="imgs">
      <img
        src="https://travel.12306.cn/imgs/resources/uploadfiles/images/243945e6-c45d-4870-9cf5-77e488068646_product_W572_H370.jpg"
        alt="">
      <img
        src="https://travel.12306.cn/imgs/resources/uploadfiles/images/fcd7173f-7651-46e7-a126-bdc199e1f6f7_product_W572_H370.jpg"
        alt="">
      <img
        src="https://travel.12306.cn/imgs/resources/uploadfiles/images/b0c76b21-531b-4af4-a607-cf5672c72ded_product_W572_H370.jpg"
        alt="">
      <img
        src="https://travel.12306.cn/imgs/resources/uploadfiles/images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg"
        alt="">
    </div>

  </section>
</body>

</html>

ios-checkbox

<!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>
    input {
      display: none;
    }

    input:checked+.outer>.inner {
      margin-left: 50px;
    }

    input:checked+.outer {
      border-color: #30f34a;
      box-shadow: inset 0 0 0 30px #30f34a;
    }

    .outer {
      background-color: white;
      display: inline-block;
      width: 100px;
      height: 50px;
      padding: 3px;
      border: 3px solid #cacaca;
      cursor: pointer;
      border-radius: 45px;
      transition: .3s;
    }

    .outer .inner {
      transition: .3s;
      width: 50px;
      height: 50px;
      display: inline-block;
      vertical-align: bottom;
      background-color: white;
      box-shadow: 1px 1px 5px black;
      border-radius: 45px;
    }

  </style>
</head>

<body>
  <label>
    <input type="checkbox">
    <span class="outer">
      <span class="inner"></span>
    </span>
  </label>
</body>

</html>

级联菜单

<!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>
    ul {
      background-color: grey;
      list-style: none;
      margin: 0;
      padding: 0;
      font-size: 0;
    }

    ul ul {
      position: absolute;
      left: 0;
      top: 100%;
    }

    ul ul ul {
      top: 0;
      left: 100%;
    }

    li ul {
      display: none;
    }

    li:hover>ul {
      display: block;
    }

    li {
      position: relative;
      padding: 2px 8px;
      display: inline-block;
      font-size: 16px;
      white-space: nowrap;
    }

    li li {
      display: block;
    }

    li:hover {
      background-color: gold;
    }

  </style>
</head>

<body>
  <ul>
    <li>文件
      <ul>
        <li>新建
          <ul>
            <li>文本文档</li>
            <li>MD</li>
          </ul>
        </li>
        <li>新窗口</li>
        <li>打开</li>
        <li>保存</li>
        <li>打印</li>
      </ul>
    </li>
    <li>编辑</li>
    <li>格式</li>
    <li>查看</li>
  </ul>
</body>

</html>