收藏！各大网站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
css实现将网页变成黑白色
将整个网页全局变色有三种方法，分别是：css直接设置，添加svg滤镜，通过js遍历所有标签更改颜色。1、css直接设置直接编辑样式，然后在需要应用的地方设置class.gray { -webkit-f...
2020-05-12
了解CSS九宫格布局的几大实现方法
除非特别说明，以下几种方式的通用html结构如下：<div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</...
2020-05-09
css文件修改不生效怎么解决？
修改css文件不生效1、F12查看css样式，看是否被别的样式覆盖了，如果覆盖可以使用!important强制修改css样式2、在网页上面Ctrl+F5强制刷新3、只针对于使用了加速器的网站。登录...
2020-05-09
css如何让文字不能选中？
CSS设置文字不能被选中兼容写法：/*设置文字不能被选中 以下为css样式*/-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;说明：us...
2020-05-09
css如何在界面滚动时不出现滚动条？
需求：在界面滚动时，元素右侧不显示滚动条。查了网上的答案，最后总结了一下几个情况。1、设置常规的滚动条：使用 overflow:auto。父元素需要设置一个高度，设置相对定位，这样子元素...
2020-05-09
CSS如何设置强制不换行？
强制换行与强制不换行用到的属性我们一般控制换行所用到的CSS属性一共有三个：word-wrap; word-break; white-space。这三个属性可以说是专为了文字断行而创造出来的。首先我...
2020-05-09
关于css中清除浮动（clearfix）的介绍
清除浮动clearfix实例代码：.clearfix:after, .clearfix:before { content: " "; display: table;}.clearfix:after { clear: both;} .clearfix{zoom...
2020-05-09
font属性的综合写法
font属性的综合写法，书写顺序分别是：font-style font-variant font-weight font-size font-family。实例：.ziti {font:italic normal bold 18px arial;}如果哪项属性是默认值，可...
2020-05-09
CSS属性box-sizing详解
CSS盒模型你需要先了解CSS盒模型CSS盒模型中 width 与 height 的计算规则：在CSS中，你设置一个元素的width与height只会应用到这个元素的内容区。如果这个元素有任何的 border...
2020-05-09
行内元素与块级元素有什么区别
块级元素1、总是从新行开始2、高度、行高、外边距以及内边距都可以控制3、宽度默认是浏览器的100%4、可以容纳内联元素以及其他块元素行内元素1、和相邻元素在一行上
2、高...
2020-05-08
如何利用css改变浏览器滚动条样式
注意：该方法只适用于 -webkit- 内核浏览器滚动条外观由两部分组成：1、滚动条整体滑轨2、滚动条滑轨内滑块在CSS中滚动条由3部分组成name::-webkit-scrollbar //滚动条整体样式...
2020-04-28
如何利用css生成可控虚线
目的：生成如下图所示虚线实现方式实现方式，有的人用多个span生成，一个小圆点就是一个span，这样是可以，但是整个状态改变比较麻烦，有什么方式生成可以控制的虚线呢？生成dashed生成横...
2020-04-27
用CSS播放声音的几种技巧方法
CSS 是样式、布局和表示的领域。它充斥着颜色、大小和动画。但是你知道吗，它还可以在网页上控制播放声音。本文介绍了一些技巧。实际上它并不是真正的 hack，而是针对 HTML 和...
2020-04-20
利用CSS中的 outline-offset 属性实现加号
假设有这么一个初始代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
2020-04-20
通过iframe监听一个DOM元素大小变化
开发过程中经常遇到的一个问题就是如何监听一个 div 的size变化。比如我用canvas绘制了一个chart，当canvas的size发生变化的时候，需要重新绘制里面的内容，这个时候就需要监听re...
2020-04-20
CSS 实现渐变效果小结( linear-gradient线性渐变 和 radial-gradient径向渐变)
线性渐变( linear-gradient )background-image: linear-gradient(to 方向, 开始颜色, 中间颜色1, 中间颜色2, ... , 结束颜色 );四个方向的组合-八个方向
top, right, botto...
2020-04-20
Bootstrap 4设置响应式字体大小
Bootstrap v4.3引入了响应字体大小（RFS），您可以在SCSS编译器中启用它。如果你正在为你的项目编译CSS，我强烈建议你打开它。如果您从CDN加载Bootstrap，您将无法利用这些RFS规则。...
2020-03-21
