2019独角兽企业重金招聘Python工程师标准>>>

效果预览

  • 刻度尺

代码展示

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>刻度尺</title><style type = "text/css">.ruler {position: relative;width: 70%;margin: 20px auto;height: 14px;}.ruler .cm,.ruler .mm {position: absolute;border-left: 1px solid #555;height: 14px;width: 10%;}.ruler .cm:after {position: absolute;bottom: -15px;font: 11px/1 sans-serif;}.ruler .mm {height: 5px;}.ruler .mm:nth-of-type(5) {height: 10px;}.ruler .cm:nth-of-type(1) {left: 0%;}.ruler .cm:nth-of-type(1):after {content: "0";}.ruler .cm:nth-of-type(2) {left: 10%;}.ruler .cm:nth-of-type(2):after {content: "1";}.ruler .cm:nth-of-type(3) {left: 20%;}.ruler .cm:nth-of-type(3):after {content: "2";}.ruler .cm:nth-of-type(4) {left: 30%;}.ruler .cm:nth-of-type(4):after {content: "3";}.ruler .cm:nth-of-type(5) {left: 40%;}.ruler .cm:nth-of-type(5):after {content: "4";}.ruler .cm:nth-of-type(6) {left: 50%;}.ruler .cm:nth-of-type(6):after {content: "5";}.ruler .cm:nth-of-type(7) {left: 60%;}.ruler .cm:nth-of-type(7):after {content: "6";}.ruler .cm:nth-of-type(8) {left: 70%;}.ruler .cm:nth-of-type(8):after {content: "7";}.ruler .cm:nth-of-type(9) {left: 80%;}.ruler .cm:nth-of-type(9):after {content: "8";}.ruler .cm:nth-of-type(10) {left: 90%;}.ruler .cm:nth-of-type(10):after {content: "9";}.ruler .cm:nth-of-type(11) {left: 100%;}.ruler .cm:nth-of-type(11):after {content: "10";}.ruler .mm:nth-of-type(1) {left: 10%;}.ruler .mm:nth-of-type(2) {left: 20%;}.ruler .mm:nth-of-type(3) {left: 30%;}.ruler .mm:nth-of-type(4) {left: 40%;}.ruler .mm:nth-of-type(5) {left: 50%;}.ruler .mm:nth-of-type(6) {left: 60%;}.ruler .mm:nth-of-type(7) {left: 70%;}.ruler .mm:nth-of-type(8) {left: 80%;}.ruler .mm:nth-of-type(9) {left: 90%;}.ruler .mm:nth-of-type(10) {left: 100%;}</style>
</head>
<body><section class = "ruler"><section class = "cm"><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section></section><section class = "cm"><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section></section><section class = "cm"><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section></section><section class = "cm"><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section></section><section class = "cm"><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section></section><section class = "cm"><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section></section><section class = "cm"><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section></section><section class = "cm"><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section></section><section class = "cm"><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section></section><section class = "cm"><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section><section class = "mm"></section></section><section class = "cm"></section></section></body>
</html>

转载于:https://my.oschina.net/u/616147/blog/740633

用CSS划一把刻度尺相关推荐

  1. css html 实现刻度,用CSS划一把刻度尺

    刻度尺 .ruler { position: relative; width: 70%; margin: 20px auto; height: 14px; } .ruler .cm, .ruler . ...

  2. html画直线标刻度,用CSS划一把刻度尺

    效果预览 代码展示 刻度尺 .ruler { position: relative; width: 70%; margin: 20px auto; height: 14px; } .ruler .cm ...

  3. 利用Element UI的滑块Slider实现刻度尺

    一.效果图 二.一些要点说明 ①首先需要了解slider的一些参数,尤其需要利用marks来实现刻度: ②实现marks的方法需要用到this.$createElement,所以也需要了解它的写法:t ...

  4. [css] 用css画出一把刻度尺

    [css] 用css画出一把刻度尺 <div class='ruler'><div class='cm'><div class='mm'></div>& ...

  5. css html 实现刻度,vue语法css实现刻度尺

    更新记录 1.0.2(2021-04-09) 滑动小于半个格时,刻度线不会回弹问题 1.0.1(2021-03-28) vue语法css实现刻度尺 横向整数.小数点 竖向整数.小数点 查看更多 平台兼 ...

  6. 微信小程序纯css实现刻度尺

    微信小程序纯css实现刻度尺 最近需要实现一个高度定制的刻度尺,但是网上现成的方案却是极少,最终找到了HaoTian的wx-scale.但是没有实现竖向的效果而且刻度范围大时,在安卓机上无法渲染完全( ...

  7. 【CSS】如何实现价格文字中间划一条线

    方法一:css方式 text-decoration:line-through 方法二:html标签 <s>市场价:999.99</s> <div>会员价:99.00 ...

  8. 如何实现尺子样式html,纯CSS实现单元素构建的刻度尺

    CSS 语言: CSSSCSS 确定 html { background: silver; } .ruler { margin: 2em auto; border: solid 1px #efd7a1 ...

  9. 窗帘效果图css,vuejs、微信小程序窗帘效果

    说明 本程序分为vuejs和微信小程序部分,主要不同会在下面标志出来 代码只是测试用,有不好的地方请见谅 实现思路 实现思路其实很简单,就是根据获取的宽度值修改div层的宽度 效果图 vuejs部分 ...

最新文章

  1. [每日一问]虚拟化网络设计中为什么建议采用链路聚合
  2. ffmpeg3.3新版本AVStream的封装流参数由codec替换codecpar
  3. Go的json解析：Marshal与Unmarshal
  4. VS2012 打包部署程序
  5. RocketMQ消息发送及消费的基本原理
  6. 在网页中嵌入flash之标签
  7. Ubuntu安装Samba文件共享服务器（NAS）
  8. C# 类(14) 事件
  9. 动态样式计算 动态样计算 ＜span :style=“{‘left‘:`${(l+1)*16 - 6}`+‘px‘}“＞＜/span＞
  10. 计算机网络的拓扑结构三种基本型,2018年自考《计算机网络基本原理》试题库四...
  11. win8计算机配置怎么看,win8怎么看电脑配置？win8电脑配置的查看方法
  12. 如何查看Android项目的gradle版本和路径
  13. java.lang.NoClassDefFoundError: org/springframework/dao/support/DaoSupport ...
  14. 李扬：2018春节港澳游（上篇：行）
  15. 算法实践——改良的求解数独的暴力搜索法
  16. wince 播放器 最终版本
  17. 基于html5的旅游网站的设计与实现,基于HTML5的旅游网站的设计与实现(静态网页)(含录像)...
  18. 前端开发常见的英语单词汇总
  19. zblog首页模板修改php,zblog主题模板文件的修改办法
  20. 'utf-8' codec can't decode byte 0xb5 in position : invalid start byte

热门文章

  1. Stata对cgss2017数据实证分析，希望有经验能帮忙的小伙伴多多指导。
  2. redolog 和 bin log
  3. 步步高vivo x5maxv手机刷机固件电信4G售后线刷包
  4. 【BUUCTF】MISC 另外一个世界
  5. inner join 链表_链表树——复合数据结构应用实例
  6. 百度图表 ECharts
  7. 2007年4月11日 星期三
  8. 计算机“接纳”汉字，永远要感谢一个光辉的名字
  9. 2016计算机中级职称考试,2016.2年中级职称计算机考试模拟及题库.doc
  10. 电子产品-维修经验点滴