css Vue尺子样式

news2024/11/14 15:03:41

原生css生成尺子样式
在这里插入图片描述
在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1249691.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

css三角,鼠标样式,溢出文字

目录 css三角 鼠标样式 例子&#xff1a;页码模块 溢出文字表示方式 margin负值运用 css三角强化 css三角 css三角中&#xff1a;line-height&#xff1a;0和font-size&#xff1a;0是防止兼容性的问题 jd {position: relative;width: 120px;height: 249px;background-…

数据库基础知识小结

数据库基础知识小结 什么是数据库&#xff0c;数据库管理员&#xff0c;数据库管理员&#xff0c;数据库系统&#xff1f; 数据库: 数据库(DataBase 简称 DB)就是信息的集合或者说数据库是由数据库管理系统管理的数据的集合。 数据库管理系统: 数据库管理系统(DataBase Mana…

Oracle SQL 注入上的 Django GIS 函数和聚合漏洞 (CVE-2020-9402)

漏洞描述 Django 于2020年3 月4日发布了一个安全更新&#xff0c;修复了 GIS 函数和聚合中的 SQL 注入漏洞。 参考链接&#xff1a; Django security releases issued: 3.0.4, 2.2.11, and 1.11.29 | Weblog | Django 该漏洞要求开发者使用 JSONField/HStoreField;此外&…

【matlab程序】图像最大化填充画布

【matlab程序】图像最大化填充画布 不做任何修饰&#xff1a; 修饰&#xff1a; 图片 往期推荐 图片 【python海洋专题一】查看数据nc文件的属性并输出属性到txt文件 【python海洋专题二】读取水深nc文件并水深地形图 【python海洋专题三】图像修饰之画布和坐标轴 【Pytho…

flutter之graphic图表自定义tooltip

renderer graphic中tooltip的TooltipGuide类提供了renderer方法&#xff0c;接收三个参数Size类型&#xff0c;Offset类型&#xff0c;Map<int, Tuple>类型。可查到的文档是真的少&#xff0c;所以只能在源码中扒拉例子&#xff0c;做符合需求的修改。 官方github示例 …

在 Python 的 requests 二进制数据的传输方式发生了变化

在Python编程中&#xff0c;requests库是一个非常有用的工具&#xff0c;用于发送HTTP请求。由于其简单易用的API和广泛的兼容性&#xff0c;requests库已经成为Python开发者中最常用的网络请求库之一。 然而&#xff0c;最近在requests 0.10.1版本中&#xff0c;POST二进制数据…

力扣学习笔记——239. 滑动窗口最大值

力扣学习笔记——239. 滑动窗口最大值 题目描述 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例 1&#xff1a; 输…

php高级工程师范文模板

以下简历内容以php高级工程师招聘需求为背景&#xff0c;我们制作了1份全面、专业且具有参考价值的简历案例&#xff0c;大家可以灵活借鉴&#xff0c;希望能帮助大家在众多候选人中脱颖而出。 php高级工程师简历在线制作下载&#xff1a;百度幻主简历 求职意向 求职类型&…

带submodule的git仓库自动化一键git push、git pull脚本

前言 很久没写博客了&#xff0c;今天难得闲下来写一次。 不知道大家在使用git的时候有没有遇到过这样的问题&#xff1a;发现git submodule特别好用&#xff0c;适合用于满足同时开发和部署的需求&#xff0c;并且结构清晰&#xff0c;方便我们对整个代码层次有一个大概的了…

[Docker]十.Docker Swarm讲解

一.Dokcer Swarm集群介绍 1.Dokcer Swarm 简介 Docker Swarm 是 Docker 公司推出的用来管理 docker 集群的工具&#xff0c; 使用 Docker Swarm 可以快速方便的实现 高可用集群 ,Docker Compose 只能编排单节点上的容器, Docker Swarm 可以让我们在单一主机上操作来完成对 整…

万字解析设计模式之模板方法与解释器模式

一、模板方法模式 1.1概述 定义一个操作中算法的框架&#xff0c;而将一些步骤延迟到子类中&#xff0c;模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。 例如&#xff0c;去银行办理业务一般要经过以下4个流程&#xff1a;取号、排队、办理具体业…

分布式数据恢复-hbase+hive分布式存储误删除如何恢复数据?

hbasehive分布式存储数据恢复环境&#xff1a; 16台某品牌R730XD服务器节点&#xff0c;每台物理服务器节点上有数台虚拟机&#xff0c;虚拟机上配置的分布式&#xff0c;上层部署hbase数据库hive数据仓库。 hbasehive分布式存储故障&初检&#xff1a; 数据库文件被误删除…

RPCS3(PlayStation 3游戏模拟器)汉化教程

RPCS3 RPCS3 是一款PlayStation 3 模拟器&#xff0c;可让 Windows、Linux 或 BSD 系统的用户运行索尼 PlayStation 3 游戏。 安装教程 包含 Windows/Linux版本 详细安装汉化教程请查看文章 RPCS3&#xff08;PS3模拟器&#xff09;安装及汉化教程 1.首先下载最新版 RPCS3模…

智能汽车的山海之盾

最近一段时间&#xff0c;关于汽车数字化、智能化进程中的安全问题引发了一系列行业讨论。这个话题也得到了行业更广泛的认识与关注。 汽车智能化是大势所趋&#xff0c;而智能化带来了复杂的系统架构与多样化的功能模块&#xff0c;势必会加大安全隐患&#xff0c;但汽车本身又…

npm WARN npm npm does not support Node.js v13.9.0

Microsoft Windows [版本 10.0.19045.2965] (c) Microsoft Corporation。保留所有权利。C:\Users\Administrator>node -v v13.9.0C:\Users\Administrator>npm -v npm WARN npm npm does not support Node.js v13.9.0 npm WARN npm You should probably upgrade to a newe…

LeetCode Hot100 101.对称二叉树

题目&#xff1a; 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 代码&#xff1a; class Solution {public boolean isSymmetric(TreeNode root) {if(rootnull || (root.leftnull && root.rightnull)) {return true;}//用队列保存节点LinkedList<…

ArcGis如何用点连线?

这里指的是根据已有坐标点手动连线&#xff0c;类似于mapgis中的“用点连线”&#xff0c;线的每个拐点是可以自动捕捉到坐标点的&#xff0c;比直接画精确。 我也相信这么强大的软件一定可以实现类似于比我的软件上坐标时自动生成的线&#xff0c;但是目前我还没接触到那里&a…

Spring Boot + hutool 创建海报图片

Spring Boot hutool 创建海报图片 /*** 分享,生成图片* param id* return*/GetMapping("/getShareImg")public void getShareImg(String id,HttpServletResponse response) throws IOException {CouponConsignSaleClassify byId couponConsignSaleClassifyService…

DevEco Studio安装

HUAWEI DevEco Studio For OpenHarmony&#xff08;以下简称DevEco Studio&#xff09;是基于IntelliJ IDEA Community开源版本打造&#xff0c;面向OpenHarmony全场景多设备的一站式集成开发环境&#xff08;IDE&#xff09;&#xff0c;为开发者提供工程模板创建、开发、编译…

医保线上购药系统:引领医疗新潮流

在科技的驱动下&#xff0c;医疗健康服务正经历一场数字化的革新。医保线上购药系统&#xff0c;不仅是一种医疗服务的新选择&#xff0c;更是技术代码为我们的健康管理带来的全新可能。本文将通过一些简单的技术代码示例&#xff0c;深入解析医保线上购药系统的工作原理和优势…