当前位置：首页 > news >正文

前端css实例

news 2026/5/12 2:17:10

前端css实例

一、带条纹的表格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>条纹样式的表格</title><style>table {widh: 50%;border-collapse: collapse;}th, td {text-align: left;padding: 8px;}.tab tr:nth-child(odd) {background-color: #f2f2f2;}.tab tr:nth-child(even) {background-color: slategray;}</style>
</head>
<body><table class="tab"><tr><th>表头1</th><th>表头2</th><th>表头3</th></tr><tr><td>数据1</td><td>数据2</td><td>数据3</td></tr><tr><td>数据4</td><td>数据5</td><td>数据6</td></tr><tr><td>数据7</td><td>数据8</td><td>数据9</td></tr></table>
</body>
</html>

在这里插入图片描述

在 CSS 中，tr:nth-child(odd) 是一个伪类选择器，用于选择所有在其父元素（比如 <table>）中的奇数位置的 <tr> 元素。

解释：

nth-child() 是 CSS 中的一个伪类，用来根据元素在父元素中的位置来选择子元素
odd 是 nth-child() 中的一个关键字，表示选择奇数位置的元素（例如：1、3、5、7…），even 表示偶数位置的元素（例如：2、4、6、8…）
由于在 CSS 中，元素的计数是从 1 开始的，所以 tr:nth-child(odd) 会选择所有在父元素中处于奇数位置的 <tr> 元素

核心思路：

使用表格中的行的伪类选择器，改变奇数行或偶数行表格的背景颜色即可

tr:nth-child(odd)表示奇数行
tr:nth-child(even)表示偶数行

二、带下拉菜单的水平导航栏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>带下拉菜单的水平导航栏</title><style>ul {list-style-type: none;margin: 0px;padding: 0px;background-color: yellowgreen;display: flex;justify-content: center;height: 75px;}li {display: inline;}a {display: block;height: 100%;text-decoration: none;padding: 0 20px;line-height: 75px;font-weight: 600;font-size: large;}a:hover {background-color: aliceblue;color: black;}.bar {position: relative;}.mean {position: absolute;list-style-type: none;margin: 0px;padding: 0px;background-color: skyblue;display: none;width: 120px;z-index: 1;}.mean a {text-align: center;background-color: skyblue;}.bar:hover .mean{display: block;}.mean a:hover {background-color: lightyellow;}</style>
</head>
<body><ul><li><a href="#">关于</a></li><li><a href="#">新闻</a></li><li class="bar"><a href="#">练习</a><ul class="mean"><li><a href="#">css</a></li><li><a href="#">html</a></li><li><a href="#">js</a></li><li><a href="#">vue</a></li></ul></li><li><a href="#">我们</a></li><li><a href="#">合作</a></li></ul>
</body>
</html>

在这里插入图片描述

核心思路：

先使用无序列表实现水平导航栏：

水平导航栏中的元素要想居中，可以先将ul标签设置为弹性盒子模型，在通过justify-content: center;居中即可
将块级标签li改变为行内标签display: inline;
设置a标签为块级标签display: block;，在通过height: 100%从而来撑满标签
最后在设置a标签的:hover中（鼠标聚焦即实现）改变背景颜色和字体颜色

再在要添加下拉菜单的li标签中添加另一个无序列表：

先给指定的li标签设置为相对位置，以便先拉菜单出现在正确位置position: relative;
设置下拉菜单的列表标签ul设置为绝对位置，接收最近已定位的父元素li的相对位置；再将显示关闭display: none;并设置下拉菜单框的宽度；最后确保下拉菜单显示在其他元素之上定义z-index: 1;
mean下的a标签设置为文本居中text-align: center;
设置指定li标签的:hover并改变.mean中的显示状态display: block;
设置在mean的a标签的:hover，改变鼠标聚焦时的背景颜色

三、带悬浮动漫的按钮

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>带悬浮动漫的按钮</title><style>.btn {background-color: skyblue;padding: 15px;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s, transform 0.3s;position: absolute;top: 50px;left: 50px;font-size: large;}.btn:hover {background-color: aqua;transform: scale(1.2);}</style>
</head>
<body><button class="btn">悬浮按钮</button>
</body>
</html>

在这里插入图片描述

核心思路：

直接设置按钮的样式：

设置鼠标光标聚焦按钮变为手指cursor: pointer;
设置变化效果，使用transition属性（用于指定元素在状态变化时的过渡效果）transition: background-color 0.3s, transform 0.3s;，改变背景颜色和大小，时间均为0.3s（transform可以scale(比例)——缩放、translate(x,y)——平移、rotate(度数deg)——旋转，……）
给按钮设置:hover，使得光标聚焦时，设置改变后的背景颜色background-color和transform缩放属性

四、带阴影的卡片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>带阴影的卡片</title><style>.card {box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);padding: 14px 16px;}.card1 {box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.3);padding: 14px 16px;}</style>
</head>
<body><div class="card"><h2>带阴影的卡片</h2><p>这是卡片的内容</p></div><br><br><div class="card1"><h2>内阴影</h2><p>这是卡片的内容</p></div>
</body>
</html>

