![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 61
小瑾沐晚风
keep learning
展开
-
css:first-child和first-of-type
块内区域首个元素的css样式可以通过first-child、first-of-type 和 nth-of-type()实现。对于 IE8 及更早版本的浏览器中,必须声明 <!DOCTYPE>。first-child:选择器用于选取属于其父元素的首个子元素的指定选择器first-of-type:选择器匹配属于其父元素的特定类型的首个子元素的每个元素nth-of-type(x):选择器匹配属于其父元素的特定类型的第x个子元素的每个元素话不多说,先上代码: <div>原创 2021-08-24 13:42:48 · 1543 阅读 · 0 评论 -
吸顶效果实现
遇到一个小模块需要实现吸顶效果,在此简单总结一下:主要有2种思路:1.通过js代码监控需要吸顶的部分距离顶部的位置来设置固定定位;2.通过css的粘性定位属性来实现。思路一详解:1.div初始居普通文档流中2. 给window添加scroll事件(可事件节流),获取div的offset的top值,滚动时scrollTop值和top比较,当到达top时给div添加一个fixed的class使其固定3. 向上滚动时当到达div初始top时则删除fixed的class,此时div又回到普通文档流中原创 2021-08-23 11:18:39 · 2366 阅读 · 0 评论 -
阿里巴巴矢量图标库使用步骤
1.登陆官网,选择需要的图标,将其添加至项目,然后下载至本地。2.解压文件。3.在工程目录下新建CSS文件夹,在CSS文件夹之后新建iconfont文件夹,并且将下面四个文件复制在CSS/iconfont文件夹之下。 4.将下载的图标文件中的iconfont.css复制到CSS文件夹之下,与iconfont文件夹在同一层。5.至此,目录如下:6.双击打开icon...原创 2019-01-18 15:02:51 · 11818 阅读 · 2 评论 -
优雅降级和渐进增强
一.背景介绍优雅降级和渐进增强印象中是随着css3流出来的一个概念。由于低级浏览器不支持css3,但css3的效果又太优秀不忍放弃,所以在高级浏览中使用css3而低级浏览器只保证最基本的功能。咋一看两个概念差不多,都是在关注不同浏览器下的不同体验,关键的区别是他们所侧重的内容,以及这种不同造成的工作流程的差异。二.什么是渐进增强、优雅降级? 渐进增强 (progressive enh...原创 2019-02-11 18:55:44 · 176 阅读 · 0 评论 -
伪类和伪元素(以复选框为例)
其中伪类和伪元素的根本区别在于:它们是否创造了新的元素。伪元素/伪对象:不存在在DOM文档中,是虚拟的元素,是创建新元素。代表某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。伪对象选择符属性 描述 CSS :first-letter 向文本的第一个字母添加特殊样式。 1 :first-line 向文本的首行添加特殊样式...原创 2018-11-06 21:25:32 · 186 阅读 · 0 评论 -
制作表格边框样式
1.通过设置border-collapse。border-collapse 属性设置表格的边框是否被合并为一个单一的边框。可能的值值 描述 separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 collapse 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 emp...原创 2019-08-30 12:09:33 · 330 阅读 · 0 评论