css
-
css中一个冒号和两个冒号分别代表什么?
一个冒号是伪类,两个冒号是伪元素。 (推荐学习:css快速入门) 伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的、不存在于文档树中且表达方式也不同,所以叫伪类。 伪元素所控制的内容和一个元素控制的内容一样,但是伪元素不存在于文档树中,不是真正的元素,…
-
使用 CSS 实现一个简单的骨架屏(Skeleton Screen)



前言 在加载网络数据时,为了提升用户体验,通常会使用一个转圈圈的loading动画,或者使用skeleton screen占位。相比与loading动画,skeleton screen的效果要更生动,实现起来来也很简单。利用css就可以实现一个简单的skeleton screen。(什么是骨架屏(s…
-
CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析(代码实例)



本文目标: 1、掌握css中结构性伪类选择器—nth-of-type的用法 问题: 1、实现以下自定义导航菜单,且使用纯DIV+CSS,必须使用结构性伪类选择器—nth-of-type 附加说明: 1、导航宽800px,高90px,居中显示 立即学习“前端免费学习笔记(深入)”; 2、雪花背景图片宽…
-
css选择器有哪些?哪些属性是可以继承的?
css选择器: id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器(ul > li)、后代选择器(li a)、通配符选择器(*)、属性选择器(a[rel=”external”])、伪类选择器(a:hover,…
-
如何合理使用CSS框架?
现在的网站风格已经与它们很早之前的样子有了很大的不同。如果现在再回过头去看有些公司最初的网站UI,我想大多数互联网用户都很难认得出来。所以也多亏了网页设计技术的创新,现在网站不仅仅是只能显示信息,它们同样也可以拥有有趣的动画、多样的布局和互动的元素。而其中,这些大部分都是由CSS来实现的。 所以CS…
-
如何实现css代码复用
如何实现css代码复用? (推荐学习:css快速入门) 建议如下: 1、在做CSS项目规划时,首先写好reset类代码; 因为浏览器对于标签是有默认样式的。 立即学习“前端免费学习笔记(深入)”; 2、划分CSS原子类; 一个大型的项目,会有一些常用的css规则,比如text-align,float…
-
CSS 实现拖拽改变布局大小



利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。 推荐视频教程:《CSS视频教程-玉女心经版》 webkit浏览器下滚动条可以自定义,其中resize区域大小就是scrollbar的大小,于是,我们可以将整个拉伸区域变成和容器一样高。…
-
css实现背景图片拉伸填充
首先我们知道用作背景图片的有两类: (推荐学习:css快速入门) 1、一整张大图,尺寸和区域大小刚好吻合; 2、一个很小的条状图,通过repeat后,形成一个很规则的大图背景。 那么如何实现背景图片拉伸填充呢? 立即学习“前端免费学习笔记(深入)”; 方法如下: 背景图尺寸(数值表示方式): 代码如…
-
10个 你可能不熟悉的 css伪类 及其用例介绍



css 伪类是用于向某些选择器添加特殊的效果,是动态的,指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。 这篇文章在一定程度上鼓励你在构建UI时使用更简单的CSS和更少的 JS。熟悉 CSS 所提供的一切是实现这一目标的一种方…
-
CSS Position 属性值有哪些?
CSS Position属性值有:1、static,是position的默认值;2、fixed,生成固定定位的元素;3、absolute,生成绝对定位的元素;4、relative,生成相对定位的元素;5、inherit,继承父级属性值。 1、position: relative;相对定位 不影响元素…