alexmao 发布的文章
alexmao实现点击收缩侧边导航栏的最简html/css代码
基本原理：navigation设置有宽度300pxmain设置有宽度cacl(100%-300px)，left左边距300px点击toggle div的时候，用js将navigation加上active状态，宽度改成60px，动画时间...
如何用@media判断屏幕分辨率
需求：根据不同的屏幕属性展示不同的CSS样式方案：使用@media判断方法：屏幕小于550px的屏幕：@media only screen and (max-width: 550px) { ... } 屏幕小于1000px的屏幕：...
CSS GRID最基础的代码，太强大了
HTML部分<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" />...
JS控制两个元素样式的切换
一个放大镜，一个叉叉，默认叉叉不出现（透明度0），点击按钮，出现叉叉，放大镜透明度变成0.还要把pointer-events设置成none，还要做一个动画效果。HTML部分：<a class="nav-btn-cont...
CSS让两个图片重叠
让两个图片能够重叠起来.nav-btn-container { display: flex; position: relative; } .nav-btn-container img { position: ...
CSS鼠标悬停图片转动
header .hero-image { position: relative; } header .hero-image img { transition: 300ms; } header .hero-image...
CSS鼠标悬停图片转动
header .hero-image {position: relative;}header .hero-image img {transition: 300ms;}header .hero-image img:hover {tran...
CSS选中第一个和最后一个元素
下面可以选择最后一个元素：.nav-items li:nth-last-of-type(1) { margin: 0; } 下面可以选择第一个元素：.social-icons a:nth-of-type(1) { margin-lef...
让按钮动起来的一个案例
重点：a 标签必须有display: inline-block; transition: 300ms;a:hover使用transform: translateY(-8px);header a { font-size: 24px; c...
博客信息
生命不息，折腾不止
303
文章数7
评论数0天
运行天数2025年10月
搜索
最新文章
文章分类
标签云
文章归档
- 2025年09月 1
- 2025年08月 2
- 2025年06月 7
- 2025年05月 6
- 2025年04月 1
- 2025年03月 1
- 2025年02月 2
- 2025年01月 15
- 2024年12月 1
- 2024年11月 2
- 2024年10月 2
- 2024年09月 5
- 2024年08月 2
- 2024年07月 2
- 2024年06月 1
- 2024年05月 4
- 2024年04月 1
- 2024年03月 3
- 2023年12月 14
- 2023年11月 5
- 2023年10月 23
- 2023年09月 4
- 2023年08月 3
- 2023年06月 1
- 2023年05月 1
- 2023年04月 4
- 2023年02月 5
- 2023年01月 9
- 2022年12月 3
- 2022年11月 1
- 2022年07月 3
- 2022年06月 7
- 2022年05月 7
- 2022年04月 1
- 2022年02月 3
- 2021年10月 4
- 2021年09月 11
- 2021年08月 8
- 2021年06月 8
- 2021年05月 9
- 2021年04月 7
- 2021年03月 8
- 2021年02月 8
- 2021年01月 20
- 2020年12月 18
- 2020年11月 11
- 2020年10月 16
- 2020年09月 23
最新回复