CSS - 教程之家

150浏览

0评论

生僻标签 fieldset 与 legend 的用法详解

谈到<fieldset>与<legend>，大部分人肯定会比较陌生，在 HTML 标签中，属于比较少用的那一批。我最早知道这两个标签，是在早年学习 reset.css 或者 normalize.css 时，在这些重置统一...

2021-01-26

77浏览

0评论

纯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

89浏览

0评论

css怎么设置文字加粗

css设置文字加粗的方法在css中，可以使用font-weight属性来加粗文字。font-weight属性可以用于设置文本文字的粗细。属性值越大字体越粗。属性值：示例1：使用关键字bold和bolder...

2021-01-25

94浏览

0评论

使用CSS实现的几种进度条

进度条是一个非常常见的功能，实现起来也不难，一般我们都会用 div 来实现。作为一个这么常见的需求， whatwg 肯定是不会没有原生组件提供（虽然有我们也不一定会用），那么就让我们来...

2021-01-22

104浏览

0评论

CSS %单位的特点

CSS %单位的特点是什么？百分比是一个相对长度单位，相对于父元素的尺寸。%的特点百分比是相对于父元素的尺寸，这和em(相对于当前元素的字体尺寸)以及rem（相对于根元素的字体尺寸）...

2021-01-21

84浏览

0评论

5个有用的css函数（分享）

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

2021-01-21

171浏览

0评论

bootstrap实现简单侧边导航栏效果

bootstrap侧边导航栏实现原理侧滑栏使用定位fixed 使用bootstrap响应式使用工具类 visible-sm visible-xs hidden-xs hidden-sm等对不同屏幕适配侧滑栏的侧滑效果不使...

2021-01-21

290浏览

0评论

div水平布局两边对齐的三种实现方法

本文主要介绍了div水平布局两边对齐的三种实现方法，分享给大家，具体如下：方法一父容器div使用 position: relative;,子div使用 position:absolute;定位，注意边距问题html<div cl...

2021-01-21

96浏览

0评论

CSS3选择器新增问题的实现

基本选择器扩展1.子元素选择器:tomato: #wrap > .inner {color: pink;} 也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素总结：>作用于元素...

2021-01-21

102浏览

0评论

CSS世界--代码实践之图片alt信息呈现

使用缺省 src 的<img>元素实现滚屏加载效果，但是，就有可能存在这样一个体验问题：如果我们的 JavaScript 加载比较慢，我们的页面就很有可能出现一块一块白色的图片区域，纯白色的，没...

2021-01-21

236浏览

0评论

CSS中IE11 hack专属样式的实现方法

