使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Ⅰ、问题描述：使用html+css实现简易导航栏；**要求：**将导航栏分成八个小部分，并在鼠标放上并不点击，导航栏背景颜色显示为黄绿色；Ⅱ实现过程如下：1、运行软件VScode，亲测可实现；2、运行代码：
2026-03-29
CSS中em的正确打开方式详解
为什么说“通常情况下1em=16px”？用户的浏览器默认渲染的文字大小是“16px”，换句话说，Web页面中“body”及其子元素的文字大小在用户浏览器下默认渲染是“16px”。我们都知道：em（和 re
2026-03-29
浅谈移动端中的视口(viewport)的具体使用
目录1. 基本概念1.1 两种像素1.2 三种视口2. 视口的设置3. 一倍图、二倍图、三倍图在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中，视口也被称为初始包含块，它是所有 CSS 百分比宽度推算的根源，给 CSS 布局限制了一个最大宽度。而移动
2026-03-29
css3实现背景图片颜色修改的多种方式
css3可以改变图片的颜色了。从此再也不用设计出多张图，而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。方式一：利用css3滤镜filter中的 drop-shadow代码如下：.icon{ display: inline-block; wi
2026-03-29
CSS3常见动画的实现方式
一、是什么CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块即指元素从一种样式逐渐过渡为另一种样式的过程常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合css实现动画的方式，有如下几种： transi
2026-03-29
纯 CSS3实现的霓虹灯特效
这是要实现的效果：可以看到，在鼠标移入按钮的时候，会产生类似霓虹灯光的效果；在鼠标移出按钮的时候，会有一束光沿着固定的轨迹（按钮外围）运动。霓虹灯光的实现霓虹灯光的实现比较简单，用多重阴影来做即可。我们给按钮加三层阴影，从内到外每层阴影的模糊半径递增，这样的多个阴影叠加在一起，就可以形成一个类似霓虹
2026-03-29
CSS3鼠标悬浮过渡缩放效果
以下为一个纯css写的图片鼠标悬浮缩放效果，其实基本原理十分简单，我们访问一些网站可以发现他们都会对图片做一些交互效果的处理，当然实现图片过渡效果有很多方式，例如使用JQuery或者一些第三方js动画库，本例仅是展示基本的效果，不对所用知识进行归纳。代码如下：
2026-03-29