在这里插入图片描述

核心思路：

直接设置卡片的样式即可：

使用box-shadow属性，box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3)，第一个属性是水平偏移量，第二个属性是垂直偏移量，第三个属性是模糊半径，第四个是阴影颜色rgba(0,0,0,0.3)其中的0.3是透明度
*如果要使用内阴影，即在box-shadow属性前面加inset*即可

五、图片的提示文本

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片的提示文本</title><style>.img-container {position: relative;display: inline-block;}.img-container img {width: 250px;height: auto;border-radius: 8px;}.tip {position: absolute;background-color: rgba(0, 0, 0, 2);color: white;padding: 10px;border-radius: 5px;opacity: 0;transition: opacity 0.3s ease;font-size: large;/* 禁用鼠标事件 */pointer-events: none;}.img-container:hover .tip{opacity: 1;}</style>
</head>
<body><div class="img-container"><img src="image\pexels-nascimento-vieira-455892312-19295658.jpg" alt="图片加载失败"><div class="tip">这是这个图片的提示文本</div></div>
</body>
</html>

在这里插入图片描述

核心思路：

先设置整个容器：

将父容器的位置改为相对定位postion: relative;，以便后面的提示文本内容位置的接收
再将整个容器设置为行内块级元素，以便后面仅将光标移动到图片位置，而不是整行

再设置提示文本：

先设置提示文本的定位为，绝对定位postion: absolute;
将元素的透明度设置为0，即不可见opacity: 0;
设置平滑的过渡效果，transition: opacity 0.3s ease; 其中ease是一个过渡时间函数，表示过渡会以一种平滑的速度变化，开始和结束时较慢，中间较快
最后禁用鼠标事件pointer-events: none;

最后设置光标聚焦时，提示文本的展示：

设置整个容器的:hover（但在文本位置时不会展示，因为文本位置已经禁用了鼠标事件），此时设置tip标签的opacity: 1透明度设置为1，元素展示

六、折叠面板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>折叠面板</title><style>.accordion {background-color: white;margin: 0 10px;}.accordion-header {background-color: aquamarine;border: none;border-radius: 5px;padding: 10px;cursor: pointer;font-size: large;font-weight: 500;}.accordion-content {padding: 10px 16px;display: none;background-color: aliceblue;border-radius: 5px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);}.active .accordion-content {display: block;}</style>
</head>
<body><h2>折叠面板</h2><div class="accordion"><button class="accordion-header">折叠面板</button><div class="accordion-content"><p>这是折叠面板的内容</p></div></div>
</body>
<script>const accord = document.querySelector('.accordion-header');accord.addEventListener('click', function() {const parent = this.parentElement;parent.classList.toggle('active');});
</script>
</html>