虽然微软已经放弃IE了，但在国内，IE11浏览器市场份额仍有3%，甚至超过了苹果浏览器。有些CSS样式在IE11下失效，就可以使用IE hack来解决　@media screen and(-ms-high-contrast:ac...

2021-01-20

138浏览

0评论

css3给背景图层加颜色遮罩的方法

在开发中，有时遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法。方法一：通过定位叠加(注意层级)<div class="wrap1"> <div class="inner">...

2021-01-20

223浏览

0评论

css实现领积分动画效果

最近项目中要做一个领积分的效果，根据老板的描述，这个效果类似于支付宝蚂蚁森林里的领取能量。整体效果是就是在树周围飘着几个积分元素，上下滑动，类似星星闪烁，点击领取后，沿着树...

2021-01-20

79浏览

0评论

css怎么控制按钮不可用

在HTML中我们可以直接通过HTML的disabled或readonly属性实现按钮不可点击；而在css中，可以使用pointer-events属性实现点击事件失效。我们可以为按钮添加“pointer-events...

2021-01-20

95浏览

0评论

CSS外链式与内联式的区别是什么

CSS外链式--外链样式表外链样式表，是单独写一个以css为扩展名的文件，然后在<head></head>中使用<link>标签，将css样式链接到html中。举个例子：<link href="css样式的名字（一般自...

2021-01-20

112浏览

0评论

css有继承关系吗

css有继承关系。css继承性的作用：给父元素设置一些属性，子元素也可以使用。CSS继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发挥在整个网页...

2021-01-20

156浏览

0评论

waterfall瀑布流布局+动态渲染的实现

瀑布流典型网站花瓣网、堆糖瀑布流布局原理大体思路首先先是页面布局特点是：宽度一样，长度不一样由此可以知道，这种布局要用到绝对定位的思想来做。上面的五个正常排列，到了...

2021-01-19

142浏览

0评论

css 9pt等于多少px

css pt和px单位pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精...

2021-01-19

102浏览

0评论

css规则定义怎么设置行间距

在CSS中，可以借助行高line-height属性来设置行间距。line-height属性的值越大，那么行间距就越高。line-height属性用于设置行使用的空间量，即行间的距离。注：line-height属性不...

2021-01-19

101浏览

0评论

优化滚动的小技巧：使用CSS Scroll Snap！！

你是否经常希望有一个CSS特性可以轻松创建一个可滚动的容器? CSS scroll snap 可以做到这一点。在早期的前端开发中，我依靠 JS 插件来创建滑块组件。有时，我们需要一种简单的...

2021-01-18

86浏览

0评论

css怎么移动文字

css移动文字首先可以用个容器来包住文字，给宽和高。然后，可以使用多种方法来移动文字：1、如果是在块元素容器中，可以用text-align：center、left、right来移动文字的位置。2、可以...

2021-01-18

97浏览

0评论

css六边形怎么画

首先了解一下正六边形内角和边的关系，正六边形的每个内角是60deg，如图（√3其实是根号3）：方法一：原理把正六边形分成三部分，左中右分别是：before部分，div部分，after部分，如图：before...

2021-01-18

124浏览

0评论

css设置背景颜色

css设置背景颜色的方法在CSS中，可以使用background-color属性来设置背景颜色。background-color属性设置一个元素的背景颜色。元素的背景是元素的总大小，包括填充和边界（但不包...

2021-01-18

128浏览

0评论

CSS 奇思妙想边框动画效果的实现

今天逛博客网站 -- shoptalkshow，看到这样一个界面，非常有意思：觉得它的风格很独特，尤其是其中一些边框。嘿嘿，所以来一篇边框特辑，看看运用 CSS，可以在边框上整些什么花样。border...

2021-01-18

112浏览

0评论

使用CSS Flexbox构建网站标题

在 CSS3 没有普及的时候，创建一个网站 header 是一项既可怕又困难的任务 ?。那时，Flexbox 还是个新东西，我们不得不使用老方法，比如 float和clearfix技术。今天，情况完全不同了，Fl...

2021-01-15

108浏览

0评论

探究background-position属性中的百分比值的使用

background-position如何影响背景图的展示这两天在项目中替换首页图片的时候，发现了一个问题，之前的样式设置的是background-position:center,当页面缩小或者放大时背景图显示...

2021-01-15

449浏览

0评论

CSS 动态高度过渡动画效果的实现

这个问题源自于掘金上的一个留言，一个朋友问到，为什么我下面这段代码的高度过渡动画失效了？伪代码大概是这样：{ height: unset; transition: all 0.3s linear; will-ch...

2021-01-15

99浏览

0评论

详解css sroll-snap-type属性（优化滚动的小技巧）

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

2021-01-14

106浏览

0评论

详解CSS中的:placeholder-shown伪类

一般我们常见placeholder伪类选择器用来修改默认样式及文案，忽然发现placeholder-shown伪类选择器，比较官方的解释是CSS伪类表示任何显示占位符文本的form元素。简单来说就是...

2021-01-14

74浏览

0评论

css里大于号表示什么

css指的是层叠样式表（Cascading Style Sheets），它是一种用来表现HTML或XML等文件样式的计算机语言，是用来表示html样式的一种编程语言，是可以做到网页和内容进行分离的一种样式语...

2021-01-14

175浏览

0评论

css里图片和文字如何等高

CSS 让同一行的图片和文字对齐大家在做前端开发的时候那，经常会遇到img标签和文字在同一行。那么我刚开始的时候那是利用的float浮动布局解决的，定位布局（兼容性需要调整不划...

2021-01-14

140浏览

0评论

HTML外部引用CSS文件不生效的原因

HTML外部引用CSS文件不生效的原因1、未关联外部CSS样式表文件或关联路径出错这是一个让人很无语的错误，但我以前确实遇到过，辛辛苦苦写好了代码，发现一个样式都没有生效，傻乎乎...

2021-01-14

105浏览

0评论

css绝对路径怎么写

路径指文件存放的位置，在网页中利用路径可以引用文件，插入图像、视频等。表示路径的方法有两种：相对路径，绝对路径。css绝对路径怎么写？绝对路径是指完整的网址。假设你通过虚拟...

2021-01-14

82浏览

0评论

css框模型规定了什么作用

CSS框模型规定了元素框处理元素内容、内边距、边框和外边距的方式。CSS 框模型概述元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距...

2021-01-14

368浏览

0评论

css如何设置li的样式

li标签默认样式是前面有一个小圆点或者是数字序号，那么怎样改变li标签的默认样式呢？css怎么设置li标签的样式？ul和li列表是使用CSS布局页面时常用的元素。在CSS中，有专门控制列...

2021-01-14

156浏览

0评论

none在css中表示什么意思

none在css中表示什么意思？none本意是【没有】的意思，在css中，表示令某个元素失效。常用于display、border、outline、list-style等属性中。display:none; 表示设置元素不显示。...

2021-01-14

87浏览

0评论

CSS实现居中的几种方案（总结）

水平居中内联元素要使内联元素（如链接，span 或img）居中，使用 text-align: center 足够了。<div class="desk"> <span class="plate"></span></div>.desk { text-align: cente...

2021-01-14

119浏览

0评论

谈谈css中的栅格布局（图文）

栅格布局能将网页分成简单属性的行和列，CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。圣杯布局圣杯布局是...

2021-01-13

381浏览

0评论

纯CSS解决H5布局中的吸顶吸底的实现步骤

哪些想啥提啥的产品们最近做了一个需求，准确说是迭代需求：加了一个头部概览（类似下图），以更好的让用户观察到营销变化，故事的开头就这样悄悄的埋下了伏笔。以前这个页面只是一个评...

2021-01-12

94浏览

0评论

CSS3.0实现霓虹灯按钮动画特效的示例代码

今天给大家分享一个用CSS 3.0实现的霓虹灯按钮动画特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"...

2021-01-12

151浏览

0评论

after伪元素实现空心三角箭头和X图标的示例

在前端的设计稿上经常会看到‘X’这种形状的关闭按钮和‘>’以及其他三个方向的空心箭头图标。css有多种方式来实现，尝试了一下发现不是很容易记住，今天...

2021-01-12

399浏览

0评论

在vue-cli中使用css-loader实现css module

【前言】无论是vue还是react的css模块化解决方案都是依赖loader来实现的在使用上，vue中用scoped属性实现样式的私有化，利用深度作用选择器/deep来实现样式的去私有化。例子：<di...

2021-01-10

71浏览

0评论

纯CSS实现DIV悬浮的示例代码(固定位置)

纯CSS实现的DIV悬浮效果(固定位置)，兼容常用的浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等。效果如下：实现代码：<!DOCTYPE html><html><head><me...

2021-01-07

138浏览

0评论

css3 实现滚动条美化效果的实例代码

具体代码如下所示:/*滚动条的宽度*/ ::-webkit-scrollbar { width:9px; height:9px; }/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜...

2021-01-07

274浏览

0评论

详解如何解决position:fixed固定定位偏移问题

问题css固定定位position:fixed很容易使用，就是相对浏览器的viewport进行定位，top:0;left:0就是在左上角。<body> <div class="container"> </div> </body> <style>...

2021-01-07

290浏览

0评论

浅谈解决space-evenly兼容性问题的两种方法

flex 从 2009 年推出到现在，已经得到了几乎所有浏览器的支持。作为一种简便的、响应式的布局方案，flex 给我们的布局开发带来了很多便利。
justify-content 属性是 flex 布局...

2021-01-07

71浏览

0评论

探索CSS属性*-gradient的实用价值

先介绍一下一个有趣的属性 —— conic-gradient圆锥渐变！对其感兴趣是因为我发现它竟然可以用来做圆饼图！
比如这样的：
这样的：其原理也很简单：就是以起始点为中心，然...

2021-01-05

127浏览

0评论

使用纯 CSS 实现滚动阴影效果

开门见山，有这样一种非常常见的情况，对于一些可滚动的元素而言。通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动给该滚出了可视区域，类似这样：可以...

2021-01-05

150浏览

0评论

CSS3实现苹果手机解锁的字体闪亮效果示例

0.前言2016年08月18日今天看到注意到苹果手机的滑动解锁，提示字上会有一道白光闪过，感觉很炫酷，所以突然就来了兴致想要做一个当鼠标放在字体上(模拟手指)时，白光一闪而过，照亮...

2021-01-05

97浏览

0评论

关于CSS margin的一些你需要知道的知识点

当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒、模型。“盒模型”中的元素之一是margin，即盒子周围的透明区域，它会...

2021-01-05

热门文章