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>
相关推荐
典学长编程15 分钟前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第一天(HTML5)
javascript·css·html·html5
前端小咸鱼一条16 分钟前
React的基本语法和原理
前端·javascript·react.js
qq_2787877717 分钟前
Golang 调试技巧:在 Goland 中查看 Beego 控制器接收的前端字段参数
前端·golang·beego
YGY Webgis糕手之路17 分钟前
Cesium 快速入门(六)实体类型介绍
前端·经验分享·笔记·vue·web
come1123419 分钟前
前端ESLint扩展的用法详解
前端
YGY Webgis糕手之路21 分钟前
Cesium 快速入门(一)快速搭建项目
前端·经验分享·笔记·vue·web
im_AMBER23 分钟前
Web 开发 08
前端·javascript
前端amanda23 分钟前
uniapp中uview组件中u-input格式化后赋值踩坑
前端·javascript·uni-app
golitter.24 分钟前
python中高效构建提示词
前端·数据库·python
前端工作日常24 分钟前
我学习到的“维护推广阶段的核心目标”
前端