在这里插入图片描述

核心思路：

先设置整个容器：

定义div容器，并将背景定义为白色

再设置容器中的按钮：

设置按钮的基本属性，并设置光标聚焦时，改变鼠标样式cursor:pointer;

设置折叠面板的内容：

设置不展示display: none;，也可以设置成带阴影的卡片box-shadow

使用JS的DOM给添加按钮添加事件：

定义一个常量使用类名接收按钮属性const accord = document.querySelector('.accordion-header');
给这个常量添加点击事件监听.addEventListener('click', 函数)，并定义点击后的函数
在这个函数中再定义一个常量来获取该点击元素的父元素const parent = this.parentElement;
给父容器添加.active类（有这个类则删除，没有这个类则添加），parent.classList.toggle('active');

设置事件控制的css样式：

给要展示折叠面板的css加上父容器的前缀.active,如果有则执行这段css，.active .accordion-content {}
在这个css样式里面添加展示display: block;

七、网格布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网格布局</title><style>.grid-container {display: grid;/* grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(2, 1fr); */grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 10px;padding: 20px;}.grid {display: flex;justify-content: center;background-color: greenyellow;/* width: 200px; */aspect-ratio: 1;color: blueviolet;align-items: center;font-size: large;font-weight: 700;}</style>
</head>
<body><div class="grid-container"><div class="grid">内容1</div><div class="grid">内容2</div><div class="grid">内容3</div><div class="grid">内容4</div><div class="grid">内容5</div><div class="grid">内容6</div><div class="grid">内容7</div><div class="grid">内容8</div></div>
</body>
</html>

在这里插入图片描述

核心思路：

先定义整个容器的样式：

先将整个容器设置为二维布局系统display: grid;
再定义网格容器的列布局grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));使用repeat()函数创建列数，设置为auto-fill表示网格的列数会根据容器的宽度自动填充，使用minmax()函数定义每一列的最小宽度和最大宽度，1fr表示该列将分配容器可用空间的一部分
设置各个网格项行列之间的间距gap: 10px

再定义每个网格项的样式：

