CSS - 教程之家

202浏览

0评论

谈谈CSS选择器优先级和!important权重

CSS中的选择器优先级与!important权重 .class选择器要高于标签选择器。 #id选择器要高于.class选择器。标签选择器是优先级最低的选择器。 !important的属性它的权重值优先...

2020-09-27

224浏览

0评论

纯CSS如何实现火焰动画效果？（实例介绍）

今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。嗯，长什么样子？在 CodePen 上输入关键字 CSS Fire，能找到这样的：或者这样的：我们希望，仅仅使用 CSS ，效果能再更进一步吗？能不能...

2020-09-27

157浏览

0评论

使用CSS变量提高灵巧布局效率的小技巧

有些情况下，我需要用一种简单的方法来创建网格布局。例如，每次我改变主意时，在不修改CSS的情况下快速画出五列网格。在本文中，我们一起探索一些用例，并思考如果实现及使用它们...

2020-09-27

99浏览

0评论

css3如何实现进度条动画效果？（代码示例）

项目过程中，开始使用了js的requestAnimationFrame方法实现进度条，但是在数据超级多的时候非常影响性能，如此改用css去实现，优化。先贴代码：<!DOCTYPE html><html lang="en"><head...

2020-09-27

173浏览

0评论

优化滚动的小技巧：使用sroll-snap-type！！

根据 CSS Scroll Snap Module Level 1 规范，CSS 新增了一批能够控制滚动的属性，让滚动能够在仅仅通过 CSS 的控制下，得到许多原本需要 JS 脚本介入才能实现的美好交互。Tips：本...

2020-09-27

274浏览

0评论

CSS如何实现酷炫的充电动画效果？（代码示例）

本篇文章给大家介绍一下巧用 CSS 实现酷炫充电动画效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。循序渐进，看看只使用 CSS ，可以鼓捣出什么样的...

2020-09-27

242浏览

0评论

增强页面语义的小技巧：使用display: contents！

display: contents 是一个比较陌生的属性，虽然属于 display 这个基本上是最常见的 CSS 属性，但是 contents 这个取值基本不会用到。但是它早在 2016 年就已经得到了 Firefox...

2020-09-27

705浏览

0评论

CSS实现带圆角的渐变边框的几种方法

CSS如何实现带圆角的渐变边框？下面本篇文章给大家介绍一下使用CSS巧妙实现带圆角的渐变边框的几种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。如何...

2020-09-27

361浏览

0评论

纯CSS3如何实现兔斯基动态害羞表情？（代码介绍）

直接分享代码吧：html结构：<div class="tuzki_container"> <div class="tuzki"> <div class="leftear"></div> <div class="rightear"></div> <div cl...

2020-09-27

206浏览

0评论

分享九款纯CSS3制作的可爱复古相机（代码示例）

PS：有人会说，这些东西实用性不强，没啥用。一开始我也是这么觉得，但后来我就改变自己的看法。首先，实用性目前来说确实不强，或者说应用范围很窄。但其实它可以提高自己的创意思维，c...

2020-09-27

174浏览

0评论

谈谈css多栏自适应布局

首先，在这里我将从最简单的两栏固定布局慢慢讲到多栏自适应布局。1、固定布局说到固定布局想必大家已经觉得无爱了，但我还是要简单地讲一下，下面通过一个简单的实例进行讲解：htm...

2020-09-27

138浏览

0评论

CSS清除浮动的几种方法

首先这里就不讲为什么我们要清楚浮动，反正不清除浮动事多多。下面我就讲三种常用清除浮动的方法，够用了。1、在浮动元素后面加一个空的div，并为它清除浮动html代码：<div class="...

2020-09-27

212浏览

0评论

详解使用CSS Viewport单位快速布局！！

CSS Viewport units(视口单位)在过去几年已经出现了，随着时间的推移，越来越多的开发人员开始使用它们。它们的好处在于为我们提供了一种不需要使用J avaScript 就能以动态的方...

2020-09-27

200浏览

0评论

CSS3如何实现文字折纸效果？（代码示例）

