讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 人工智能 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 人工智能 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
当前位置：首页 > web前端 > html教程 >

正文

0

0

html如何制作分类框_使用HTML创建内容分类框样式【样式】

絕刀狂花

絕刀狂花

发布时间：2025-12-16 14:59:52

|

447人浏览过

|

来源于php中文网

原创

可使用五种HTML+CSS方法创建分类框：一、fieldset与legend实现语义化分组；二、div+伪元素自定义样式；三、CSS Grid布局多列分类；四、Flexbox实现横向滚动标签栏；五、details+summary创建可折叠分类框。

html如何制作分类框_使用html创建内容分类框样式【样式】

如果您希望在网页中对内容进行清晰的分组展示，可以使用HTML结合CSS创建分类框。以下是实现分类框样式的多种方法：

一、使用fieldset与legend标签构建语义化分类框

fieldset元素天然具备分组语义，legend作为其标题可直接置于左上角，浏览器默认提供边框与标题嵌入效果，无需额外CSS即可形成基础分类框结构。

1、在HTML中插入

标签，并在其内部添加标签用于显示分类名称。

2、将需要归类的内容（如段落、列表、表单控件等）置于
与
之间。

立即学习“前端免费学习笔记（深入）”；

3、通过CSS设置border-radius、padding和border-color属性，可调整边框圆角、内边距及颜色以匹配页面风格。

4、为添加font-weight: bold和background-color样式，可使其标题更醒目，注意legend必须是fieldset的第一个子元素才能正确渲染位置。

二、使用div配合CSS边框与伪元素实现自定义分类框

该方法灵活性高，适用于需精确控制布局、阴影、渐变或响应式行为的场景，不依赖语义化标签但需手动维护可访问性。

1、创建一个

容器，并为其添加class属性，例如class="category-box"。

2、在CSS中为该class设置border、padding、margin和position: relative属性，建立基础框体。

3、使用::before伪元素生成分类标题，设置content属性为分类名，position: absolute并定位至左上角区域。

4、为伪元素添加background-color、color、padding和font-size，确保伪元素z-index高于主边框以避免被遮挡。

三、使用CSS Grid配合嵌套div实现多列分类框布局

当分类框需承载多个并列子分类（如“热门”、“最新”、“推荐”）时，Grid可精准划分区域，保持各子块尺寸一致且对齐严谨。

1、外层容器设置display: grid，定义grid-template-columns为所需列数，例如repeat(3, 1fr)。

魔法映像企业网站管理系统
魔法映像企业网站管理系统

技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作

下载

2、每个子分类使用独立

，赋予统一class如category-item，并设置border、background和padding。

3、在每个子div内嵌套一个

或作为分类标题，并应用text-align: center与font-weight: 600。

4、为外层容器添加gap属性控制子项间距，gap值需大于0以避免相邻边框视觉粘连。

四、使用CSS Flexbox实现横向滚动分类标签栏

适用于标签数量较多、空间有限的移动端或窄屏场景，通过flex容器溢出隐藏+横向滚动，保证所有分类可触达。

1、创建

作为容器，设置display: flex、overflow-x: auto和white-space: nowrap。

2、内部每个分类标签使用包裹文字，并设置flex-shrink: 0防止压缩。

3、为.tab-item添加border、border-radius、margin-right和padding，统一视觉权重。

4、在CSS中为.category-tabs添加-webkit-scrollbar相关规则隐藏原生滚动条，必须设置scroll-behavior: smooth以提升滚动流畅度。

五、使用HTML details与summary标签创建可折叠分类框

该方案兼顾交互性与语义化，点击标题即可展开/收起内容，适合信息密度高、需节省垂直空间的场景。

1、插入

标签，其内部第一个子元素必须为，用于显示分类标题。

2、在

后添加任意HTML内容（如

、

    等），这些内容默认隐藏，点击summary后显示。

3、通过CSS为details[open]设置border-top、padding-top等样式，区分展开状态下的视觉层次。

4、为summary添加list-style: none和outline: none，并用cursor: pointer提示可交互，summary元素不支持直接设置width，需用display: inline-block包裹内容再设宽。

相关文章

如何用单个 JavaScript 函数实现多色背景切换（ROYGBV 按钮）

如何用单个JavaScript函数实现多色背景切换

如何用单个函数实现多色背景切换（ROYGBV 按钮）

Rvest 网页爬虫实战：高效抓取日本职业棒球联盟（NPB）数据表

Rvest 网络爬虫实战：高效抓取日本职业棒球联盟（NPB）官网数据
HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

相关标签:

css html go 伪元素 浏览器 ai overflow grid布局 webkit auto class pointer 内边距 display position overflow margin padding border 伪元素 background flex ul

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：HTML浏览器运行配置怎么填_填HTML浏览器运行配置步骤【设置】 下一篇：html5如何上下居中_HTML5元素垂直居中实现方法【居中】

