css 实现相关案例

i小杨

已于 2024-08-14 16:43:56 修改

阅读量340

点赞数

文章标签： css 前端 javascript

于 2023-10-06 14:34:44 首次发布

本文链接：https://blog.csdn.net/i_satan/article/details/133611217

版权

css 实现相关案例

抽屉案例(带吸附箭头)

<template>
  <div class="container">
    <div class="main-box">
      <div class="left-box">左边盒子</div>
      <!--下面两种方式皆可实现展示和隐藏  -->
      <div :style="{ flex: fontflag ? 1 : 0 }" class="right-box">
        <!-- <div :style="{ width: fontflag ? '300px' : 0 }" class="right-box"> -->
        <div class="right-content" v-if="fontflag">
          将需要<b>动态展示的内容</b>放在该元素中
          <slot></slot>
        </div>
        <i @click="fontclickHandler" class="fontflag el-icon-caret-left"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fontflag: true,
    };
  },
  methods: {
    fontclickHandler() {
      this.fontflag = !this.fontflag;
    },
  },
};
</script>

<style lang="scss" scoped>
.main-box {
  display: flex;
  padding: 20px;
  height: 100vh;
  .left-box {
    background-color: pink;
    flex: 5;
    margin-right: 20px;
  }
  .right-box {
    position: relative;
    background-color: tomato;
    transition: all 1s;
    .right-content {
      height: 100%;
      overflow: auto;
    }
    .fontflag {
      display: inline-block;
      width: 15px;
      height: 60px;
      background-color: lightblue;
      text-align: center;
      line-height: 60px;
      border-radius: 10px 0 0 10px;
      position: absolute;
      left: -15px;
      top: calc(100vh / 2);
    }
  }
}
</style>

css 好用的伪类选择器

:focus-within 当有元素被选中时，被选中的元素及后代元素发生聚焦事件时，css 样式生效。
:has(表达式) 当选中元素，符合表达式时 css 样式生效。
::selection 当文本被选中时 css 样式生效。
::first-letter 只对文本首字母 css 样式生效。

<!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>
      .label {
        text-align: center;
      }
      input:focus {
        outline-color: lightblue;
      }
      .label:focus-within {
        background-color: tomato;
      }
      .label span:has(+ input[data-required])::after {
        content: "*";
        color: tomato;
      }
      .content::selection {
        color: tomato;
        background-color: pink;
      }

      .content::first-letter {
        color: tomato;
        font-weight: bolder;
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <div class="label">
      <span>姓名</span>
      <input data-required type="text" />
    </div>
    <div class="label">
      <span>姓名</span>
      <input type="text" />
    </div>
    <div class="label">
      <span>姓名</span>
      <input data-required type="text" />
    </div>

    <p class="content">
      噫吁嚱，危乎高哉！ 蜀道之难，难于上青天！ 蚕丛及鱼凫，开国何茫然！
      尔来四万八千岁，不与秦塞通人烟。
    </p>
  </body>
</html>

按钮固定

.stickyHeaderButton {
  position: sticky;
  top: 0px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  text-align: right;
  z-index: 99;
}

css 给元素添加蒙层效果

实现: 利用元素的后缀伪元素 实现这一效果.

<!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>study-practice</title>
    <style>
      .box {
        border: dashed #ccc 1px;
        width: 500px;
        height: 500px;
        margin: 0 auto;
        background-color: tomato;
      }
      .box::after {
        background: hsla(0, 0%, 100%, 0.45);
        content: "";
        height: calc(100% - 6px);
        left: 0;
        margin: 3px;
        position: absolute;
        top: 0;
        width: calc(100% - 6px);
        z-index: 1999;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

flex 布局，横向滚动条（不压缩）

关键属性：给子元素添加 flex-shrink: 0; 属性.

<template>
  <div class="flexdemo">
    <div class="item" v-for="item in 10" :key="item"></div>
  </div>
</template>

<style lang="scss" scoped>
  .flexdemo {
    display: flex;
    overflow: auto; // 横向滚动条
    .item {
      width: 300px;
      height: 400px;
      border-radius: 10px;
      background-color: tomato;
      margin: 0 10px;
      flex-shrink: 0; //  关键属性 ，加了之后就会出现横向滚动条，不会压缩。
      // 看对比效果可以把最后一行css注释。
    }
  }
</style>

css 根据不同状态展示不同样式(案例实现)

思路: 通过给 dom 元素添加不同的 自定义属性, 然后通过 css 属性选择器 匹配到该元素, 并给其添加样式

[参考文章]

<!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>study-practice</title>
    <style>
      #box {
        display: flex;
        flex-wrap: wrap;
      }
      /* 重要代码 */
      div[data-lv="1"] {
        background-color: tomato;
      }
      div[data-lv="2"] {
        background-color: lightblue;
      }
      div[data-lv="3"] {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <!-- 平替写法 (自定义属性) -->
    <!-- <div data-lv="1"></div>
    <div data-lv="2"></div>
    <div data-lv="3"></div> -->
    <script type="module">
      let box = document.getElementById("box");
      for (let i = 0; i < 10; i++) {
        let item = document.createElement("div");
        item.style.width = "200px";
        item.style.height = "200px";
        item.innerText = i;
        // 重要代码  vue 可以通过在标签上 添加属性, 然后通过 v-bind 绑定到属性上, 实现动态添加属性
        item.setAttribute("data-lv", i);
        box.appendChild(item);
      }
    </script>
  </body>
</html>