好文分享

数学表达式calc()是css中的函数，主要用于数学运算。使用calc()为页面元素布局提供了便利和新的思路。 定义 数学表达式calc()是calculate计算的缩写，它允许使用+、-、*、/这四种运算符，可以混合使用%、px、em、rem等单位进行计算 兼容性: IE8-、safari5.1-…

说到背景也就只有背景颜色和颜色图片，这两个我想大家一定都知道在里加入bgcolor=”#808080″和background=”url”对吧，可是我这里将要介绍不是这样做的，而是用css样式来做的，虽说有些麻烦，可是整体配合还是非常不错的。 背景颜色 …

设计思路(无关你是scss还是less) 1、为了方便内部元素水平/垂直居中, 整体我们用flex布局. 2、使用正方形占位, 因为用了padding-top:100%, 所以我们就需要再单独用一个div来装内容, 我给他起名”item__content”. 3、为了让内容的…

1、初始index.html 为了建立第一张照片，也就是最上面的那张。我们只需要添加一个div，里面包含照片的img。就这么多，剩下的效果都是通过CSS来实现的。确保div的class为stackone。 Photo Stack * { margin: 0; padding: 0; } html, …

原理 表单元素中，有一个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状态的草图 这里要讲解一下，使…