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 img:hover {tran...

CSS鼠标悬停图片转动

header .hero-image { position: relative; } header .hero-image img { transition: 300ms; } header .hero-image...

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...