好文分享

position 的常见四个属性值: relative，absolute，fixed，static。一般都要配合”left”、”top”、”right” 以及 “bottom” 属性使用。 下面我们来详细…

新的元素选择器 E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:last-child, E:first-of-type, E:only-child, E:only-of-type, E:empty, E:checked,…

适合初学者学习的CSS3实现可爱的动物 今天，我想向大家展示如何巧妙地使用HTML、CSS排序动画和SVG滤镜把生活中可能最可爱的东西之一——动物画到网页上。我们将探讨绘制动物的两种技术：一种使用纯HTML和CSS，另一种使用内联SVG背景图像。 此演示高度实验性质——动画SVG滤镜目前仅在Chro…

css 伪类是用于向某些选择器添加特殊的效果，是动态的，指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。 这篇文章在一定程度上鼓励你在构建UI时使用更简单的CSS和更少的 JS。熟悉 CSS 所提供的一切是实现这一目标的一种方…

前言 当我学完css和js后，冒出来一个想法。自己去实现一个可爱的卡通人物。于是我就去codepen找素材，最终选择了皮卡丘，如下图。 准备工作 在开始写皮卡丘之前，我先观察了皮卡丘的整个页面。发现如果要很好的实现这个皮卡丘你不能像写传统网页那样从左到右布局，而是要从中间布局，因为左右两边对称。理清…

本文目标： 1、掌握css3中内阴影和外阴影的用法 问题： 1、要求使用纯DIV+CSS实现如下效果 附加说明： 立即学习“前端免费学习笔记（深入）”； 1、效果一中的水平阴影大小为4，垂直阴影为2，模糊度为6 2、效果二中的水平阴影为0，垂直阴影为0，模糊度30 3、整体宽度为800px,居中显示…

使用css对页面进行全方位的控制，主要的方法有四种：行内样式、内嵌式、链接式和导入式，下面我们来分别看一下这四种方式： 一、行内样式 1、特点：最为直接的一种。 2、使用方式 直接在HTML的标记中，使用style属性，将CSS代码写在其中。 立即学习“前端免费学习笔记（深入）”； 3、举例说明 页…

本文目标： 1、掌握css3中线性渐变（linear-gradient）的实现方法 问题： 要求实现以下效果，使用纯DIV+CSS，必须使用知识点 线性渐变（linear-gradient）,且居中显示 附加说明： 1、一个彩色圆环的大小是400px*400px,里面空白圆环大小为260px*260…

本文目标： 1、掌握文本带省略号的显示效果 问题： 1、实现以下效果，要求使用纯DIV+CSS，不适用任何框架 附加说明 1、总体宽度是500px,在页面中居中显示 立即学习“前端免费学习笔记（深入）”； 2、标题字体大小是22px,其他字体是16px 3、超级开心果作者的名称靠最左，时间2天前显示…

本文目标： 1、掌握text-shadow的用法 问题： 使用纯div+css实现以下效果 附加说明： 1、文字总共有4个分别是：Belive Yourself You Can 立即学习“前端免费学习笔记（深入）”； 2、文字大小为86px 3、右边文字和左边文字的间距为20px 4、图片大小 宽为…