css样式表格边框1px hover时为2px 实现方式
//css
.flclass-cont .flclass-cont-box{width:%;display:inline-block;font-size:;margin:10px;position:relative;width:%;padding-right:110px}
.flclass-cont .flclass-cont-box span{display:inline-block;position:relative;font-size:12px;width:98px;height:48px;line-height:48px;position:relative;text-align:center;cursor:pointer}
.flclass-cont .flclass-cont-box span > i{display:inline-block;position:absolute;left:;top:;width:%;height:%;border:1px solid #dcdcdc;border-right:transparent}
.flclass-cont .flclass-cont-box span:last-child{border-right:1px solid #dcdcdc}
.flclass-cont .flclass-cont-box span:hover i{border:2px solid #d71f1b}
//html
<div class="flclass-cont-box">
<span v-for="item in 7"> 40升以下 <i></i> </span>
</div>
//预览

css样式表格边框1px hover时为2px 实现方式的更多相关文章
- 常用的四种CSS样式表格
1. 单像素边框CSS表格 这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-fa ...
- 四个好看的CSS样式表格
文章来源 http://www.cnphp6.com/archives/58020 1. 单像素边框CSS表格 这是一个非经常常使用的表格样式. 源码: 2. 带背景图的CSS样式表格 和上面差点儿相 ...
- css样式之边框和内外边距
1.css样式之边框:border 实心的边框: <!DOCTYPE html><html> <head> <meta http-equiv="co ...
- chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover
chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover
- HTML 学习笔记 CSS样式(边框)
元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式 宽度和颜色 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...
- 三、CSS样式——表格
1.CSS表格 CSS表格属性可以帮助我们极大的改善表格的外观 2.表格边框 3.折叠边框 4.表格宽高 5.表格文本对齐 6.表格内边距 7.表格颜色 <!--index.html--> ...
- CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并
本文内容: 表格边框合并 兄弟标签外边距合并 父子标签的外边距合并 首发日期:2018-05-01 表格边框合并: 发生情况: 当设置了cellpadding="0" cellsp ...
- css样式 -- 表格不会因为字体过长导致字体溢出的问题
常常碰到因为表格大小就麽大了,字体过长会爆炸溢出的问题,我们后端就用这个可以了,溢出的可以省略号 ... 代替好了. /* 在表格css样式加上这三个就可以了 效果就会变成 “abc...” */ { ...
- css的基本操作学习--css样式,选择器,hover,文字属性,文本属性,背景
什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种 ...
随机推荐
- RabbitMQ学习笔记(4)----RabbitMQ Exchange(交换机)的使用
1. fanout模式 1.1 Publish/Subscribe(发布/订阅)结构图 上图表示一个消费者消费消息之后,不讲消息直接存储到队列,而是使用两个消费者各自声明一个队列,将各自的对应的队列与 ...
- ZBrush细说3D海盗角色的创建艺术
一提到海盗,就不由自主想到了<加勒比海盗>,那个帅得一塌糊涂的杰克船长更是让人夜不能寐寝难安,但在艺术的世界里,角色无美丑,今天我们要讲的这位海盗,就与“帅气”八竿子打不着了,它甚至有点古 ...
- JavaScript回顾一下js的基础知识,以及学习一下在项目中了解到的新知识
学习文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Functions https://www.cnblogs.com ...
- MongoDB 学习笔记(五):固定集合、GridFS文件系统与服务器端脚本
一.count.distinct与group 1.count函数:查询文档数,如下图: 2.distinct:去重,用法:db.runCommand({distinct:"集合名" ...
- 采用tcp协议和UDP协议实现简单的聊天功能
Date: 2019-06-19 Author: Sun 一. Python3输出带颜色字体 实现过程: 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关. 转义 ...
- vc++绘图,颜色
新建mfc应用程序,Graphic ,单文档 添加菜单项,点,直线,矩形,椭圆 建立类导向 MFC ClassWizard,为菜单项添加命令响应 添加成员变量 在CGraphicView构造函数中进行 ...
- 序列模型(2)-----循环神经网络RNN
一.RNN的作用和粗略介绍: RNN可解决的问题: 训练样本输入是连续的序列,且序列的长短不一,比如基于时间的序列:一段段连续的语音,一段段连续的手写文字.这些序列比较长,且长度不一,比较难直接的拆分 ...
- Python数据分析5-----数据规约
1.数据规约概念和目的 数据规约是产生更小且保留数据完整性的新数据集. 意义:降低无效错误数据的影响.更有效率.降低存储成本. 2.属性规约 (1)属性合并(降维):比如PCA (2)删除不相关属性 ...
- geohash:用字符串实现附近地点搜索
转自:http://blog.charlee.li/geohash-intro/ geohash:用字符串实现附近地点搜索 上回说到了用经纬度范围实现附近地点搜索.一些小型应用中这样做没问题,但在大型 ...
- [luogu3627 APIO2009] 抢掠计划 (tarjan缩点+spfa最长路)
传送门 Description Input 第一行包含两个整数 N.M.N 表示路口的个数,M 表示道路条数.接下来 M 行,每行两个整数,这两个整数都在 1 到 N 之间,第 i+1 行的两个整数表 ...