作者最新文章

4399云游戏能否绑定社交账号_4399云游戏第三方账号关联方法【攻略】

2026-01-30 09:04

惠普电脑怎么卸载预装游戏_惠普笔记本自带游戏卸载方法【说明】

2026-01-30 09:05

iphone怎么设置紧急联系人 iphoneSOS功能使用说明【指南】

2026-01-30 10:14

vivo手机怎么互传文件_vivo手机互传使用教程【步骤】

2026-01-30 10:20

Win11怎样禁用Cortana_Win11禁用Cortana操作【步骤】

2026-01-30 10:23

忘记oppo手机私密保险箱密码咋整_oppo手机私密保险箱密码恢复法【方案】

2026-01-30 10:23

司马斤与公斤怎么换_1司马斤约604.8克港澳仍用此制【解答】

2026-01-30 10:35

苹果17promax晕车功能怎么看使用记录_苹果17promax晕车记录查看【方法】

2026-01-30 10:40

抖音电脑版如何删除作品_电脑版抖音作品删除方法【指南】

2026-01-30 10:41

php多维转一维处理大数组_php大数组降维分批处理【方法】

2026-01-30 10:44

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

AI 编程开发AI 聊天问答
豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

AI 编程开发AI大模型
通义千问
通义千问

阿里巴巴推出的全能AI助手

AI 编程开发Agent智能体
腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文档处理AI 聊天问答
文心一言
文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI 编程开发AI 文本写作
讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

AI 文本写作中文写作
即梦AI
即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接
ChatGPT
ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI 编程开发AI 文本写作
智谱清言 - 免费全能的AI助手
智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

AI 编程开发Agent智能体

相关专题

更多
class在c语言中的意思
class在c语言中的意思

在C语言中，"class" 是一个关键字，用于定义一个类。想了解更多class的相关内容，可以阅读本专题下面的文章。

469

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容，阅读专题下面的文章了解更多详细内容。

17

2025.12.06

CSS position定位有几种方式
CSS position定位有几种方式

有4种，分别是静态定位、相对定位、绝对定位和固定定位。更多关于CSS position定位有几种方式的内容，可以访问下面的文章。

81

2023.11.23

overflow什么意思
overflow什么意思

overflow是一个用于控制元素溢出内容的属性，当元素的内容超出其指定的尺寸时，overflow属性可以决定如何处理这些溢出的内容。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

1768

2024.08.15

margin在css中是啥意思
margin在css中是啥意思

在CSS中，margin是一个用于设置元素外边距的属性。想了解更多margin的相关内容，可以阅读本专题下面的文章。

436

2023.12.18

css中的padding属性作用
css中的padding属性作用

在CSS中，padding属性用于设置元素的内边距。想了解更多padding的相关内容，可以阅读本专题下面的文章。

133

2023.12.07

html边框设置教程
html边框设置教程

本教程将带你全面掌握HTML/CSS边框设置，从基础的border属性讲起，涵盖所有边框样式、圆角设置及高级技巧，帮助你快速上手实现各种边框效果。

36

2025.09.02

flex教程
flex教程

php中文网为大家带来了flex教程合集，Flex是采用Flex布局的元素，称为Flex容器（flex container），简称"容器"，它的所有子元素自动成为容器成员，有三个核心概念： flex项，需要布局的元素；flex容器，其包含flex项；排列方向，这决定了flex项的布局方向。php中文网还为大家带来flex的相关下载资源、相关课程以及相关文章等内容，供大家免费下载使用。

359

2023.06.14

go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容，阅读专题下面的文章了解更多详细内容。

30

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

相关下载

更多
魔法映像企业网站管理系统

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

CSS教程
CSS教程

共754课时 | 26.2万人学习

最新文章

更多
如何在 jQuery 中实现多字段表单的并行验证（而非顺序短路验证）
如何用纯 CSS 水平居中一个比父容器更宽的子元素（无需知道子元素宽度）
如何用纯 CSS 水平居中宽度超过父容器的子元素
如何使用 curl 阻止 PHP 重定向并获取原始响应内容
如何让 HTML 背景图片完整覆盖容器全宽（避免横向溢出）
如何免费部署 Flask 应用并绑定自有域名（以 Render 为例）
如何免费部署 Flask 应用并绑定自有域名（如 GoDaddy 购买的域名）
如何修复 HTML 简易计算器中“NaN”错误并实现正确加法运算
如何在单页中为多个 YouTube 视频创建独立的嵌入式播放器
如何让 HTML 背景图片完整覆盖浏览器视口宽度（避免水平溢出）
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部