代码如下，复制即可使用：<!DOCTYPE html><html><head> <title></title> <style type="text/css"> html { height: 100%;}body { background: -webkit-linear-gr...

2020-09-27

470浏览

0评论

神奇的CSS3混合模式---制作高级特效的必备技巧！

什么是混合？根据维基百科：数字图像编辑和计算机图形中的混合模式(或混合模式)用于确定两个图层如何相互混合。在大多数应用程序中，默认的混合模式只是通过用顶层的内容覆盖底层...

2020-09-27

245浏览

0评论

CSS 上下居中的方法总结

<center>在CSS里不好使了,在CSS里解决上下居中问题又能支持both IE和Firefox的有3种方案:

第一种,上下居中文字:
方法是使用line-height,因为line-height就是用来定义文字...

2020-09-27

194浏览

0评论

使用Minify压缩css和js文件

Minify 是用PHP5开发的应用，通过遵循一些Yahoo的优化规则来提高网站的性能。它会合并多个CSS或者JavaScript文件，移除一些不必要的空格和注释，进行gzip压缩，并且会设置浏览器的...

2020-09-27

203浏览

0评论

收藏！各大网站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

202浏览

0评论

CSS滚动条选择器实例：性化滚动条的实现

参考代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>个性化滚动条</title> <style> div{ width:600px; heigh...

2020-09-27

280浏览

0评论

16个提升布局效率的 CSS 伪类

css 伪类是用于向某些选择器添加特殊的效果，是动态的，指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样...

2020-09-27

181浏览

0评论

前端开发中好用的 5个CSS函数

简介CSS 包含了许多函数，而且它能够完成许多早期需要用 JavaScript才能完成的事情。每年都有新的特性被添加进来，这让我们的开发更加轻松，也减少了对JavaScript的依赖。CSS 函...

2020-09-27

172浏览

0评论

CSS3如何实现时间轴效果？（代码示例）

最近打开电脑就能看到极客学院什么新用户vip免费一个月，就进去看看咯，这里就不说它的课程怎么滴了，里面实战路径图页面看到了这个效果：有点像时间轴的赶脚，而且每一块鼠标悬浮上...

2020-09-27

162浏览

0评论

10种实用的CSS3 Loading效果（分享）

第1种效果：代码如下：<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span></div>.loading{...

2020-09-27

179浏览

0评论

谈谈css中的3种预处理器

一、介绍CSS预处理器定义了一种新的语言，基本的思想是用一种专门的编程语言，开发者只需要使用这种语言进行编码工作，减少枯燥无味的CSS代码的编写过程的同时，它能让你的CSS具备...

2020-09-25

487浏览

0评论

详解css3 flex弹性盒自动铺满写法

本文主要介绍了详解css3 flex弹性盒自动铺满写法，分享给大家，具体如下：<style type="text/css"> .flexcontainer{ width:100%; height: 100%; positio...

2020-09-19

297浏览

0评论

css实现一个简单的扁平化按钮

我们先来看下按钮样式：具体代码：<button id="btn">打印</button>//js写法$("#btn").css({ "font-family": "'微软雅黑','Helvetica Neue',Helvetica,Arial,sa...

2020-09-18

229浏览

0评论

less百行代码实现bootstrap栅格布局

使用过bootstrap的都知道，bootstrap的强大的12栅格系统；在响应式布局中这12栅格布局是非常有用的。
有时候做个简单的页面并不想把所有整个bootstrap引入到页面中，于是便在空余...

2020-09-18

152浏览

0评论

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

332浏览

0评论

详解CSS清除图片下几像素空白间隙的方法

这篇文章主要介绍了CSS清除图片下几像素空白间隙的方法 ,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...

2020-09-16

293浏览

0评论

CSS 水平居中并限定最大的宽度实现

这篇文章主要介绍了CSS 水平居中并限定最大的宽度实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...

2020-09-16

220浏览

0评论

CSS3 border-radius圆角的实现方法及用法详解

这篇文章主要介绍了CSS3 border-radius圆角的实现方法及用法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...

2020-09-16

275浏览

0评论

Css3实现无缝滚动防抖

这篇文章主要介绍了Css3实现无缝滚动防抖的方法，帮助大家解决图片抖动，感兴趣的朋友可以了解下...

2020-09-16

459浏览

0评论

css中filter属性和backdrop-filter的应用与区别详解

这篇文章主要介绍了css中filter属性和backdrop-filter的应用与区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...

2020-09-16

229浏览

0评论

你会使用css锚点么

CSS锚点使用有两种方法，我建议使用下面这种：<a href='#one'>到达第一个锚点</a> <a href='#two'>到达第二个锚点</a> <div id='one'>我是第一...

2020-09-16

418浏览

0评论

纯css实现流向性和动态线条效果的代码

思路：一个外层盒子设置背景；一个内层盒子设置宽高背景，并设置animate让盒子移动demo:css部分：@keyframes mymove { from{left:0px;} to{left:70px;}}.father{background: #74...

2020-09-03

131浏览

0评论

纯css代码实现简单下拉菜单效果

实现方法：1、用ul 和 li标签写一个关联结构(ul 和 li的父子关系浑然天成，一般的关联结构都用它们)<ul class="nav"> <a href="#">服装</a> <ul class="plat"> <l...

2020-09-03

216浏览

0评论

css如何实现Tab切换

方法一、利用a标签的锚点实现tab切换代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"> <title>cssTab切换2</title> <style type="text/css"> *{...

2020-08-25

202浏览

0评论

css如何实现按钮居中显示

先来看下效果：通过简单的Css样式就可以实现<div style="margin:0 auto;width:200px;"><input class="submit" id="btn" type="submit" value="注册" /></div>使用margin-left...

2020-08-20

189浏览

0评论

CSS究竟是怎么工作的？

HTML 代码和 CSS 代码共同构成了风格迥异的网页，HTML 代码定义了网页的框架与内容，CSS 则可以赋予网页独一无二的样式，那么，浏览器是如何处理 CSS 代码，将网页渲染成我们想要的结...

2020-08-10

229浏览

0评论

css选择器有哪些？哪些属性是可以继承的？

CSS选择器：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=&r...

2020-06-19

171浏览

0评论

如何合理使用CSS框架？

现在的网站风格已经与它们很早之前的样子有了很大的不同。如果现在再回过头去看有些公司最初的网站UI，我想大多数互联网用户都很难认得出来。所以也多亏了网页设计技术的创新...

2020-06-19

273浏览

0评论

CSS弹性盒模型flex在布局中的使用方法

CSS弹性盒模型flex在布局中的应用元素居中【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items<style>.parent{ display: flex; justify-content: cent...

2020-05-31

185浏览

0评论

深入理解px、rem、em、vh、vw之间的区别

绝对长度pxpx是像素值，是一个固定的长度，比如我们的米，厘米一样。相对长度为什么我们需要相对长度rem em等？固定长度已经不能满足我们现在的需求了。举例：比如我们在缩小我们屏幕...

2020-05-25

235浏览

0评论

3种CSS使用方法

(1)链接式:(外部引入.css文件)（用得比较多 ) <link>在html加载前就被引用在网页的<head></head>标签对中用<link>引入外部样式表，使用html规则引入外部css :　　　<link href...

2020-05-25

175浏览

0评论

关于css中的id选择器与class选择器的介绍

id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。例如：#para1{ text-align:center;...

2020-05-24

169浏览

0评论

CSS开发常用命名

CSS命名规范(规则)常用的CSS命名规则　　头：header　　内容：content/container　　尾：footer　　导航：nav　　侧栏：sidebar　　栏目：column　　页面外围控制整体佈局宽度：wrapper　...

2020-05-22

273浏览

0评论

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

227浏览

0评论

css如何实现字体长阴影效果

首先我们来看一下实现效果，如下图所示：重要属性：text-shadow 属性向文本设置阴影。HTML代码：<div class="long-shadow">屮艸芔茻</div>CSS代码： .loop(@counter) when (@counter...

2020-05-18

413浏览

0评论

无序列表怎么去掉点

无序列表怎么去掉点？通过给li标签添加代码”list-style:none“实现。实例演示如下：1、设计html页面，页面上有一些LI的标签，代码如下：2、添加一些css代码:3、此时的页面...

2020-05-18

198浏览

0评论

css如何实现底部tapbar栏效果

首先我们来看一下实现效果：css代码：*{ margin: 0; padding: 0; text-decoration: none; list-style: none; } .foot {...

2020-05-16

热门文章