普元nui:按钮特效

jsp

<!-- 引入导航栏css特效 -->
<link rel="stylesheet" href="<%=request.getContextPath()%>/resources/syfh_zcd/css/datouwang.com.css">
<table style="width: 777px;"><tr><!-- <td style="width: 100%;"><a id="update" class="nui-button" iconCls="icon-edit" onclick="edit()"> 编辑 </a><a class="nui-button" iconCls="icon-add" onclick="add()"> 增加 </a><a class="nui-button" iconCls="icon-remove" onclick="remove()"> 删除 </a></td> --><nav class="nav"><td><a href="javascript:onSchedule('all')" class="nav-item" active-color="green">查看所有</a> <a href="javascript:onSchedule('approve')" class="nav-item" active-color="blue">审批中</a><a href="javascript:onSchedule('agree')" class="nav-item" active-color="red">同意放款</a> <a href="javascript:onSchedule('refuse')" class="nav-item"active-color="rebeccapurple">拒绝放款</a><span class="nav-indicator"></span></td></nav></tr></table>

css

/* DaTouWang URL: www.datouwang.com */
* {box-sizing: border-box;
}body {text-align: center;display: flex;height: 100vh;justify-content: center;align-items: center;
}.nav {display: inline-flex;position: relative;overflow: hidden;max-width: 100%;background-color: #fff;padding: 0 20px;border-radius: 40px;
}.nav-item {color: #2266CA;text-decoration: none;transition: .3s;margin: 0 6px;z-index: 1;font-family: 'DM Sans', sans-serif;font-weight: 500;position: relative;
}
.nav-item:before {content: "";position: absolute;bottom: -6px;left: 0;width: 100%;height: 5px;background-color: #BEB3F1;border-radius: 8px 8px 0 0;opacity: 0;transition: .3s;
}.nav-item:not(.is-active):hover:before {opacity: 1;bottom: 0;
}.nav-item:not(.is-active):hover {color: #FFA07A;
}.nav-indicator {position: absolute;left: 0;bottom: 0;height: 4px;transition: .4s;height: 5px;z-index: 1;border-radius: 8px 8px 0 0;
}@media (max-width: 580px) {.nav {overflow: auto;}
}

普元nui:按钮特效相关推荐

java前端nui_spring mvc 及普元nui前端框架学习笔记
spring mvc 及普元nui前端框架学习笔记页面传值一.同一页面直接通过$J.getbyName("id").setValue(id); Set值即可二.跳转页面(b ...
普元nui:Forms
DataBinding数据绑定 jsp //数据表格 <div id="datagrid" class="nui-datagrid" style=&quo ...
普元nui：demo
注意 : js与jquery无法取得nui组件value nui-htmlfile控件的url必须通过action提交 datepicker组件不能通过setValue设值通过$J调用的全局函数,当 ...
普元nui:页面布局
1.整体布局其中最外层div中的class将设置为nui-layout样式,内部 div通过设置region位置来设置方位属性类型描述默认 class String 设置样式 nui-lay ...
普元nui:Navigations
1.分页控件分页控件常结合grid表格一起使用属性: 名称类型描述默认 pageIndex Number 页码 0 pageSize Number 每页多少条 10 totalCount N ...
普元nui:Lists列表
1.DataGrid $J.getDataGrid来获取grid对象 a.后台数据:key="total",value="数据数量":key="da ...
普元云计算-AI杂谈：从洗衣机到老鼠屁股
转载本文需注明出处:微信公众号EAWorld,违者必究. 目录: 一. AI 的定义及学术上的AI概念二.机器学习:基于统计学方法的AI 三.几个神经网络的基本概念四.老鼠的屁股:卷积神经网络 ...
普元云计算-一起来DIY一个人工智能实验室吧
转载本文需注明出处:微信公众号EAWorld,违者必究. 目录: 一.DIY一个AI实验室:原材料的选择二.搭建"单机版"的AI实验室三.搭建"高阶版"的A ...
普元中间件部署应用程序
1.1启动.停止服务进入普元安装目录,执行./startServer.sh,启动DMS控制台;执行./stopServer.sh启动DMS控制台. cd /root/primeton/PAS/pas ...

普元nui:按钮特效

普元nui:按钮特效相关推荐

最新文章

热门文章