css Vue尺子样式

原生css生成尺子样式

javascript 复制代码
<template>
  <div class="page">
    <div class="Light">
    </div>
    <div class="rile">
      <ul id="list">
        <!--尺子需要几个单位就加几个-->
        <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>
  </div>
</template>

<script>
export default {
  name: 'temDiv',
  data() {
    return {
      
    };
  },
  mounted() {
  },

  methods: {
    
  },
};
</script>

<style lang="less" scoped>
.page {
  // 尺子的总宽度
  width: 800px;
  margin: 300px;
  .Light {
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #fff;
  }
  .rile {
    width: 100%;
    position: relative;
  }
  // 单位
  ul{
    position: absolute;
    left: 0;
    right: 0;
    list-style: none;
    //counter-reset: num -2;  // 由于间隔数字是2,减2则从0开始
    counter-reset: num -1;  // 由于间隔数字是1,减1则从0开始
    width: 100%;
    padding-inline-start: 0px;
    display: flex;
    justify-content: space-between;
  }
  #list>li {
    width: 1px;
    height: 6px;
    background-color: black;
    position: relative;
  }
  #list>li:before{
    //counter-increment: num 2;  //间隔数字为2
    counter-increment: num 1;  //间隔数字为1
    content: counter(num);
    position: absolute;
    top: 5px;
    left: -4px;
  }
}
</style>
相关推荐
Mapmost14 分钟前
Mapmost SDK for UE5 内核升级,三维场景渲染效果飙升!
前端
Mapmost16 分钟前
重磅升级丨Mapmost全面兼容3DTiles 1.1,3DGS量测精度跃升至亚米级!
前端·vue.js·three.js
wycode23 分钟前
Promise(一)极简版demo
前端·javascript
浮幻云月24 分钟前
一个自开自用的Ai提效VsCode插件
前端·javascript
DevSecOps选型指南25 分钟前
SBOM风险预警 | NPM前端框架 javaxscript 遭受投毒窃取浏览器cookie
前端·人工智能·前端框架·npm·软件供应链安全厂商·软件供应链安全工具
__lll_33 分钟前
Docker 从入门到实战:容器、镜像与 Compose 全攻略
前端·docker
木春1 小时前
react组件化思维:高复用性 UI 设计之道
前端·react.js
切克呦1 小时前
通过 Cursor CLI 使用 GPT-5 的教程
前端·后端·程序员
gitboyzcf1 小时前
Git 常用命令
前端·git·后端