//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 实现方式的更多相关文章

  1. 常用的四种CSS样式表格

    1. 单像素边框CSS表格 这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-fa ...

  2. 四个好看的CSS样式表格

    文章来源 http://www.cnphp6.com/archives/58020 1. 单像素边框CSS表格 这是一个非经常常使用的表格样式. 源码: 2. 带背景图的CSS样式表格 和上面差点儿相 ...

  3. css样式之边框和内外边距

    1.css样式之边框:border 实心的边框: <!DOCTYPE html><html> <head> <meta http-equiv="co ...

  4. chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover

    chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover

  5. HTML 学习笔记 CSS样式(边框)

    元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式 宽度和颜色 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...

  6. 三、CSS样式——表格

    1.CSS表格 CSS表格属性可以帮助我们极大的改善表格的外观 2.表格边框 3.折叠边框 4.表格宽高 5.表格文本对齐 6.表格内边距  7.表格颜色 <!--index.html--> ...

  7. CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并

    本文内容: 表格边框合并 兄弟标签外边距合并 父子标签的外边距合并 首发日期:2018-05-01 表格边框合并: 发生情况: 当设置了cellpadding="0" cellsp ...

  8. css样式 -- 表格不会因为字体过长导致字体溢出的问题

    常常碰到因为表格大小就麽大了,字体过长会爆炸溢出的问题,我们后端就用这个可以了,溢出的可以省略号 ... 代替好了. /* 在表格css样式加上这三个就可以了 效果就会变成 “abc...” */ { ...

  9. css的基本操作学习--css样式,选择器,hover,文字属性,文本属性,背景

    什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种 ...

随机推荐

  1. 【WebApp】IOS兼容问题

    最近,主要是基于Framework7 + RequireJs框架,移动端团队开发Webview框架,内嵌Web的模式进行WebApp开发. 在开发过程中不得不遇到一些 兼容性问题. 1.现象:IOS环 ...

  2. 数据库_数据分片与mycat服务

    1.数据分片; 2.部署mycat服务;3.基于mycat服务创建新库新表. 一,数据分片 1.数据分片,也叫分库分表,即将存放在一台数据库服务器中的数据,按照特定方式进行拆分,分散存放到其它多台服务 ...

  3. 路飞学城Python-Day181

    Evernote Export Nginx默认网站 当Nginx配置文件中有且仅有一个Server的时候,该Server就被Nginx认为是默认网站,所有发给Nginx服务器80端口的数据都会默认给s ...

  4. 路飞学城Python-Day78

    17-静态文件配置1 静态的文件的配置不能直接将CSS.JS文件直接放在templates的文件夹中 要将所有的静态文件放在static的文件夹中,然后配置上静态文件static的路径 要想访问Dja ...

  5. ELO kernels 记录

    these kernel for discuss how to handle outliers in target values. 一:Ashish Gupta: 在16年6月到18年8月,激活卡的人 ...

  6. Java包名称中通配符的含义

    "com.abc 表示的意义为:系统从com.abc这个包及其子孙包扫描组件 "com.abc.* 表示的意义为:系统从com.abc这个包的子孙包扫描组件

  7. [网络流24题] 方格取数问题/骑士共存问题 (最大流->最大权闭合图)

    洛谷传送门 LOJ传送门 和太空飞行计划问题一样,这依然是一道最大权闭合图问题 “骑士共存问题”是“方格取数问题”的弱化版,本题解不再赘述“骑士共存问题”的做法 分析题目,如果我们能把所有方格的数都给 ...

  8. Linux安装expect命令

    [Linux安装expect命令]:--expect是在Tcl基础上创建起来的,所以在安装expect前我们应该先安装Tcl.①:tcl安装源码下载:http://www.tcl.tk/softwar ...

  9. VLC编译

    http://blog.csdn.net/hdh4638/article/details/7602321 1 下载代码 ki.videolan.org/VLC_Source_code git colo ...

  10. OOP 面向对象 七大原则 (二)

    OOP 面向对象   七大原则 (二) 上一篇写到了前四个原则,这一篇继续~~ 接口隔离:客户端不应该依赖它不需要的接口:一个类对另一个类的依赖应该建立在最小的接口上. 又是一句大白话~就是说接口尽量 ...