css

原理 表单元素中，有一个pattern属性，可以自定义正则表达式（如手机号、邮箱、身份证..）；valid伪类，可以匹配通过pattern验证的元素；invalid伪类则相反，可以匹配未通过pattern验证的元素。 （推荐教程：CSS入门教程） html代码 布局很简单，input跟button是…

想让整个界面有一个背景图片，自然想到的是在body上加background，代码如下： body { width：100%； height: 100%; /* 加载背景图 */ background: url(“../static/images/index/backImg.jpg”) no-repe…

position属性 position属性指定用于元素的定位方法的类型（静态，相对，固定，绝对或粘性）。 有五种不同的值： •static•relative•fixed•absolute•sticky 然后使用top，bottom，left和right属性定位元素。但是，除非首先设置position…

前言： 很多项目都需要改变滚动条的默认样式，并不想单独下载和引入插件。 修改方法：（推荐教程：CSS入门教程） &::-webkit-scrollbar { // 滚动条的背景 width: 16px; background: #191a37; height: 14px; } &::…

css zoom属性 zoom：设置或检索对象的缩放比例，触发IE浏览器的haslayout属性，解决浮动，margin重叠等一些问题。 语法： zoom:normal （推荐教程：CSS教程） 立即学习“前端免费学习笔记（深入）”； 参数： normal：使用对象的实际尺寸(默认值)number：…

首先是构思： 我们使用标签来实现这个效果。 checkbox的选中、未选中的特性，刚好对应开关的打开、关闭 on:打开 off:关闭 未选中，则关闭开关 选中，则打开开关 效果： 立即学习“前端免费学习笔记（深入）”； （推荐教程：CSS入门教程） 开始画出off、on状态的草图 这里要讲解一下，使…

目标： 实现一个宽度自适应，高度为宽度一半的容器。 一、思考如何实现 这个问题类似于：我们在移动端页面，上面有一张宽度 100% 的图片，如果我们没设置高度，则图片会根据原有尺寸，等比缩放。 我们可以借助这个想法，根据元素高度，来为元素设置一个相应比例的高度即可。 立即学习“前端免费学习笔记（深入）…

三中的使用方法的简单实例如下： 行内样式： css行内样式> （推荐教程：CSS教程） 内嵌样式： css内嵌样式#div{width:100px;height:100px;background:red;}> 外部式： 立即学习“前端免费学习笔记（深入）”； css内嵌样式 > c…

css实现垂直居中的方法如下： 1、利用line-height实现居中，这种方法适合纯文字类的； .parents { height: 400px; line-height: 400px; width: 400px; border: 1px solid red; text-align: center…

什么是等高布局？ 指在同一个父容器中，子元素高度相等的布局。 从等高布局实现方式来说分为两类： 1、伪等高 子元素高度差依然存在,只是视觉上给人感觉就是等高。 立即学习“前端免费学习笔记（深入）”； 2、真等高 子元素高度相等。 伪等高实现方式： 通过负margin和Padding实现 真等高实现方…