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

});

本文来自企鹅号 - 全球大搜罗媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

css经典布局之左侧固定大小右侧自动适应

最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会...

2920
来自专栏Scott_Mr 个人专栏

React Native 系列(九) -- Tab标签组件

4599
来自专栏大数据钻研

初识HTML之基础篇

前端认知 ---- 一、公司开发流程 1、 产品需求(产品经理给需求文档) 2、项目设计(视觉设计师给PSD文件,交互设计师配合) 3、前端开发 ...

3234
来自专栏企鹅号快讯

前端学习自学笔记:day10

今天是第十天的笔记,主要是HTML和CSS的,希望大家支持~ ? 在此之前先为大家显示下前端工程师的路线图: 第十天的笔记:HTML AND CSS: 响应式设...

2027
来自专栏从零开始学 Web 前端

html学习笔记(一)

单标签 <! Doctype html> 双标签 <html> </html> <head></head> <title></title>

6915
来自专栏CaiRui

Html再学

1.  Html是网页的载体。内容就是网页制作者放在页面上想要用户浏览的信息,可以包括文字、图片、视频等。 2.  CSS样式是展现。就像网页的外衣。比如,标题...

2896
来自专栏令仔很忙

新手学JavaScript(四)----CheckBox全选与全不选

在这给大家推荐一款比较不错的纯CSS实现的CheckBox–CSSCheckBox,用bootstrap里面自带的checkbox和radio样式不太美观,所...

8061
来自专栏自动化测试实战

HTML第六课——盒子模型的应用【1】

这里就是这个li标签里的所有属性了,我们在做开发时可以直接修改这里的属性值,然后直接在页面中查看效果,比如我现在在这里加一个

1332
来自专栏Flutter入门到实战

Android适配全面总结(一)----屏幕适配

版权声明:本文为博主原创文章(部分引用他人博文,已加上引用说明),未经博主允许不得转载。https://www.jianshu.com/p/7aa34434ad...

2074
来自专栏杨龙飞前端

2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

3784

扫码关注云+社区

领取腾讯云代金券