Web表单美化CSS框架Topcoat

按钮

以蓝色按钮为例，相关代码如下：

HTML

button  Button /button   button  disabled Button /button   .topcoat-button--large--cta {    font-size: 0.875rem;    font-weight: 600;    line-height: 1.688rem;    padding: 0 0.875rem;  input[type="checkbox"] {    position: absolute;    overflow: hidden;    padding: 0;    border: 0;    opacity: 0.001;    z-index: 1;    vertical-align: top;    outline: none;  .checkbox {    -moz-box-sizing: border-box;    box-sizing: border-box;    background-clip: padding-box;    position: relative;    display: inline-block;    vertical-align: top;    cursor: default;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;  .checkbox__label {    position: relative;    display: inline-block;    vertical-align: top;    cursor: default;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;  .checkbox--disabled {    opacity: 0.3;    cursor: default;    pointer-events: none;  .checkbox:before,  .checkbox:after {    content: ;    position: absolute;  .checkbox:before {    -moz-box-sizing: border-box;    box-sizing: border-box;    background-clip: padding-box;  input[type="checkbox"] {    position: absolute;    overflow: hidden;    padding: 0;    border: 0;    opacity: 0.001;    z-index: 1;    vertical-align: top;    outline: none;  .checkbox,  .topcoat-checkbox__checkmark {    -moz-box-sizing: border-box;    box-sizing: border-box;    background-clip: padding-box;    position: relative;    display: inline-block;    vertical-align: top;    cursor: default;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;  .checkbox__label,  .topcoat-checkbox {    position: relative;    display: inline-block;    vertical-align: top;    cursor: default;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;  .checkbox--disabled,  input[type="checkbox"]:disabled + .topcoat-checkbox__checkmark {    opacity: 0.3;    cursor: default;    pointer-events: none;  .checkbox:before,  .checkbox:after,  .topcoat-checkbox__checkmark:before,  .topcoat-checkbox__checkmark:after {    content: ;    position: absolute;  .checkbox:before,  .topcoat-checkbox__checkmark:before {    -moz-box-sizing: border-box;    box-sizing: border-box;    background-clip: padding-box; 

单选框/复选框

以单选框为例，相关代码如下：

HTML  !-- NO LABEL --   label       input type="radio" name="topcoat"      div  /div   /label   br   br   !-- LEFT LABEL --   label      Left label     input type="radio" name="topcoat"      div  /div   /label   br   br   !-- RIGHT LABEL --   label       input type="radio" name="topcoat"      div  /div     Right label  /label   br   br   !-- DISABLED --   label       input type="radio" name="topcoat" Disabled      div  /div     Disabled  /label   CSS：  input[type="radio"] {    height: 1.063rem;    width: 1.063rem;    margin-top: 0;    margin-right: -1.063rem;    margin-bottom: -1.063rem;    margin-left: 0;  input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {    opacity: 1;  .topcoat-radio-button {    color: #c6c8c8;    line-height: 1.063rem;  .topcoat-radio-button__checkmark:before {    width: 1.063rem;    height: 1.063rem;    background: #595b5b;    border: 1px solid #333434;    box-shadow: inset 0 1px #737373;  .topcoat-radio-button__checkmark {    position: relative;    width: 1.063rem;    height: 1.063rem;  .topcoat-radio-button__checkmark:after {    opacity: 0;    width: 0.313rem;    height: 0.313rem;    background: #c6c8c8;    border: 1px solid rgba(0,0,0,0.05);    box-shadow: 0 1px rgba(255,255,255,0.1);    -webkit-transform: none;    -ms-transform: none;    transform: none;    top: 0.313rem;    left: 0.313rem;  input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {    border: 1px solid #0036ff;    box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;  input[type="radio"]:active + .topcoat-radio-button__checkmark:before {    border: 1px solid #333434;    background-color: #3f4041;    box-shadow: inset 0 1px rgba(0,0,0,0.05);  input[type="radio"]:disabled:active + .topcoat-radio-button__checkmark:before {    border: 1px solid #333434;    background: #595b5b;    box-shadow: inset 0 1px #737373;  .range {    padding: 0;    margin: 0;    font: inherit;    color: inherit;    background: transparent;    border: none;    -moz-box-sizing: border-box;    box-sizing: border-box;    background-clip: padding-box;    vertical-align: top;    outline: none;    -webkit-appearance: none;  .range__thumb {    cursor: pointer;  .range__thumb--webkit {    cursor: pointer;    -webkit-appearance: none;  .range:disabled {    opacity: 0.3;    cursor: default;    pointer-events: none;  .range,  .topcoat-range {    padding: 0;    margin: 0;    font: inherit;    color: inherit;    background: transparent;    border: none;    -moz-box-sizing: border-box;    box-sizing: border-box;    background-clip: padding-box;    vertical-align: top;    outline: none;    -webkit-appearance: none;  .range__thumb,  .topcoat-range::-moz-range-thumb {    cursor: pointer;  .range__thumb--webkit,  .topcoat-range::-webkit-slider-thumb {    cursor: pointer;    -webkit-appearance: none;  .range:disabled,  .topcoat-range:disabled {    opacity: 0.3;    cursor: default;    pointer-events: none; 

更多关于Topcoat的组件，大家可以前往其官方网站进行学习。

作者：佚名

来源：51CTO

彩虹女神跃长空,Go语言进阶之Go语言高性能Web框架Iris项目实战-JWT和中间件(Middleware)的使用EP07 前文再续，上一回我们完成了用户的登录逻辑，将之前用户管理模块中添加的用户账号进行账号和密码的校验，过程中使用图形验证码强制进行人机交互，防止账号的密码被暴力破解。本回我们需要为登录成功的用户生成Token，并且通过Iris的中间件(Middleware)进行鉴权操作。
彩虹女神跃长空,Go语言进阶之Go语言高性能Web框架Iris项目实战-完善用户管理EP04 书接上回，上一回我们完成了用户管理页面的构建，并且通过前端的Vue.js框架动态地获取表单数据，同时异步请求后端Iris接口进行入库操作，过程中使用函数封装可复用的逻辑。 本回我们将继续完善用户管理功能。
彩虹女神跃长空,Go语言进阶之Go语言高性能Web框架Iris项目实战-用户系统EP03 前文再续，之前一篇我们已经配置好了数据库以及模板引擎，现在可以在逻辑层编写具体业务代码了，博客平台和大多数在线平台一样，都是基于用户账号体系来进行操作，所以我们需要针对用户表完成用户账号的CURD操作。
传统Web框架迁移 与其说Serverless架构是一个新的概念/架构，倒不如说他是一个全新的思路，一种新的编程范式，在这种新的架构下，或者说新的编程范式下，使用全新的思路来做Serverless应用是再好不过的了，但是实际上并不是这样的，原生的Serverless开发框架是非常少的，以Web框架为例，目前的主流的Web框架“均不支持Serverless模式部署”，一方面是我们要尝试接触Serverless，一方面又没办法完全放弃传统框架，所以将传统框架如果更简单、更快速、更科学的部署到Serverless架构上就是一个值得探讨的问题。