带箭头的进度流程 css
来源:互联网 发布:头戴耳机 隔音 知乎 编辑:程序博客网 时间:2024/05/29 23:22
html
<ul class="cssNav"> <li v-for="(item,i) in list" :class="[num==i?'active':'']" @click="tab(i)">{{item}}</li></ul>
css
.cssNav { margin: 100px auto; background-color: #dedede; width:420px; } .cssNav li{ padding:0 20px; line-height: 40px; background-color: #50abe4; display: inline-block; color:#fff; position: relative; margin-right: 4px; } .cssNav li:after{ content:""; display: block; border-top:20px solid transparent; border-bottom:20px solid transparent; border-left:20px solid #50abe4; position: absolute; right:-20px; top:0; z-index: 10; } .cssNav li:before{ content:""; display: block; border-top:20px solid transparent; border-bottom:20px solid transparent; border-left:20px solid #fff; position: absolute; left:0px; top:0; } .cssNav li:first-child{ border-radius: 4px 0 0 4px; padding-left:25px; } .cssNav li:last-child,.cssNavEnd{ border-radius: 0 4px 4px 0; padding-right: 25px; } .cssNav li:first-child:before{ display: none; } .cssNav li:last-child:after,.cssNavEnd:after{ display: none; } .cssNav li.active { background-color: #ef72b6; } .cssNav li.active:after { border-left-color: #ef72b6; }
js
// 需要引入vue.js new Vue({ el: '.cssNav', data: { num:0, list:['首页','测试文字','新闻也','地址页'] }, methods: { tab:function(i){ this.num = i; } } })
说明:如果不用vue.js来写,只需要把样式复制就可以了
阅读全文
0 0
- 带箭头的进度流程 css
- css实现横向带箭头步骤流程效果兼容性ie6
- CSS实现带箭头的DIV
- CSS实现带箭头的DIV
- css绘制带箭头对话框
- CSS无图片带箭头的DIV方框
- 利用css实现网页带箭头的提示框
- CSS实现无图片带箭头的DIV方框
- 纯CSS实现带箭头的提示框效果
- CSS带箭头的DIV方框,自适应高度
- 带箭头的直线
- 带箭头的listbox
- 带箭头的DIV
- css 箭头的实现
- css实现对话框-带箭头提示框
- DIV+CSS制作带箭头提示框
- 带进度的button
- 带进度的progressBar
- (转)当android编译出现com.android.dex.DexIndexOverflowException: method ID not in [0, 0xffff]: 65536错误时的处理
- OpenCV矩阵按行求均值
- 前端提示框的几种实现
- POI框架使用注意事项
- Mybatis一级和二级缓存
- 带箭头的进度流程 css
- (转)Android Studio 错误 com.android.dex.DexIndexOverflowException: method ID not in [0, 0xffff]: 65536
- 二进制转换
- 机器学习期望最大算法:实例解析
- 计算机视觉-高斯滤波
- unity日常——游戏优化
- 转载:VOIP 客户端比较
- mysql中ifnull()方法的用法
- lnmp如何怎样修改绑定的域名?