css
水痕01
暂停更新博客
展开
-
SweetAlert详解
sweetalert相关组件,该插件不需要jQuery库支持<script src="sweetalert.min.js"></script> <link rel="stylesheet" href="sweetalert.css"> 参数 描述 默认值 title 提示框标题 - text 提示内容 - type 提示类型,有:success(成功)原创 2017-03-31 12:47:18 · 2525 阅读 · 1 评论 -
Redux-form嵌套到实际项目开发案例六
提交时候验证官方案例一、submit.js文件代码import {SubmissionError} from 'redux-form'const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))function submit(values) { return sleep(1000) // simulate serve原创 2017-04-07 17:45:51 · 1076 阅读 · 0 评论 -
Redux-form嵌套到实际项目开发案例五
本案例是同步校验表单的另外一种写法,操作方法一样的跟案例三是一样的一、新建一个src/component/FieldLevelValidationForm.js'use strict';import React,{Component} from 'react'import {Field, reduxForm} from 'redux-form'//定义一个必填的校验方法const requ原创 2017-04-07 16:57:22 · 899 阅读 · 0 评论 -
Redux-form嵌套到实际项目开发案例三
一、运行本项目案例直接把代码拷贝到案例一中的components文件夹下二、新建一个文件src/component/SimpleForm2.js文件'use strict';import React,{Component} from 'react'import {Field, reduxForm} from 'redux-form'class SimpleForm2 extends Compon原创 2017-04-07 16:25:05 · 1421 阅读 · 0 评论 -
Redux-form嵌套到实际项目开发案例二
ReduxForm和表单关联分为两个层面表单层面:ReduxForm提供的ReduxForm装饰器为表单组件提供了handleSubmit, pristine, reset, submitting等props,分别用于提交表单、判断表单数据是否改动、重置表单、显示正在提交这些功能字段层面:ReduxForm派遣了Field等组建与表单字段关联,Field不仅提供了一个component属性可以接原创 2017-04-07 15:10:19 · 1364 阅读 · 0 评论 -
合理利用css的权重:提高代码的重用性
一、关于css样式中的6种基础的选择器1、ID选择器2、CLASS选择器3、属性选择器(如a[href="xxx"])4、伪类和伪对象选择器(如::hover ::after)5、标签选择器(如:a,span)6、通配选择器(如:*)二、关于css样式的三种组合1、后代选择器(如:.reader .title{})2、子选择器(如:.reader > .title{})3、相邻选原创 2017-06-23 15:33:26 · 1630 阅读 · 0 评论 -
给css样式定义排序
一、 css样式分为7大类:1、显示与浮动2、定位3、尺寸(width,height)4、边框及相关属性(margin,padding,border,outline)5、字体样式6、背景(background)7、其它样式(opacity,cursors)二、 根据上面的规则依次来书写样式.reader-info { display: block; float: le原创 2017-06-23 15:04:48 · 3262 阅读 · 0 评论 -
关于css的reset:统一浏览器显示效果
body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup原创 2017-06-23 14:32:31 · 636 阅读 · 0 评论 -
关于css清除浮动的方法
.clearfix { *zoom: 1}.clearfix::before,.clearfix::after { display: table; content: "";}.clearfix::after { clear: both;}原创 2017-06-23 09:02:04 · 455 阅读 · 0 评论 -
handlebars.js模版引擎中EACH循环遍历的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script src="https://cdn.bootcss.com/handlebars.js/4.0.原创 2017-04-05 15:41:21 · 5023 阅读 · 2 评论 -
利用radio实现tab切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>radio选项卡切换</title> <style type="text/css"> *{margin:0;padding:0;} .test-box{width: 50%;margin: 10px aut原创 2017-04-04 22:55:55 · 2878 阅读 · 0 评论 -
css样式实现一个进度条
效果如图代码<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords"原创 2017-04-04 22:46:02 · 8461 阅读 · 0 评论 -
关于常见的左右赋权限的移动样式
效果如图:代码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>拖拽演示</title> <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script> <style type原创 2017-04-04 22:40:57 · 746 阅读 · 0 评论 -
css修改单选框与复选框样式
在移动端开发中往往要修改单选框与复选框的样式 案例效果如下: 代码如下:html代码:<section class="select-f select-f1"> <dl> <dt>您要选择装饰家居的原因是?<a href="javascript:void(0);" class="select-f1-allbtn">(全选原创 2017-04-04 22:34:03 · 2765 阅读 · 0 评论 -
Redux-form系列教程
一、Redux-form部署到redux项目中二、Redux-form与form的关系三、redux-form直接使用html标签四、redux-form同步校验表单五、redux-form同步校验表单六、redux-form提交验证表单七、redux-form异步校验(失去焦点就校验)八、redux-form初始化数据及同步校验九、redux-form直接获取数据原创 2017-04-12 15:30:06 · 1556 阅读 · 0 评论 -
使用form表单中自带的fieldset与legend
在form表单中常常被忽视的两个标签fieldset和legend 下面我是用了bootstrap的样式,把一些默认样式去除了<div class="container"> <div class="col-md-5"> <form role="form" action="" method="post"> <fieldset>原创 2017-03-14 22:31:13 · 8130 阅读 · 0 评论 -
书写高性能的css
一、使用高效的css选择器.reader p.list div{ //省去代码} 我们看css选择器是从左边到右边看的,实际上css解析的时候是从右边到左边解析的:1、css引擎是先查找页面中全部的div;2、找到了div继续查找该元素是否具有list的类的父元素;3、找到了含有list类的父元素过滤父元素是p的元素;4、继续查找父元素是否具有reader的类的父元素; 使用高原创 2017-06-26 09:50:48 · 652 阅读 · 0 评论