生僻标签 fieldset 与 legend 的用法详解
谈到<fieldset>与<legend>，大部分人肯定会比较陌生，在 HTML 标签中，属于比较少用的那一批。我最早知道这两个标签，是在早年学习 reset.css 或者 normalize.css 时，在这些重置统一...
2021-01-26
纯CSS3实现运行时钟的示例代码
运行效果代码实现html<div id="watch"> <div class="frame-face"></div> <ul class="minute-marks"> <li></li><li></li><li></li><li></li><li></li><l...
2021-01-26
css怎么设置文字加粗
css设置文字加粗的方法在css中，可以使用font-weight属性来加粗文字。font-weight属性可以用于设置文本文字的粗细。属性值越大字体越粗。属性值：示例1：使用关键字bold和bolder...
2021-01-25
使用CSS实现的几种进度条
进度条是一个非常常见的功能，实现起来也不难，一般我们都会用 div 来实现。作为一个这么常见的需求， whatwg 肯定是不会没有原生组件提供（虽然有我们也不一定会用），那么就让我们来...
2021-01-22
CSS %单位的特点
CSS %单位的特点是什么？百分比是一个相对长度单位，相对于父元素的尺寸。%的特点百分比是相对于父元素的尺寸，这和em(相对于当前元素的字体尺寸)以及rem（相对于根元素的字体尺寸）...
2021-01-21
5个有用的css函数（分享）
CSS 包含了许多函数，而且它能够完成许多早期需要用 JavaScript才能完成的事情。每年都有新的特性被添加进来，这让我们的开发更加轻松，也减少了对JavaScript的依赖。CSS 函数是...
2021-01-21
bootstrap实现简单侧边导航栏效果
bootstrap侧边导航栏实现原理 侧滑栏使用定位fixed 使用bootstrap响应式使用工具类 visible-sm visible-xs hidden-xs hidden-sm等对不同屏幕适配 侧滑栏的侧滑效果不使...
2021-01-21
div水平布局两边对齐的三种实现方法
本文主要介绍了div水平布局两边对齐的三种实现方法，分享给大家，具体如下：方法一父容器div使用 position: relative;,子div使用 position:absolute;定位，注意边距问题html<div cl...
2021-01-21
CSS3选择器新增问题的实现
基本选择器扩展1.子元素选择器:tomato: #wrap > .inner {color: pink;} 也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素 总结：>作用于元素...
2021-01-21
CSS世界--代码实践之图片alt信息呈现
使用缺省 src 的<img>元素实现滚屏加载效果，但是，就有可能存在这样一个体验问题：如果我们的 JavaScript 加载比较慢，我们的页面就很有可能出现一块一块白色的图片区域，纯白色的，没...
2021-01-21
CSS中IE11 hack专属样式的实现方法
虽然微软已经放弃IE了，但在国内，IE11浏览器市场份额仍有3%，甚至超过了苹果浏览器。有些CSS样式在IE11下失效，就可以使用IE hack来解决 @media screen and(-ms-high-contrast:ac...
2021-01-20
css3给背景图层加颜色遮罩的方法
在开发中，有时遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法。方法一：通过定位叠加(注意层级)<div class="wrap1"> <div class="inner">...
2021-01-20
css实现领积分动画效果
最近项目中要做一个领积分的效果，根据老板的描述，这个效果类似于支付宝蚂蚁森林里的领取能量。整体效果是就是在树周围飘着几个积分元素，上下滑动，类似星星闪烁，点击领取后，沿着树...
2021-01-20
css怎么控制按钮不可用
在HTML中我们可以直接通过HTML的disabled或readonly属性实现按钮不可点击；而在css中，可以使用pointer-events属性实现点击事件失效。我们可以为按钮添加“pointer-events...
2021-01-20
CSS外链式与内联式的区别是什么
CSS外链式--外链样式表外链样式表，是单独写一个以css为扩展名的文件，然后在<head></head>中使用<link>标签，将css样式链接到html中。举个例子：<link href="css样式的名字（一般自...
2021-01-20
waterfall瀑布流布局+动态渲染的实现
瀑布流典型网站花瓣网、堆糖瀑布流布局原理大体思路首先先是页面布局 特点是：宽度一样，长度不一样由此可以知道，这种布局要用到 绝对定位 的思想来做。上面的五个正常排列，到了...
2021-01-19
css 9pt等于多少px
css pt和px单位pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精...
2021-01-19
css规则定义怎么设置行间距
在CSS中，可以借助行高line-height属性来设置行间距。line-height属性的值越大，那么行间距就越高。line-height属性用于设置行使用的空间量，即行间的距离。注：line-height属性不...
2021-01-19
优化滚动的小技巧：使用CSS Scroll Snap！！
你是否经常希望有一个CSS特性可以轻松创建一个可滚动的容器? CSS scroll snap 可以做到这一点。在早期的前端开发中，我依靠 JS 插件来创建滑块组件。有时，我们需要一种简单的...
2021-01-18
CSS 奇思妙想边框动画效果的实现
今天逛博客网站 -- shoptalkshow，看到这样一个界面，非常有意思：觉得它的风格很独特，尤其是其中一些边框。嘿嘿，所以来一篇边框特辑，看看运用 CSS，可以在边框上整些什么花样。border...
2021-01-18
使用CSS Flexbox构建网站标题
在 CSS3 没有普及的时候，创建一个网站 header 是一项既可怕又困难的任务 ?。那时，Flexbox 还是个新东西，我们不得不使用老方法，比如 float和clearfix技术。今天，情况完全不同了，Fl...
2021-01-15
探究background-position属性中的百分比值的使用
background-position如何影响背景图的展示这两天在项目中替换首页图片的时候，发现了一个问题，之前的样式设置的是background-position:center,当页面缩小或者放大时背景图显示...
2021-01-15
CSS 动态高度过渡动画效果的实现
这个问题源自于掘金上的一个留言，一个朋友问到，为什么我下面这段代码的高度过渡动画失效了？伪代码大概是这样：{ height: unset; transition: all 0.3s linear; will-ch...
2021-01-15
详解css sroll-snap-type属性（优化滚动的小技巧）
根据 CSS Scroll Snap Module Level 1 规范，CSS 新增了一批能够控制滚动的属性，让滚动能够在仅仅通过 CSS 的控制下，得到许多原本需要 JS 脚本介入才能实现的美好交互。Tips：本...
2021-01-14
详解CSS中的:placeholder-shown伪类
一般我们常见placeholder伪类选择器用来修改默认样式及文案，忽然发现placeholder-shown伪类选择器，比较官方的解释是CSS伪类表示任何显示占位符文本的form元素。简单来说就是...
2021-01-14
css里大于号表示什么
css指的是层叠样式表（Cascading Style Sheets），它是一种用来表现HTML或XML等文件样式的计算机语言，是用来表示html样式的一种编程语言，是可以做到网页和内容进行分离的一种样式语...
2021-01-14
css里图片和文字如何等高
CSS 让同一行的图片和文字对齐大家在做前端开发的时候那，经常会遇到img标签和文字在同一行。那么我刚开始的时候那是利用的float浮动布局解决的，定位布局（兼容性需要调整 不划...
2021-01-14
HTML外部引用CSS文件不生效的原因
HTML外部引用CSS文件不生效的原因1、未关联外部CSS样式表文件或关联路径出错这是一个让人很无语的错误，但我以前确实遇到过，辛辛苦苦写好了代码，发现一个样式都没有生效，傻乎乎...
2021-01-14
css绝对路径怎么写
路径指文件存放的位置，在网页中利用路径可以引用文件，插入图像、视频等。表示路径的方法有两种：相对路径，绝对路径。css绝对路径怎么写？绝对路径是指完整的网址。假设你通过虚拟...
2021-01-14
css框模型规定了什么作用
CSS框模型规定了元素框处理元素内容、内边距、边框和外边距的方式。CSS 框模型概述元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距...
2021-01-14
css如何设置li的样式
li标签默认样式是前面有一个小圆点或者是数字序号，那么怎样改变li标签的默认样式呢？css怎么设置li标签的样式？ul和li列表是使用CSS布局页面时常用的元素。在CSS中，有专门控制列...
2021-01-14
none在css中表示什么意思
none在css中表示什么意思？none本意是【没有】的意思，在css中，表示令某个元素失效。常用于display、border、outline、list-style等属性中。display:none; 表示设置元素不显示。...
2021-01-14
CSS实现居中的几种方案（总结）
水平居中内联元素要使内联元素（如链接，span 或img）居中，使用 text-align: center 足够了。<div class="desk"> <span class="plate"></span></div>.desk { text-align: cente...
2021-01-14
谈谈css中的栅格布局（图文）
栅格布局能将网页分成简单属性的行和列，CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。圣杯布局圣杯布局是...
2021-01-13
纯CSS解决H5布局中的吸顶吸底的实现步骤
哪些想啥提啥的产品们最近做了一个需求，准确说是迭代需求：加了一个头部概览（类似下图），以更好的让用户观察到营销变化，故事的开头就这样悄悄的埋下了伏笔。以前这个页面只是一个评...
2021-01-12
CSS3.0实现霓虹灯按钮动画特效的示例代码
今天给大家分享一个用CSS 3.0实现的霓虹灯按钮动画特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"...
2021-01-12
after伪元素实现空心三角箭头和X图标的示例
在前端的设计稿上经常会看到‘X’这种形状的关闭按钮和‘>’以及其他三个方向的空心箭头图标。css有多种方式来实现，尝试了一下发现不是很容易记住，今天...
2021-01-12
在vue-cli中使用css-loader实现css module
【前言】无论是vue还是react的css模块化解决方案都是依赖loader来实现的在使用上，vue中用scoped属性实现样式的私有化，利用深度作用选择器/deep来实现样式的去私有化。例子：<di...
2021-01-10
纯CSS实现DIV悬浮的示例代码(固定位置)
纯CSS实现的DIV悬浮效果(固定位置)，兼容常用的浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等。效果如下：实现代码：<!DOCTYPE html><html><head><me...
2021-01-07
css3 实现滚动条美化效果的实例代码
具体代码如下所示:/*滚动条的宽度*/ ::-webkit-scrollbar { width:9px; height:9px; }/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜...
2021-01-07
详解如何解决position:fixed固定定位偏移问题
问题css固定定位position:fixed很容易使用，就是相对浏览器的viewport进行定位，top:0;left:0就是在左上角。<body> <div class="container"> </div> </body> <style>...
2021-01-07
浅谈解决space-evenly兼容性问题的两种方法
flex 从 2009 年推出到现在，已经得到了几乎所有浏览器的支持。作为一种简便的、响应式的布局方案，flex 给我们的布局开发带来了很多便利。
justify-content 属性是 flex 布局...
2021-01-07
探索CSS属性*-gradient的实用价值
先介绍一下一个有趣的属性 —— conic-gradient圆锥渐变！对其感兴趣是因为我发现它竟然可以用来做圆饼图！
比如这样的：
这样的：其原理也很简单：就是以起始点为中心，然...
2021-01-05
使用纯 CSS 实现滚动阴影效果
开门见山，有这样一种非常常见的情况，对于一些可滚动的元素而言。通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动给该滚出了可视区域，类似这样：可以...
2021-01-05
CSS3实现苹果手机解锁的字体闪亮效果示例
0.前言2016年08月18日 今天看到注意到苹果手机的滑动解锁，提示字上会有一道白光闪过，感觉很炫酷，所以突然就来了兴致想要做一个当鼠标放在字体上(模拟手指)时，白光一闪而过，照亮...
2021-01-05
关于CSS margin的一些你需要知道的知识点
当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒、模型。“盒模型”中的元素之一是margin，即盒子周围的透明区域，它会...
2021-01-05