先将网格项的布局模式为Flexbox布局display: flex;（可以帮助更好的控制内容再元素内的对齐方式）
在Flexbox布局下，控制子元素的对齐方式，水平居中justify-content: center;
再设置元素的垂直居中align-items: center;（同样也适用于Flexbox布局）
将网格项设置为正方形，使用aspect-ratio: 1;，控制元素的宽高比。
-fill, minmax(200px, 1fr));使用repeat()函数创建列数，设置为auto-fill表示网格的列数会根据容器的宽度自动填充，使用minmax()函数定义每一列的最小宽度和最大宽度，1fr`表示该列将分配容器可用空间的一部分*
设置各个网格项行列之间的间距gap: 10px

再定义每个网格项的样式：

先将网格项的布局模式为Flexbox布局display: flex;（可以帮助更好的控制内容再元素内的对齐方式）
在Flexbox布局下，控制子元素的对齐方式，水平居中justify-content: center;
再设置元素的垂直居中align-items: center;（同样也适用于Flexbox布局）
将网格项设置为正方形，使用aspect-ratio: 1;，控制元素的宽高比。

前端css实例

前端css实例一、带条纹的表格 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>条纹样式的表格<…...

编程日记 2024/12/2 4:12:06

YOLO的框架及版本迭代

YOLO（You Only Look Once）是一种非常流行的实时目标检测算法，其特点是将目标检测任务转换为一个回归问题，通过一次前向传播就可以同时完成目标的分类和定位。以下是YOLO框架的整体架构和工作原理： 一、YOLO的基本框架…...

编程日记 2024/12/2 4:11:04

PotPlayer 最新版本支持使用 Whisper 自动识别语音生成字幕

PotPlayer 最新版本支持使用 Whisper 自动识别语音生成字幕设置使用下载地址设置使用下载地址 https://www.videohelp.com/software/PotPlayer...

编程日记 2024/12/2 4:09:02

JavaScript零基础入门速通（中）

目录 1. 函数 1.1 函数声明 1.2 返回值 1.3 匿名函数 1.4 箭头函数 2. 对象 2.1 创建对象 2.2 访问和修改对象的属性 2.3 对象方法 3. 数组 3.1 创建数组 3.2 数组方法 3.3 遍历数组 4. 作用域 4.1 全局作用域 4.2 局部作用域 4.3 块级作用域 5. 事件处理 5…...

编程日记 2024/12/2 4:07:00

【Yarn Bug】 yarn 安装依赖出现的网络连接问题

最近，在初始化 Ant Design Pro 前端脚手架过程中，使用 yarn 安装依赖时遇到了网络连接问题，具体错误信息提示为 info There appears to be trouble with your network connection. Retrying...。通过百度查询，得知出现这种问题的原…...

编程日记 2024/12/2 4:05:59

字节青训Marscode_5：寻找最大葫芦——最新题解

步骤1：问题定义与分析输入条件： 整数n：牌的数量整数max：葫芦牌面值之和的上限数组array：n张牌的牌面值输出条件： 两个整数组成的数组[a,b]： a表示三张相同牌的牌面值b表示两张相同牌的牌面值如…...

编程日记 2024/12/2 4:04:57

MySQL —— MySQL 程序

目录前言一、MySQL 程序简介二、mysqld -- MySQL 服务器三、mysql -- MySQL 客户端 1. mysql 客户端简介 2. mysql 客户端选项 （1）指定选项的方式 （2）mysql 客户端命令常用选项 （3）在命令行中使…...

编程日记 2024/12/2 4:03:56

LLamafactory API部署与使用异步方式 API 调用优化大模型推理效率

文章目录背景介绍第三方大模型API 介绍LLamafactory 部署API大模型 API 调用工具类项目开源背景介绍第三方大模型API 目前，市面上有许多第三方大模型 API 服务提供商，通过 API 接口向用户提供多样化的服务。这些平台不仅能提供更多类别和类型的模型…...

编程日记 2024/12/2 4:02:54

不玩PS抠图了，改玩Python抠图

网上找了两个苏轼的印章图片： 把这两个印章抠出来的话，对于不少PS高手来说是相当容易，但是要去掉其中的水印，可能要用仿制图章慢慢描绘，图章的边缘也要慢慢勾画或者用通道抠图之类来处理，而且印章的红色也不…...

编程日记 2024/12/2 4:01:54

三维渲染中顺序无关的半透明混合(OIT）（一Depth Peeling）

>本文收集关于透明对象渲染技术中关于OIT技术的资料，尝试用简单的逻辑对这些内容进行整理。 1、透明对象的特殊对待不要小瞧png图片和jpg图片的差异！在一般的三维平台，png代表的是带透明通道的纹理，而jpg代表的是不带透明的…...

编程日记 2024/12/2 3:57:49

Linux零基础入门--Makefile和make--纯干货无废话！！

目录 Makefile的概念与使用 Makefile的编写多个源文件的Makefile编写 Makefile的概念与使用 Makefile其实是linux中的一种包含构建指令的文件，用于自动化构建一个工程中的源文件不计数，其按类型、功能、模块分别放在若干个目录中，makefi…...

编程日记 2024/12/2 3:53:46

vim编辑器的一些配置和快捷键

记录vim编辑器的一些配置和快捷键，边学边用： yy 复制dd 删除p：粘贴ctrly 取消撤销u：撤销:w 写入:q 退出a/i 插入O: 上方插入一个空行o：下方插入一个空行:e 打开文件编辑其他配置： 上移一行和下移一行&a…...

编程日记 2024/12/2 3:52:42

电子应用设计方案-31：智能AI音响系统方案设计

智能 AI 音响系统方案设计一、引言智能 AI 音响作为一种新兴的智能家居设备，通过融合语音识别、自然语言处理、音频播放等技术，为用户提供便捷的语音交互服务和高品质的音乐体验。本方案旨在设计一款功能强大、性能稳定、用户体验良好的智能 AI 音响系…...

编程日记 2024/12/2 3:51:41

【设计模式】【结构型模式（Structural Patterns）】之装饰模式（Decorator Pattern）

1. 设计模式原理说明装饰模式（Decorator Pattern） 是一种结构型设计模式，它允许在不改变对象接口的前提下，动态地给对象增加额外的责任或功能。这种模式创建了一个装饰类，用于包装原有的类，并在保持类方法…...

编程日记 2024/12/2 3:49:39

【AI】JetsonNano启动时报错：soctherm OC ALARM

1、问题描述将JetsonNano烧写SD卡镜像为Ubuntu20.04后，启动时报错：soctherm OC ALARM，启动失败；然后系统一直重启 2、原因分析 “soctherm OC ALARM”是检测到系统温度超过安全阈值时发出的过热警告。 “soctherm”代表系统…...

编程日记 2024/12/2 3:48:38

QT:生成二维码 QRCode

目录 1.二维码历史2.QT源码3.界面展示4.工程源码链接 1.二维码历史二维码（2-Dimensional Bar Code），是用某种特定的几何图形按一定规律在平面（二维方向上）分布的黑白相间的图形记录数据符号信息的。它是指在一维条码…...

编程日记 2024/12/2 3:44:34

【LeetCode刷题之路】120：三角形最小路径和的两种解法（动态规划优化）

LeetCode刷题记录 🌐 我的博客主页：iiiiiankor🎯 如果你觉得我的内容对你有帮助，不妨点个赞👍、留个评论✍，或者收藏⭐，让我们一起进步！📝 专栏系列：LeetCode…...

编程日记 2024/12/2 3:42:31

神经网络中常见的激活函数Sigmoid、Tanh和ReLU

激活函数在神经网络中起着至关重要的作用，它们决定了神经元的输出是否应该被激活以及如何非线性地转换输入信号。不同的激活函数适用于不同的场景，选择合适的激活函数可以显著影响模型的性能和训练效率。以下是三种常见的激活函数：Sigmoid、T…...

编程日记 2024/12/2 3:38:26

适用于学校、医院等低压用电场所的智能安全配电装置

引言电力，作为一种清洁且高效的能源，极大地促进了现代生活的便捷与舒适。然而，与此同时，因使用不当或维护缺失等问题，漏电、触电事件以及电气火灾频发，对人们的生命安全和财产安全构成了严重威胁&#xf…...

编程日记 2024/12/2 3:36:23

基于python爬虫的智慧人才数据分析系统

废话不多说，先看效果图更多效果图可私信我获取源码分享 import os import sysdef main():"""Run administrative tasks."""os.environ.setdefault(DJANGO_SETTINGS_MODULE, 智慧人才数据分析系统.settings)try:from django.core.m…...

编程日记 2024/12/2 3:32:17

别再只用memcpy了！手把手教你用memcpy_s写出更安全的C语言代码（附VS2022实战）

从memcpy到memcpy_s：现代C语言安全编程实战指南在Visual Studio 2022的编译输出窗口中，那个刺眼的C4996警告已经成为许多C语言开发者的"老朋友"。当看到"error C4996: memcpy: This function or variable may be unsafe"时&#xf…...

编程新知 2026/5/12 2:09:39

uni-app iOS后台运行 uni-app App如何实现后台定位或音乐播放

iOS上uni.startBackgroundTask基本无效，仅音频播放、定位更新、后台数据刷新三类能力合规；后台定位需manifest声明原生权限地理围栏事件；无声音频保活须onLaunch配置AudioSession并延迟播放。uni.startBackgroundTask 在 iOS 上基本无效&…...

编程新知 2026/5/12 0:22:42

别再只用VGG19做分类了！手把手教你用PyTorch提取4096维图像特征向量（实战教程）

突破分类局限：用PyTorch解锁VGG19的深度特征提取实战当你第一次接触VGG19时，可能被它的ImageNet分类能力所震撼。但如果你只把它当作一个分类器，那就如同用瑞士军刀只开瓶盖——大材小用。在计算机视觉领域，预训练模型真正的价值…...

编程新知 2026/5/11 23:30:30

Watercolor风格在MJ中被严重低估的3个底层能力：纸基模拟、颜料扩散建模、干湿叠加逻辑（Adobe资深插画师联合验证）

更多请点击： https://intelliparadigm.com 第一章：Watercolor风格在MJ中被严重低估的3个底层能力：纸基模拟、颜料扩散建模、干湿叠加逻辑（Adobe资深插画师联合验证） 纸基模拟：不只是纹理，而是…...

编程新知 2026/5/11 21:17:03

从噪声中捕捉节拍：基于PLL的CDR电路如何重塑光通信数据流

1. 当光信号遇上噪声：CDR电路为何成为关键救星想象一下你正在嘈杂的菜市场里试图听清朋友说话——周围此起彼伏的叫卖声就像光通信中的噪声，而朋友说话的节奏就是需要提取的时钟信号。这就是光接收机面临的真实困境：传输过来的NRZ信号往往带…...

编程新知 2026/5/11 20:59:26

保姆级教程：用Winbox给ROS配置一线多拨，实测200M宽带叠加效果（附避坑指南）

家庭网络优化实战：Winbox配置多拨提升宽带利用率家里装了200M宽带，但下载大文件时总觉得速度没跑满？多人同时在线看4K视频就开始卡顿？其实通过简单的路由器配置，你完全有可能突破运营商单线限制，让宽带利用…...

编程新知 2026/5/11 19:42:51

跨平台桌面待办工具My-TODOs：本地存储的极简任务管理终极指南

跨平台桌面待办工具My-TODOs：本地存储的极简任务管理终极指南【免费下载链接】My-TODOs A cross-platform desktop To-Do list. 跨平台桌面待办小工具项目地址: https://gitcode.com/gh_mirrors/my/My-TODOs 你是否厌倦了云端任务管理工具的复杂界面和隐私…...

编程新知 2026/5/11 17:37:44

ExplorerPatcher架构解析：深度剖析Windows界面定制引擎

ExplorerPatcher架构解析：深度剖析Windows界面定制引擎【免费下载链接】ExplorerPatcher This project aims to enhance the working environment on Windows 项目地址: https://gitcode.com/GitHub_Trending/ex/ExplorerPatcher ExplorerPatcher作为Window…...

编程新知 2026/5/11 15:26:26

降AI提示词够用吗？降AI工具比prompt强在哪？嘎嘎降AI双降！

降AI提示词够用吗？降AI工具比prompt强在哪？嘎嘎降AI双降！ 用 AI 写论文的同学经常纠结一件事：0 元的降 AI 提示词够用吗？还是非得花钱买降 AI 工具不可？ 直接给结论： 如果你 AI 写得不多、整体 …...

编程新知 2026/5/11 15:06:57

ARM-MPU实战：从寄存器配置到内存安全防护

1. ARM-MPU基础概念与核心价值第一次接触ARM-MPU时，我盯着开发板反复确认了三遍接线——明明程序逻辑完全正确，却总是莫名其妙进入HardFault中断。后来才发现是某个野指针改写了关键数据区，这种隐蔽的错误让我意识到内存保护的重要性。ARM-M…...

编程新知 2026/5/11 14:35:44

前端css实例

一、带条纹的表格

核心思路：

二、带下拉菜单的水平导航栏

核心思路：

三、带悬浮动漫的按钮

核心思路：

四、带阴影的卡片

核心思路：

五、图片的提示文本

核心思路：

六、折叠面板

核心思路：

七、网格布局

核心思路：

相关文章：