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包裹内容再设宽

相关专题

更多
css
css

css是层叠样式表,用来表现HTML或XML等文件样式的计算机语言,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

524

2023.06.15

css居中
css居中

css居中:1、通过“margin: 0 auto; text-align: center”实现水平居中;2、通过“display:flex”实现水平居中;3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容,供大家免费下载体验。

265

2023.07.27

css如何插入图片
css如何插入图片

cssCSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于描述网页或应用程序外观和样式的标记语言。CSS可以控制网页的字体、颜色、布局、大小、背景、边框等方面,使得网页的外观更加美观和易于阅读。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

758

2023.07.28

css超出显示...
css超出显示...

在CSS中,当文本内容超出容器的宽度或高度时,可以使用省略号来表示被隐藏的文本内容。本专题为大家提供css超出显示...的相关文章,相关教程,供大家免费体验。

539

2023.08.01

css字体颜色
css字体颜色

CSS中,字体颜色可以通过属性color来设置,用于控制文本的前景色,字体颜色在网页设计中起到很重要的作用,具有以下表现作用:1、提升可读性;2、强调重点信息;3、营造氛围和美感;4、用于呈现品牌标识或与品牌形象相符的风格。

761

2023.08.10

什么是css
什么是css

CSS是层叠样式表(Cascading Style Sheets)的缩写,是一种用于描述网页(或其他基于 XML 的文档)样式与布局的标记语言,CSS的作用和意义如下:1、分离样式和内容;2、页面加载速度优化;3、实现响应式设计;4、确保整个网站的风格和样式保持统一。

605

2023.08.10

css三角形怎么写
css三角形怎么写

CSS可以通过多种方式实现三角形形状,本专题为大家提供css三角形怎么写的相关教程,大家可以免费体验。

560

2023.08.21

css设置文字颜色
css设置文字颜色

CSS(层叠样式表)可以用于设置文字颜色,这样做有以下好处和优势:1、增加网页的可视化效果;2、突出显示某些重要的信息或关键字;3、增强品牌识别度;4、提高网页的可访问性;5、引起不同的情感共鸣。

397

2023.08.22

Java JVM 原理与性能调优实战
Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机(JVM)的核心工作原理与性能调优方法,包括 JVM 内存结构、对象创建与回收流程、垃圾回收器(Serial、CMS、G1、ZGC)对比分析、常见内存泄漏与性能瓶颈排查,以及 JVM 参数调优与监控工具(jstat、jmap、jvisualvm)的实战使用。通过真实案例,帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

19

2026.01.20

热门下载

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

精品课程

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

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

CSS教程
CSS教程

共754课时 | 21.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

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