纯css实现刻度尺列表样式

首先看看效果图

其实这个刻度尺就是用border实现的

通过将li设置为固定大小，只显示部分border即可达到效果

同时li的内容要设置绝对定位，脱离li的限制

然后看看html内容

<body><ul><li><a href="#">content</a></li><li><a href="#">content</a></li><li><a href="#">content</a></li><li><a href="#">content</a></li><li><a href="#">content</a></li></ul>
</body>

就是一个很简单的列表，那么我们来看看样式是怎么写的

<style>a {text-decoration: none;}ul {list-style: none;}ul > li {position: relative;width: 10px;height: 20px;border-bottom: 1px solid gray;border-left: 1px solid transparent;}ul > li + li {border-left-color: gray;}ul > li > a {display: block;position: absolute;height: 20px;line-height: 20px;margin-left: 20px;margin-top: 10px;}
</style>

纯css实现刻度尺列表样式相关推荐

微信小程序纯css实现刻度尺
微信小程序纯css实现刻度尺最近需要实现一个高度定制的刻度尺,但是网上现成的方案却是极少,最终找到了HaoTian的wx-scale.但是没有实现竖向的效果而且刻度范围大时,在安卓机上无法渲染完全( ...
CSS Ul（列表样式）
CSS Ul(列表样式) CSS列表属性作用如下: 设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像一.列表在HTML中,有两种类型的列表: 无序列表 - 列表 ...
html自定义radio样式,用纯CSS 自定义radio checkbox 样式
以前做自定义样式的radio, checkbox 的时候,一直是如下结构文字然后定义diyRadio 的样式作为新Radio, 再用js 做关联. 知道今天才知道可以用标签的for 属性 + :c ...
css列表大全,CSS中li列表样式汇总大全，全实例展示
CSS中列表样式li {list-style-type:符号名称} css中用list-style-type指定列表(lists)前面符号,如下: li {list-style-type:符号名称} ...
React封装一个纯CSS实现的水滴样式的盒子
背景刷B站刷到一个纯css实现的水滴效果的视频感觉真不错,决定封装一个具有水滴效果的盒子(DIV) 涉及知识点 CSS样式,核心是这个和box-shadow阴影,实现水滴boder和阴影效果. J ...
Css中设置列表项目符号属性,CSS如何设置列表样式属性，分享
列表样式属性在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...
如何使用 CSS 自定义无序列表样式
大家好,我是前端西瓜哥. 前段时间实现了个自定义无序列表样式,踩了一些坑,和大家说说. 设计师说我们这个,列表项样式要优化一下,太丑了,这个原点要大一点. 默认的无序列表样式是这样的. <sty ...
CSS中的列表样式与表格样式
1. 在CSS中我们可以通过添加属性来对列表的样式进行修改. 2.表格样式:我们可以在table标签中使用border属性,cellspacing属性和cellspaci ...
css 无序列表横排列,CSS：无序列表样式
CSS按优先级和标识符工作.要定位页面上的所有H2元素,您将声明 h2 { color: #00FF00; } 但是,您也可以获得更具体的内容,并且仅在DIV中定位H2元素,例如: div h2 { ...
纯CSS实现图片列表悬停放大效果的方法
复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

纯css实现刻度尺列表样式

纯css实现刻度尺列表样式相关推荐

最新文章

热门文章