diff --git "a/blog/2024/12-23-CSS\344\274\252\345\205\203\347\264\240\347\273\217\345\205\270\345\272\224\347\224\250\346\241\210\344\276\2132.md" "b/blog/2024/12-23-CSS\344\274\252\345\205\203\347\264\240\347\273\217\345\205\270\345\272\224\347\224\250\346\241\210\344\276\2132.md" new file mode 100644 index 00000000..8c967ad5 --- /dev/null +++ "b/blog/2024/12-23-CSS\344\274\252\345\205\203\347\264\240\347\273\217\345\205\270\345\272\224\347\224\250\346\241\210\344\276\2132.md" @@ -0,0 +1,244 @@ +--- +date: 2024-12-23 12:46 +slug: CSS伪元素经典应用案例2 +--- + + + +我来展示几个实用且常见的伪元素应用案例： + +1. **必填表单标记**：用于标记必填字段 +2. **外部链接标识**：区分外部链接和内部链接 +3. **引用样式**：美化引用内容 +4. **文件类型标识**：根据文件类型显示不同图标 +5. **步骤指引**：自动编号的步骤指示器 +6. **工具提示**：无需JavaScript的简单提示框 + +![image-20241223125504548](https://docu-1319658309.cos.ap-guangzhou.myqcloud.com/image-20241223125504548.png) + +![image-20241223125515957](https://docu-1319658309.cos.ap-guangzhou.myqcloud.com/image-20241223125515957.png) + + + +```jsx live + + + + + + + +
+
+ + +
+
+ + +
+
+ + +
+ 访问 GitHub
+ 查看文档 +
+ + +
+
+ 生活中最重要的不是所处的位置，而是所朝的方向。 +
+
+ + +
+ 产品说明书.pdf
+ 使用手册.doc +
+ + +
+
+
注册账号
+
完善信息
+
开始使用
+
+
+ + +
+ hover我查看提示 +
+ + +``` + +这些都是实际开发中非常常用的案例： + +1. **必填表单标记**：用于标记必填字段 +2. **外部链接标识**：区分外部链接和内部链接 +3. **引用样式**：美化引用内容 +4. **文件类型标识**：根据文件类型显示不同图标 +5. **步骤指引**：自动编号的步骤指示器 +6. **工具提示**：无需JavaScript的简单提示框 + +这些效果的特点是： +- 不需要额外的HTML标签 +- 可以通过CSS维护和修改 +- 提升了用户体验 +- 减少了JavaScript的依赖 + +需要我详细解释某个效果的实现原理吗？ diff --git "a/blog/2024/12-23-CSS\344\274\252\345\205\203\347\264\240\350\247\243\351\207\212.md" "b/blog/2024/12-23-CSS\344\274\252\345\205\203\347\264\240\350\247\243\351\207\212.md" new file mode 100644 index 00000000..6cedbb4a --- /dev/null +++ "b/blog/2024/12-23-CSS\344\274\252\345\205\203\347\264\240\350\247\243\351\207\212.md" @@ -0,0 +1,35 @@ +--- +date: 2024-12-23 11:17 +slug: CSS伪元素 +--- + +CSS伪元素并没有真正生成HTML元素，它们只是在**视觉呈现层面**上的效果。 + +关键区别： + +1. 用JavaScript获取DOM时，无法直接获取到伪元素 +2. 伪元素不会出现在HTML结构中 +3. 伪元素不会影响文档的语义结构 +4. 不能给伪元素绑定事件监听器 + + + + + +举个例子： +```html +
你好
+``` + +```css +.box::after { + content: "世界"; +} +``` + +虽然页面上会显示"你好世界"，但： +- `document.querySelector('.box').childNodes` 只能看到"你好" +- 查看元素时只能看到 `
你好
` +- 伪元素"世界"只存在于浏览器的渲染层面 + +所以更准确地说，伪元素是CSS提供的一种视觉效果机制，而不是真正的DOM元素。这也是为什么叫"伪"元素。 diff --git "a/blog/2024/12-23-\347\262\276\347\276\216\347\232\204CSS\344\274\252\345\205\203\347\264\240\345\210\266\344\275\234\344\273\267\346\240\274\346\240\207\347\255\276\351\241\265.md" "b/blog/2024/12-23-\347\262\276\347\276\216\347\232\204CSS\344\274\252\345\205\203\347\264\240\345\210\266\344\275\234\344\273\267\346\240\274\346\240\207\347\255\276\351\241\265.md" new file mode 100644 index 00000000..a686c568 --- /dev/null +++ "b/blog/2024/12-23-\347\262\276\347\276\216\347\232\204CSS\344\274\252\345\205\203\347\264\240\345\210\266\344\275\234\344\273\267\346\240\274\346\240\207\347\255\276\351\241\265.md" @@ -0,0 +1,228 @@ +--- +date: 2024-12-23 12:39 +slug: 精美的CSS伪元素制作价格标签页 +--- + +这里是一个实用的价格卡片设计示例，包含多个精美的伪元素效果。价格标签是伪元素应用的经典案例。 + +![image-20241223124218808](https://docu-1319658309.cos.ap-guangzhou.myqcloud.com/image-20241223124218808.png) + + + + + +```html + + + + + + +
+
+
199
+
+
无限存储空间
+
实时多端同步
+
个性化定制
+
+ 查看详情 +
+ +
+
299
+
+
企业级支持
+
高级数据分析
+
专属客服服务
+
优先级解决问题
+
+ 立即购买 +
+
+ + +``` + +这个示例展示了5个实用的伪元素应用： + +1. 价格标签：使用`::before`和`::after`添加货币符号和时间单位 +2. 链接特效：渐变色下划线动画 +3. 特性列表：用伪元素创建优雅的复选标记 +4. 热门标签：角标设计 +5. 分割线：渐变分隔符 + +这些效果都是实际开发中常用的，可以直接应用到实际项目中。 diff --git "a/docs/docusaurus-test/\344\273\243\347\240\201\345\256\236\346\227\266\345\261\225\347\216\260.md" "b/docs/docusaurus-test/\344\273\243\347\240\201\345\256\236\346\227\266\345\261\225\347\216\260.md" index 689b7125..c6a3a1e4 100644 --- "a/docs/docusaurus-test/\344\273\243\347\240\201\345\256\236\346\227\266\345\261\225\347\216\260.md" +++ "b/docs/docusaurus-test/\344\273\243\347\240\201\345\256\236\346\227\266\345\261\225\347\216\260.md" @@ -1,7 +1,7 @@ --- date: 2024-03-27 16:01 --- -```jsx live +```html function Clock(props) { const [date, setDate] = useState(new Date()); useEffect(() => {