详解CSS3+JS完美实现放大镜模式
大概一年多之前写过一篇文章：仿放大镜效果的几种方式原理解析，当时觉得自己技术可以了、飘了，于是就起了这样牛气哄哄的标题，其实也只算是介绍了css里的transform和animation两种动画方式 —— 当然，实现的效果也是巨简单的那种…惭愧。虽然后来随着技术
2026-03-29
总结下常用的nth-child选择符
前言在前端编程中我们经常用到nth-child选择符，它可以接受数值也可以接受odd,even等，今天翻阅精通CSS一书才想起它还可以接受一个表达式，类似4n+1,-2n+1等。那他们各自具体有什么用呢？适用的场景是什么呢？可能大家还不是很清楚，下面我们来根据实例具体了解下，他们的html结构如下：
2026-03-29
html5+CSS3的编码规范
黄金定律不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。语法1.用两个空格来代替制表符（tab） – 这是唯一能保证在所有环境下获得一致展现的方法。2.嵌套元素应当缩进一次（即两个空格）。3.对于属性的定义，确保全部使用双引号，绝不要使用单引号。4.不要在自闭合（
2026-03-29
使用纯 CSS 实现滚动阴影效果
开门见山，有这样一种非常常见的情况，对于一些可滚动的元素而言。通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动给该滚出了可视区域，类似这样：可以看到，在滚动的过程中，会出现一条阴影：对于两侧的列在滚动的过程中，静止不动，吸附在边界的问题，通常 CSS 使用position:
2026-03-29
CSS让子元素div的高度填满父容器的剩余空间的方法
1.使用浮动的方式效果图：代码如下：(注意，此时.content的高度是500px，即父元素的高度，但是浮动元素在 .content 上方，盖住了 .content，将 .nav背景样式改为 background-color: rgba(0,0,0,0.1);可观察到效果)
2026-03-29
css flex布局超长自动换行的示例代码
要创建一个 flex 容器，只需要将一个 display: flex 属性添加到一个元素上。默认情况下，所有的直接子元素都被认为是 flex 项，并从左到右依次排列在一行中。如果 flex 项的宽度总和大于容器，那么 flex 项将按比例缩小，直到它们适应 flex 容器宽度 演示： 找一个页面敲击
2026-03-29
