谈谈CSS选择器优先级和!important权重
CSS中的选择器优先级与!important权重 .class选择器要高于标签选择器。 #id选择器要高于.class选择器。 标签选择器是优先级最低的选择器。 !important的属性它的权重值优先...
2020-09-27
纯CSS如何实现火焰动画效果？（实例介绍）
今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。嗯，长什么样子？在 CodePen 上输入关键字 CSS Fire，能找到这样的：或者这样的：我们希望，仅仅使用 CSS ，效果能再更进一步吗？能不能...
2020-09-27
使用CSS变量提高灵巧布局效率的小技巧
有些情况下，我需要用一种简单的方法来创建网格布局。 例如，每次我改变主意时，在不修改CSS的情况下快速画出五列网格。 在本文中，我们一起探索一些用例，并思考如果实现及使用它们...
2020-09-27
css3如何实现进度条动画效果？（代码示例）
项目过程中，开始使用了js的requestAnimationFrame方法实现进度条，但是在数据超级多的时候非常影响性能，如此改用css去实现，优化。先贴代码：<!DOCTYPE html><html lang="en"><head...
2020-09-27
优化滚动的小技巧：使用sroll-snap-type！！
根据 CSS Scroll Snap Module Level 1 规范，CSS 新增了一批能够控制滚动的属性，让滚动能够在仅仅通过 CSS 的控制下，得到许多原本需要 JS 脚本介入才能实现的美好交互。Tips：本...
2020-09-27
CSS如何实现酷炫的充电动画效果？（代码示例）
本篇文章给大家介绍一下巧用 CSS 实现酷炫充电动画效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。循序渐进，看看只使用 CSS ，可以鼓捣出什么样的...
2020-09-27
增强页面语义的小技巧：使用display: contents！
display: contents 是一个比较陌生的属性，虽然属于 display 这个基本上是最常见的 CSS 属性，但是 contents 这个取值基本不会用到。但是它早在 2016 年就已经得到了 Firefox...
2020-09-27
CSS实现带圆角的渐变边框的几种方法
CSS如何实现带圆角的渐变边框？下面本篇文章给大家介绍一下使用CSS巧妙实现带圆角的渐变边框的几种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。如何...
2020-09-27
纯CSS3如何实现兔斯基动态害羞表情？（代码介绍）
直接分享代码吧：html结构：<div class="tuzki_container"> <div class="tuzki"> <div class="leftear"></div> <div class="rightear"></div> <div cl...
2020-09-27
分享九款纯CSS3制作的可爱复古相机（代码示例）
PS： 有人会说，这些东西实用性不强，没啥用。一开始我也是这么觉得，但后来我就改变自己的看法。首先，实用性目前来说确实不强，或者说应用范围很窄。但其实它可以提高自己的创意思维，c...
2020-09-27
谈谈css多栏自适应布局
首先，在这里我将从最简单的两栏固定布局慢慢讲到多栏自适应布局。1、固定布局说到固定布局想必大家已经觉得无爱了，但我还是要简单地讲一下，下面通过一个简单的实例进行讲解：htm...
2020-09-27
CSS清除浮动的几种方法
首先这里就不讲为什么我们要清楚浮动，反正不清除浮动事多多。下面我就讲三种常用清除浮动的方法，够用了。1、在浮动元素后面加一个空的div，并为它清除浮动html代码：<div class="...
2020-09-27
详解使用CSS Viewport单位快速布局！！
CSS Viewport units(视口单位)在过去几年已经出现了，随着时间的推移，越来越多的开发人员开始使用它们。它们的好处在于为我们提供了一种不需要使用J avaScript 就能以动态的方...
2020-09-27
CSS3如何实现文字折纸效果？（代码示例）
代码如下，复制即可使用：<!DOCTYPE html><html><head> <title></title> <style type="text/css"> html { height: 100%;}body { background: -webkit-linear-gr...
2020-09-27
神奇的CSS3混合模式---制作高级特效的必备技巧！
什么是混合？根据维基百科：数字图像编辑和计算机图形中的混合模式(或混合模式)用于确定两个图层如何相互混合。在大多数应用程序中，默认的混合模式只是通过用顶层的内容覆盖底层...
2020-09-27
CSS 上下居中的方法总结
<center>在CSS里不好使了,在CSS里 解决上下居中问题又能支持both IE和Firefox的有3种方案:
第一种,上下居中文字:
方法是使用line-height,因为line-height就是用来定义文字...
2020-09-27
使用Minify压缩css和js文件
Minify 是用PHP5开发的应用，通过遵循一些Yahoo的优化规则来提高网站的性能。它会合并多个CSS或者JavaScript文件，移除一些不必要的空格和注释，进行gzip压缩，并且会设置浏览器的...
2020-09-27
收藏！各大网站CSS代码初始化集合
css代码之所以初始化，是因为能尽量减少 各浏览器之间的兼容性问题!
腾讯QQ官网 样式初始化body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textar...
2020-09-27
CSS滚动条选择器实例：性化滚动条的实现
参考代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>个性化滚动条</title> <style> div{ width:600px; heigh...
2020-09-27
16个提升布局效率的 CSS 伪类
css 伪类是用于向某些选择器添加特殊的效果，是动态的，指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样...
2020-09-27
前端开发中好用的 5个CSS函数
简介CSS 包含了许多函数，而且它能够完成许多早期需要用 JavaScript才能完成的事情。每年都有新的特性被添加进来，这让我们的开发更加轻松，也减少了对JavaScript的依赖。CSS 函...
2020-09-27
CSS3如何实现时间轴效果？（代码示例）
最近打开电脑就能看到极客学院什么新用户vip免费一个月，就进去看看咯，这里就不说它的课程怎么滴了，里面实战路径图页面看到了这个效果：有点像时间轴的赶脚，而且每一块鼠标悬浮上...
2020-09-27
10种实用的CSS3 Loading效果（分享）
第1种效果：代码如下：<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span></div>.loading{...
2020-09-27
谈谈css中的3种预处理器
一、介绍CSS预处理器定义了一种新的语言，基本的思想是用一种专门的编程语言，开发者只需要使用这种语言进行编码工作，减少枯燥无味的CSS代码的编写过程的同时，它能让你的CSS具备...
2020-09-25
详解css3 flex弹性盒自动铺满写法
本文主要介绍了详解css3 flex弹性盒自动铺满写法，分享给大家，具体如下：<style type="text/css"> .flexcontainer{ width:100%; height: 100%; positio...
2020-09-19
css实现一个简单的扁平化按钮
我们先来看下按钮样式：具体代码：<button id="btn">打印</button>//js写法$("#btn").css({ "font-family": "'微软雅黑','Helvetica Neue',Helvetica,Arial,sa...
2020-09-18
less百行代码实现bootstrap栅格布局
使用过bootstrap的都知道，bootstrap的强大的12栅格系统；在响应式布局中这12栅格布局是非常有用的。
有时候做个简单的页面并不想把所有整个bootstrap引入到页面中，于是便在空余...
2020-09-18
css实现可收缩的上下左右布局
代码实现：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="edge"/...
2020-09-18
详解CSS清除图片下几像素空白间隙的方法
这篇文章主要介绍了CSS清除图片下几像素空白间隙的方法 ,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...
2020-09-16
CSS 水平居中并限定最大的宽度实现
这篇文章主要介绍了CSS 水平居中并限定最大的宽度实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...
2020-09-16
CSS3 border-radius圆角的实现方法及用法详解
这篇文章主要介绍了CSS3 border-radius圆角的实现方法及用法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...
2020-09-16
css中filter属性和backdrop-filter的应用与区别详解
这篇文章主要介绍了css中filter属性和backdrop-filter的应用与区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...
2020-09-16
你会使用css锚点么
CSS锚点使用有两种方法，我建议使用下面这种：<a href='#one'>到达第一个锚点</a> <a href='#two'>到达第二个锚点</a> <div id='one'>我是第一...
2020-09-16
纯css实现流向性和动态线条效果的代码
思路： 一个外层盒子设置背景；一个内层盒子设置宽高背景，并设置animate让盒子移动demo:css部分：@keyframes mymove { from{left:0px;} to{left:70px;}}.father{background: #74...
2020-09-03
纯css代码实现简单下拉菜单效果
实现方法：1、用ul 和 li标签写一个关联结构(ul 和 li的父子关系浑然天成，一般的关联结构都用它们)<ul class="nav"> <a href="#">服装</a> <ul class="plat"> <l...
2020-09-03
css如何实现Tab切换
方法一、利用a标签的锚点实现tab切换代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"> <title>cssTab切换2</title> <style type="text/css"> *{...
2020-08-25
css如何实现按钮居中显示
先来看下效果：通过简单的Css样式就可以实现<div style="margin:0 auto;width:200px;"><input class="submit" id="btn" type="submit" value="注册" /></div>使用margin-left...
2020-08-20
CSS究竟是怎么工作的？
HTML 代码和 CSS 代码共同构成了风格迥异的网页，HTML 代码定义了网页的框架与内容，CSS 则可以赋予网页独一无二的样式，那么，浏览器是如何处理 CSS 代码，将网页渲染成我们想要的结...
2020-08-10
css选择器有哪些？哪些属性是可以继承的？
CSS选择器：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=&r...
2020-06-19
如何合理使用CSS框架？
现在的网站风格已经与它们很早之前的样子有了很大的不同。如果现在再回过头去看有些公司最初的网站UI，我想大多数互联网用户都很难认得出来。所以也多亏了网页设计技术的创新...
2020-06-19
CSS弹性盒模型flex在布局中的使用方法
CSS弹性盒模型flex在布局中的应用元素居中【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items<style>.parent{ display: flex; justify-content: cent...
2020-05-31
深入理解px、rem、em、vh、vw之间的区别
绝对长度pxpx是像素值，是一个固定的长度，比如我们的米，厘米一样。相对长度为什么我们需要相对长度rem em等？固定长度已经不能满足我们现在的需求了。举例：比如我们在缩小我们屏幕...
2020-05-25
关于css中的id选择器与class选择器的介绍
id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。例如：#para1{ text-align:center;...
2020-05-24
css如何实现适配iphone全面屏
一、media query方式/*iPhone X 适配*/@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .fixed-bottom{...
2020-05-21
css如何实现字体长阴影效果
首先我们来看一下实现效果，如下图所示：重要属性：text-shadow 属性向文本设置阴影。HTML代码：<div class="long-shadow">屮艸芔茻</div>CSS代码： .loop(@counter) when (@counter...
2020-05-18
css如何实现底部tapbar栏效果
首先我们来看一下实现效果：css代码：*{ margin: 0; padding: 0; text-decoration: none; list-style: none; } .foot {...
2020-05-16
