自动化平台搭建之css样式详解(二)

往往在搭建自动化平台时,我们可能涉及到一些页面,搭建页面对于CSS样式比较头大,那么今天为大家总结一篇文章,希望对大家有帮助,以及页面涉及验证,简单使用validate库的Demo,小编上次只介绍了一部分,今天继续。。

嵌套规则:硬的包软

块标签可以嵌套任意标签,p不能嵌套块标签

行内标签只能嵌套行内标签,a可以嵌套任意标签,但是a不能包a

opacity:透明度,很暴力,子级也透明了

选择器:

通配符:*

标签选择器:div{}

类选择器:.box{}

ID选择器:#box{}

群组选择器:p,div,span{}

筛选选择器:.div1.box{}

嵌套选择器:p span{}

伪类选择器:

a:link{}

a:visited{}

a:hover{}

a:active{}

直接子级选择器:

优先级:听谁的话

!important>行间样式>id>.box>div>*

超无敌>无敌>100>10>1>0.1

文本样式都能继承

如果自己有的样式,那就不继承父级的样式

清空默认样式:

body,p,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,input,textarea

li

a

img

居中问题:

margin:0 auto; 让有宽度的盒子水平居中

text-align:center; 让盒子里的文字(图片)水平居中

background-position:center ;背景图居中

line-height:50px; 让单行文本垂直居中

盒子垂直水平居中:用定位

position:absolute;

top:50%; left:50%;

margin-left:-宽度的一半px;

margin-top:-高度的一半px;

图片的格式:

jpg:

用于商品图片,

插入图片

经常更换

png:

用于logo,精细的小图标

背景图片

不经常更换

gif:

用于动态的图标

Demo:验证了一个注册功能

$(function(){

$("#reg-form").validate({

rules:{

nick: {

required:true,

rangelength:[6,10],

},

psw:{

required:true,

rangelength:[6,16],

},

psw1:{

required:true,

equalTo:"#psw",

},

mail:{

required:true,

email:true

},

tel:{

number:true,

isMobile:true,

},

old:{

min:12,

}

},

messages:{

nick:{

required: "昵称不能为空",

},

psw:{

required:"密码不能为空",

},

psw1:{

required:"确认密码不能为空",

equalTo:"两次密码不一致",

},

mail:{

required:"邮箱不能为空",

email:"请输入正确格式的电子邮件"

},

tel:{

number:"请正确填写您的手机号码",

},

old:{

}

}

});

//验证手机

$.validator.addMethod("isMobile",function(value,element){

var length =value.length;

returnthis.optional(element) (length == 11);

},"正确的手机号码为11位数字");

});

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20171219G09Q1800?refer=cp_1026

扫码关注云+社区