CSS动态条形加载条效果的示例代码
运用了css变量的知识，直接上代码及其我加的注释<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>展示一个css动态条形加载条</title> <style> /...
2020-10-15
CSS3实现线性渐变用法示例代码详解
前言演示下太老版本浏览器的渐变实现了[IE9-];
IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样;.testDiv { width:400px; height:400px; border:1px solid #f00; /...
2020-10-15
H5中取消a标签在点击时的背景颜色的方法
1、取消a标签在移动端点击时的蓝色a { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -moz-user-focus: none; -moz-user-select:...
2020-10-15
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
简写属性是用于同时给多个属性赋值的属性。比如font是一个简写属性，可以用于设置多种字体属性。它指定了font-style、font-weight、font-size、font-height以及font-family。...
2020-10-15
CSS心形加载的动画源码的实现
废话不多说上代码，代码很简答，研究一下就明白了，有不明白的可以问我。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/cs...
2020-10-15
使用CSS3实现字体颜色渐变的实现
在使用Animation.css的时候发现它的官网字体会渐变，看了一下他的css很有趣 .site__title { color: #f35626; background-image: -webkit-linear-gradient(92deg, #f35...
2020-10-15
css动画效果之animation的常用样式
animation动画定义一个动画：/*设置一个关键帧，定义动画每一步执行的动作*/@keyframes mybox{ 0%{transform: translate(0,0);} 25%{transform: transla...
2020-10-15
使用css的filter写鼠标滑过效果的实现示例
使用css的filter写鼠标滑过效果<div class="filter-div"> <img class="filter-img" src="../assets/images/01list.png"/></div><style> .filter-div { width: 67p...
2020-10-15
详解css-vars-ponyfill 在ie环境下使用问题（nextjs 构建）
css-vars-ponyfill通过css变量来实现网页换肤的过程中，会出现兼容性问题。 为了解决ie，qq，百度浏览器等兼容性问题，引入css-vars-ponyfill，但是在ie浏览器下，css-vars-ponyfill 的...
2020-10-15
CSS中使用text-align、margin：0 auto居中的示例代码
CSS中使用text-align、margin：0 auto居中在使用text-align或者是margin：0 auto进行居中时，可能会出现无效的情况，下面用两个例子来讲解和解决问题示例1：让内联元素居中使用text-a...
2020-10-15
CSS line-height的如何继承的问题
Line-height的如何继承？ 写具体数值，如30px,则继承该值（比较好理解）写比例，如2/1.5,则继承该比例（比较好理解） 比如body中line-height设为2，则p标签继承line-height为2,则算出...
2020-10-15
浅谈CSS到底会不会阻塞页面渲染
可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我们就一起来分析一下。原理解析那么为什么会出现上面的现象呢？我们从浏览器的渲...
2020-10-15
CSS实现鼠标悬停改变其他标签样式的示例代码
前言：
据我了解目前CSS只能控制悬停时改变该标签下面的兄弟标签和子标签样式，如有大佬有好的方法请指教！
控制其他标签（根据控制标签与被控制标签之间的关系）可分为三种...
2020-10-15
解决line-height=height元素高度但是文字并没有垂直居中的问题
先说下为什么line-height等于元素高度文字却没有垂直居中，其实line-height等于元素高度的时候文本并不是真的居中了，而是看着居中了，当元素高度和font-size差距较大的时候，这种...
2020-10-15
深入浅析CSS 的多种背景及使用场景和技巧
本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料CSS background是最常用的CSS属性之一。然而，并不是所有开发人...
2020-10-15
详解中文字体在CSS样式中font-family对应的英文名称
宋体：SimSun
黑体：SimHei
微软雅黑：Microsoft YaHei
微软正黑体：Microsoft JhengHei
新宋体：NSimSun
新细明体：PMingLiU
细明体：MingLiU
标楷体：DFKai-SB
仿宋：FangSong
楷体：KaiTi
仿...
2020-10-15
纯CSS实现图片百叶窗展示效果示例
首先给大家看一下完成效果主要思路：其实这个百叶窗还是利用了一种障眼法，我们看上去是鼠标移动上去之后，图片展开了，其实这些图片在原地根本没有动，只不过是我们把这些图片放在了...
2020-10-15
css 命名：BEM, scoped css, css modules 与 css-in-js详解
css 作用域是全局的，项目越来越大，人越来越多，命名慢慢成为问题，以下是几种解决命名问题的方案一. BEM以 .block__element--modifier 形式命名，命名有含义，block 可视为模块，有一定...
2020-10-15
CSS八种让人眼前一亮的HOVER效果的示例代码
一.发送效果HTML<div id="send-btn"> <button> // 这里是一个svg的占位 Send </button></div>CSS#send-btn{ display: flex; align-items: center; justify-cont...
2020-10-15
css3实现动画的三种方式
这是一个考验面试者对css的基础知识。css 实现动画主要有3种方式第一种是： transition 实现渐变动画第二种是： transform 转变动画第三种是： animation 实现自定义动画下面具体...
2020-10-15
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
要使用标准的CSS3实现某元素的投影效果，有两个套路，第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow，那这两个阴影实现有什么具体的差异呢？一...
2020-10-15
完美解决谷歌浏览器自动填充问题
在谷歌浏览器中，登陆成功后，谷歌浏览器会提示是否记住密码。如果选择记住密码，那么再次登录会出现诸如下边情况：如果产品需求是不希望浏览器自动填充账号密码，那么怎么去除呢？最先...
2020-10-15
看完不迷糊的 CSS 盒子模型介绍
网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物—&mdas...
2020-10-15
flex是什么及flex布局语法教程详解
Flex布局Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，自由的操作容器中元素(项目)的排列方式任何一个容器都可以指定为 Flex 布局。.box{...
2020-10-15
CSS+JS实现水滴涟漪动画按钮效果的示例代码
代码如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...
2020-10-15
CSS 中的六个重要选择器(三秒就可以记住)
来自：https://blog.csdn.net/qq_44761243/article/details/108227213CSS 的选择器有哪些？？？1.通配符（*）也可称作全局选择器或者通用选择器，顾名思义，就是定义所有的元素的样式。常用...
2020-10-15
详解css3中dispaly的Grid布局与Flex布局
Gird布局与Flex布局有一定的相似性，都是对容器的内部项目进行划分。 Flex布局是轴线布局，只能指定项目针对轴线的位置，可以看作成一维布局 Grid布局则是将容器划分成行和...
2020-10-15
CSS中三角形的绘制与巧妙应用实例详解
引网页中常见的一些三角形，无需制作成图片或者字体图标，使用CSS就可以直接画出来。如小米官网中：以及京东网页中的：那么这些三角通过是CSS怎么实现的呢？三角的实现我们可以通过将...
2020-10-15
纯css实现轮播图banner自动轮换效果
话不多说 直接上代码* { margin: 0; padding: 0; } .container { margin:300px auto; height: 400px;...
2020-10-15
让我来教你使用css中的字体图标的方法
首先什么是字体图标呢，那就是表面上是图标，其实它是文字，我们可以就像设置文字一样去设置字体图标，一般可以使用两种方式去设置字体图标，一种是引入css文件，然后设置特殊的class就...
2020-10-15
CSS 首行缩进两个文字
总是在前面加上8个“ ”，因为过去大家对CSS的概念也不太熟悉，也不太重视，这种方法实现虽然比较直接，但是文字多的时候会有很多“ ”充斥在代码中，如果再...
2020-10-15
css 中的background:transparent到底是什么意思有什么作用
有时我在看css时,看到有的css属性定义为background:transparent。意思就是背景透明。实际上background默认的颜色就是透明的属性。所以写和不写都是一样的
有段时间没写文...
2020-10-15
CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)
-webkit-border-radius：苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核；
-moz-border-radius：moz这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性。
在这两...
2020-10-15
CSS自定义select下拉选择框的样式(不用其他标签模拟)
今天群里有人问到怎么自定义select下拉选择框的样式，于是群里就展开了激烈的讨论，刚开始一直就是考虑怎样使用纯CSS实现，把浏览器默认的样式覆盖掉，但最后均因兼容问题处理不...
2020-10-15
CSS 文本字体颜色设置方法(CSS color)
一、认识CSS 颜色（CSS color）这里要介绍的是网页设置颜色包含有哪些；网页颜色规定规范。1、常用颜色地方包含：字体颜色、超链接颜色、网页背景颜色、边框颜色
2、颜色规范与颜色...
2020-10-15
css设置各种中文字体如雅黑、黑体、宋体、楷体等等
复制代码代码如下:
.selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu }
说明：
加上中文名“微软雅黑”是...
2020-10-15
HTML设置超链接字体颜色和点击后的字体颜色
定义链接样式
CSS为一些特殊效果准备了特定的工具，我们称之为“伪类”。其中有几项是我们经常用到的，下面我们就详细介绍一下经常用于定义链接样式的四个伪类，...
2020-10-15
css控制UL LI 的样式详解(推荐)
复制代码代码如下:
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li class="menuDiv"></li>
<li><a href="#">博客</a></li>
<li class="...
2020-10-15
CSS 实现内容高度不够的时候底部(footer)自动贴底
在 UI 切图过程中，页面往往由三个部分组成，头部、内容和底部。当页面的内容高度不够撑满屏幕，底部（footer）就跟着内容浮动上来了，小屏幕由于高度有限看不出来异常，但如果是大屏的话...
2020-10-15
详解浮动元素引起的问题和解决办法
一、问题 多个浮动的元素无法撑开父元素的宽度，父元素的高度可能会变成0。 若浮动元素后面跟非浮动元素，非浮动元素会紧随其后浮动起来。 若浮动元素前面还有同级元...
2020-10-15
CSS3动画和HTML5新特性详解
一、css3动画☺css3动画相对于通过JavaScript动态改变元素样式性能更好，更加容易。CSS3中有三个关于动画的属性：transform、transition和animation。
1、transform
trans...
2020-10-15
CSS常用样式之绘制双箭头的示例代码
一、多次调用单箭头实现了单箭头–就很容易实现双箭头了，上文已经介绍2种实现单箭头的原理： 边框旋转方式、双三角覆盖方式。这次以边框旋转为例多次调用实现双箭头。
1...
2020-10-15
CSS中flex和inline-flex的区别详解
inline-flex 和 inline-block 一样，对内部元素来说是个 display:flex 的容器，对外部元素来说是个 inline 的块。两者的区别描述： flex： 将对象作为弹性伸缩盒显示 inline-...
2020-10-15
详解CSS布局中浮动问题的四种解决方案
一、起因：子盒子设置浮动之后效果：由此可见，蓝色的盒子设置浮动之后，因为脱离了标准文档流，它撑不起父盒子的高度，导致父盒子 高度塌陷 。如果网页中出现了这种问题，会导致我们整个...
2020-10-15
CSS解决inline-block的错位问题
废话不多说 帖代码html部分<div class="positionleft">我是position方式的左边，占30%</div> <div class="positionright">我是position方式的右边，占70%</div>css部分...
2020-10-15
利用纯css做一个下拉菜单功能的示例代码
导语：
这几天看面试题目的时候，经常能够看到用css去实现一个下拉菜单，但是我发现很多人却没能够做出来，最后只能勉强用js做出来。实话实说，我很震惊，这个功能实现起来很简单，甚至可...
2020-10-15
浅谈CSS 伪元素&伪类的妙用
在一个网页中CSS占着非常重要的地位。近年来随着CSS的发展，伪元素/伪类也开始被大量应用：在性能愈加被看中的当下，处于文档流之外的CSS伪元素/伪类是当之无愧的“无冕之王...
2020-10-15
CSS子元素选择父元素的实现
通常一个CSS选择器都是从上往下选择的，通过父元素选择子元素，那么能不能通过子元素选择父元素呢？<ul> <li> <a href="#" class="active">1</a> </li> <li>...
2020-10-15
CSS 屏幕大小自适应的实现示例
要想实现css屏幕大小自适应，首先得引入 CSS3 @media 媒体查询器：media的使用和规则： ①被链接文档将显示在什么设备上。 ②用于为不同的媒介类型规定不同的样式。语法： @m...
2020-10-15
CSS中的translate(-50%,-50%)实现水平垂直居中效果
translate(-50%,-50%) 属性：
向上和左，移动自身长宽的 50%，使其居于中心位置。与使用margin实现居中不同的是，margin必须知道自身的宽高，而translate可以在不知道宽高的情况下进...
2020-10-15
