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样式有三种 ...
随机推荐
- Kaggle竞赛顶尖选手经验汇总
What is your first plan of action when working on a new competition? 理解竞赛,数据,评价标准. 建立交叉验证集. 制定.更新计划. ...
- ajax异步上传文件和表单同步上传文件 的区别
1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...
- N3-2 - 树 - binary-tree-level-order-traversal-ii
题目描述: Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, fro ...
- hdu 2435dinic算法模板+最小割性质
hdu2435最大流最小割 2014-03-22 我来说两句 来源:hdu2435最大流最小割 收藏 我要投稿 2435 There is a war 题意: 给你一个有向图,其中可以有一条边是无敌的 ...
- BA-WG-泰豪发电机
泰豪发电机的控制主板有2个端口,一个是RS232端口,一个是RS485端口,通常接网关需要将这个RS485的端口调整为modbus协议输出,再将modbus协议通过网关转换为bacnet / ip协议 ...
- Java泛型(一):入门、原理、使用
远在 JDK 1.4 版本的时候,那时候是没有泛型的概念的.当时 Java 程序员们写集合类的代码都是类似于下面这样: List list = new ArrayList(); list.add(&q ...
- .NET平台开源JSON库LitJSON的使用方法
下载地址:LitJson.dll下载 一个简单示例: String str = "{'name':'cyf','id':10,'items':[{'itemid':1001,'itemnam ...
- shell文本过滤编程(十一):paste命令
[版权声明:转载请保留出处:blog.csdn.net/gentleliu. Mail:shallnew at 163 dot com] 从字面上能够看出.paste命令和cut命令功能相反,cut命 ...
- 串口之CreateFile 函数具体解释
HANDLE CreateFile( LPCTSTR lpFileName, //指向文件名称的指针 DWORD dwDesiredAccess, //訪问模式(写/读) DWORD dwShareM ...
- MongodDB用GridFS方式存取文件
在实现GridFS方式前我先讲讲它的原理,为什么可以存大文件.驱动首先会在当前数据库创建两个集合:"fs.files"和"fs.chunks"集合,前者记录了文 ...