• css 实现相关案例

    css 实现相关案例

    抽屉案例(带吸附箭头)

    <template>
  <div class="container">
    <div class="main-box">
      <div class="left-box">左边盒子div>
      
      <div :style="{ flex: fontflag ? 1 : 0 }" class="right-box">
        
        <div class="right-content" v-if="fontflag">
          将需要<b>动态展示的内容b>放在该元素中
        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: 500px;
    .left-box {
      background-color: pink;
      flex: 5;
      margin-right: 20px;
    }
    .right-box {
      position: relative;
      background-color: tomato;
      transition: all 1s;
      .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(500px / 2);
      }
    }
  }
style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

    css 好用的伪类选择器

    1. :focus-within 当有元素被选中时，被选中的元素及后代元素发生聚焦事件时，css 样式生效。
    2. :has(表达式) 当选中元素，符合表达式时 css 样式生效 。
    3. ::selection 当文本被选中时 css 样式生效。
    4. ::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>Documenttitle>
    <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>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54

    按钮固定

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    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-practicetitle>
    <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
  • 相关阅读:
    修改hosts 不生效? 三种方法解决
    JS 流行框架（六）：Animate
    javaScript进阶面向对象ES6【ES6 的新增语法、ES6 的内置对象扩展】
    如何运用 Python 异常处理，提高程序的高可用性？
    抖音API接口
    Vitis_米联客开发板MZU07_7EG上手_1
    c++在visual studio上的默认配置
    【EI会议征稿】第十届机电一体化与工业信息学国际学术研讨会（ISMII 2024）
    Handler消息机制，postDelayed会造成线程阻塞吗？对内存有什么影响？
    java通配符有哪些
  • 原文地址：https://blog.csdn.net/i_Satan/article/details/133611217