自动化平台搭建之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位数字");

});