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

【CSS】网站 网格商品展示 模块制作 ( 清除浮动需求 | 没有设置高度的盒子且内部设置了浮动 | 使用双伪元素清除浮动 )

一、清除浮动需求 ( 没有设置高度的盒子且内部设置了浮动 )

绘制的如下模块 :

在上面的盒子中 , 没有设置高度 , 只设置了一个 1215px 的宽度 ;

在列表中每个列表项都设置了 浮动 ;

/* 网格商品展示 */
.box-bd {/* 处理列表间隙导致意外换行问题一排有 5 个 228x270 的盒子 , 其中间隙 15 像素228 * 5 + 15 * 4 = 1200 像素 , 但是最后一个盒子右侧添加 15 像素的右边距地话 , 会导致最后一个元素掉到第二行 , 这里需要将盒子宽度从 1200 像素修改为 1215 像素 正好放 5 盒子 + 5 间隙*/width: 1215px;
}/* 网格中 ul 列表中每个列表项样式 */
.box-bd li {/* 设置左浮动 让列表项在一行中从左到右排列 */float: left;/* 设置尺寸 228 x 270 */width: 228px;height: 270px;/* 设置右边距和下边距 */margin-right: 15px;margin-bottom: 15px;/* 设置背景颜色 - 白色 */background-color: #fff;/* 设置盒子模型的阴影 */box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}

 

之前的盒子都设置了高度 , 因此其中虽然设置了浮动 , 但不会影响到后续的页面布局 ;

上述模型中 , 没有设置高度 , 并且设置了浮动 , 如果不清除浮动 , 后续排列都会出现问题 ;

使用

/* 清除浮动 - 使用双伪元素清除浮动 */
.clearfix:before,
.clearfix:after {content: "";display: table;
}
.clearfix:after {clear: both;
}
.clearfix {*zoom: 1;
}

清除浮动 ;

清除浮动时 , 给要清除浮动的 父容器 , 设置 clearfix 样式 ;

二、清除浮动代码示例

首先 , 在 CSS 样式中 , 定义 使用双伪元素清除浮动 的样式 ;

/* 清除浮动 - 使用双伪元素清除浮动 */
.clearfix:before,
.clearfix:after {content: "";display: table;
}
.clearfix:after {clear: both;
}
.clearfix {*zoom: 1;
}

然后 , 在 HTML 标签结构中 , <ul> 标签的上一层父容器中 , 设置清除浮动 ;

	<!-- 网格商品展示模块 - 开始 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><!-- 没有设置高度 内部有浮动 必须清除浮动 --><div class="box-bd clearfix"><ul><li><img src="images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1200人在学习</p></li><li><img src="images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li><li><img src="images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span>  •  1125人在学习</p></li></ul></div></div><!-- 网格商品展示模块 - 结束 -->

相关文章:

【CSS】网站 网格商品展示 模块制作 ( 清除浮动需求 | 没有设置高度的盒子且内部设置了浮动 | 使用双伪元素清除浮动 )

一、清除浮动需求 ( 没有设置高度的盒子且内部设置了浮动 ) 绘制的如下模块 : 在上面的盒子中 , 没有设置高度 , 只设置了一个 1215px 的宽度 ; 在列表中每个列表项都设置了 浮动 ; /* 网格商品展示 */ .box-bd {/* 处理列表间隙导致意外换行问题一排有 5 个 228x270 的盒子…...

文本分类任务

文章目录 引言1. 文本分类-使用场景2. 自定义类别任务3. 贝叶斯算法3.1 预备知识3.2 贝叶斯公式3.3 贝叶斯公式的应用3.4 贝叶斯公式在NLP中的应用3.5 贝叶斯公式-文本分类3.6 代码实现3.7 贝叶斯算法的优缺点 4. 支持向量机4.1 支持向量机-核函数4.2 支持向量机-解决多分类4.3…...

Pyecharts教程(一):Python中的pyecharts库绘制3D曲面图

Pyecharts教程(一):Python中的pyecharts库绘制3D曲面图 作者:安静到无声 个人主页 目录 Pyecharts教程(一):Python中的pyecharts库绘制3D曲面图实验结果推荐专栏在Python中,我们可以使用pyecharts库来绘制各种图表,如柱状图、折线图、饼图等。最近,我在学习如何使用pyec…...

Unity音频基础概念

一、音源与音频侦听器 游戏画面能够被观众看到&#xff0c;是因为有渲染器和摄像机&#xff0c;同样音频能够被听到&#xff0c;也要有声音的发出者与声音的接收者。声音的发出者叫做音源&#xff0c;接收者叫做音频侦听器。Audio Source与Audio Listener都是组件&#xff0c;…...

sklearn Preprocessing 数据预处理功能

scikit-learn&#xff08;或sklearn&#xff09;的数据预处理模块提供了一系列用于处理和准备数据的工具。这些工具可以帮助你在将数据输入到机器学习模型之前对其进行预处理、清洗和转换。以下是一些常用的sklearn.preprocessing模块中的类和功能&#xff1a; 1. 数据缩放和中…...

创建和分析二维桁架和梁结构研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

SpringBoot实现文件上传和下载笔记分享(提供Gitee源码)

前言&#xff1a;这边汇总了一下目前SpringBoot项目当中常见文件上传和下载的功能&#xff0c;一共三种常见的下载方式和一种上传方式&#xff0c;特此做一个笔记分享。 目录 一、pom依赖 二、yml配置文件 三、文件下载 3.1、使用Spring框架提供的下载方式 3.2、通过IOUti…...

Git工作流

实际开发项目使用到的分支: main&#xff1a;生产环境&#xff0c;也就是你们在网上可以下载到的版本&#xff0c;是经过了很多轮测试得到的稳定版本。 release&#xff1a; 开发内部发版&#xff0c;也就是测试环境。 dev&#xff1a;所有的feature都要从dev上checkout。 fea…...

【Git Bash】简明从零教学

目录 Git 的作用官网介绍简明概要 Git 下载链接Git 的初始配置配置用户初始化本地库 Git 状态查询Git 工作机制本地工作机制远端工作机制 Git 的本地管理操作add 将修改添加至暂存区commit 将暂存区提交至本地仓库日志查询版本穿梭 Git 分支查看分支创建与切换分支跨分支修改与…...

【QT5-自我学习-线程qThread练习-两种使用方式-2:通过继承Qobject类-自己实现功能函数方式-基础样例】

【QT5-自我学习-线程qThread练习-两种使用方式-2&#xff1a;通过继承Qobject类-自己实现功能函数方式-基础样例】 1、前言2、实验环境3-1、学习链接-参考文章3-2、先前了解-自我总结&#xff08;1&#xff09;线程处理逻辑事件&#xff0c;不能带有主窗口的事件&#xff08;2&…...

两款开箱即用的Live2d

目录 背景第一款&#xff1a;开箱即用的Live2d在vue项目中使用html页面使用在线预览依赖文件地址配置相关参数成员属性源码 模型下载 第二款&#xff1a;换装模型超多的Live2d在线预览代码示例源码 模型下载 背景 从第一次使用服务器建站已经三年多了&#xff0c;记得那是在2…...

LAMP架构详解+构建LAMP平台之Discuz论坛

LAMP架构详解构建LAMP平台之Discuz论坛 1、LAPM架构简介1.1动态资源与语言1.2LAPM架构得组成1.3LAPM架构说明1.4CGI和astcgi1.4.1CGI1.4.2fastcgi1.4.3CGI和fastcgi比较 2、搭建LAMP平台2.1编译安装apache httpd2.2编译安装mysql2.3编译安装php2.4安装论坛 1、LAPM架构简介 1.…...

如何使用腾讯云服务器搭建网站?新手建站教程

使用腾讯云服务器搭建网站全流程&#xff0c;包括轻量应用服务器和云服务器CVM建站教程&#xff0c;轻量可以使用应用镜像一键建站&#xff0c;云服务器CVM可以通过安装宝塔面板的方式来搭建网站&#xff0c;腾讯云服务器网分享使用腾讯云服务器建站教程&#xff0c;新手站长搭…...

mybatis plus 控制台和日志文件中打印sql配置

1 控制台输出sql 配置mybatis-plus的日志实现类为StdOutImpl&#xff0c;该实现类中打印日志是通过System.out.println(s)的方式来打印日志的 mybatis-plus:configuration:log-impl: org.apache.imbatis.logging.stdout.StdOutImpl2 日志文件中写入sql 日志文件中输入sql需要…...

苍穹外卖总结

前言 1、软件开发流程 瀑布模型需求分析//需求规格说明书、产品原型↓ 设计 //UI设计、数据库设计、接口设计↓编码 //项目代码、单元测试↓ 测试 //测试用例、测试报告↓上线运维 //软件环境安装、配置第一阶段&#xff1a;需求分析需求规格说明书、产品原型一般来说…...

Git 删除已经合并的本地分支

在使用 Git 的开发流程中&#xff0c;经常会创建很多的 Git 分支&#xff0c;包括功能分支&#xff08;features/*&#xff09;、发布分支&#xff08;release/*&#xff09;和 hotfix 分支&#xff08;hotfix/*&#xff09;。在开发了一段时间之后&#xff0c;本地就会有出现很…...

递归算法应用(Python版)

文章目录 递归递归定义递归调用的实现递归应用数列求和任意进制转换汉诺塔探索迷宫找零兑换-递归找零兑换-动态规划 递归可视化简单螺旋图分形树&#xff1a;自相似递归图像谢尔宾斯基三角 分治策略优化问题和贪心策略 递归 递归定义 递归是一种解决问题的方法&#xff0c;其精…...

有什么react进阶的项目推荐的?

前言 整理了一些react相关的项目&#xff0c;可以选择自己需要的练习&#xff0c;希望对你有帮助~ 1.ant-design Star&#xff1a;87.1k 阿里开源的react项目&#xff0c;作为一个UI库&#xff0c;省去重复造轮子的时间 仓库地址&#xff1a;https://github.com/ant-design/…...

基于串口透传模块,单片机无线串口空中下载测试

基于串口透传模块&#xff0c;单片机无线串口空中下载测试 ✨无线串口下载&#xff0c;其本质还是串口下载方式&#xff0c;只不过省去了单片机和ISP上位机工具之间的物理有线连接&#xff0c;中间的数据通过无线串口透传模块进行数据中转&#xff0c;传递到单片机串口上。串口…...

研磨设计模式day11代理模式

目录 场景 代码实现 ​编辑 解析 定义 代理模式调用示意图 代理模式的特点 本质 ​编辑何时选用 场景 我有一个订单类&#xff0c;包含订单数、用户名和商品名&#xff0c;有一个订单接口包含了对订单类的getter和setter 现在有一个需求&#xff0c;a创建的订单只…...

STM32CubeMX实战指南:从零搭建HAL库项目与LED控制

1. STM32CubeMX与HAL库开发入门 第一次接触STM32开发的朋友可能会被各种专业术语吓到——寄存器、固件库、HAL库、时钟树配置... 作为一个从51单片机转战STM32的"过来人"&#xff0c;我完全理解这种困惑。三年前我刚开始用STM32F103时&#xff0c;光是搭建开发环境就…...

Phi-4-mini-reasoning效果展示:Chainlit中实时显示推理耗时与token生成速率

Phi-4-mini-reasoning效果展示&#xff1a;Chainlit中实时显示推理耗时与token生成速率 1. 模型简介 Phi-4-mini-reasoning 是一个基于合成数据构建的轻量级开源模型&#xff0c;专注于高质量、密集推理的数据处理。作为Phi-4模型家族的一员&#xff0c;它特别强化了数学推理…...

教你把歌曲原声调小的5个技巧!简单又好用 赶紧收藏

在日常生活中&#xff0c;调整歌曲原声调小是非常常见的音频处理需求。比如在剪辑视频时&#xff0c;可能需要降低背景音乐的音量以突出旁白&#xff1b;或者在制作播客时&#xff0c;需要平衡人声与背景音的比例&#xff1b;还有在手机上听音乐时&#xff0c;某些歌曲突然出现…...

YOLOv8特征可视化实战:如何用3种合并模式优化模型调试(附完整代码)

YOLOv8特征可视化实战&#xff1a;3种合并模式优化模型调试的工程实践 在计算机视觉领域&#xff0c;理解神经网络内部工作机制一直是提升模型性能的关键。YOLOv8作为当前最先进的实时目标检测框架之一&#xff0c;其内部特征层的可视化分析能够为模型调试提供直观依据。然而&a…...

OMO·赶考小状元AI自习室:破解线下自习室困局,引领学习新范式

近年来&#xff0c;一个有趣的现象在教培领域悄然发生&#xff1a;传统线下自习室逐渐遇冷&#xff0c;客流量与用户粘性面临挑战&#xff1b;而与此同时&#xff0c;一种名为“AI自习室”的新形态却异军突起&#xff0c;展现出强大的市场吸引力。这背后&#xff0c;并非简单的…...

久鼎私域测流模式系统(现成方案)

久鼎私域测流模式系统是一套专注于私域流量监测与分析的解决方案&#xff0c;适用于企业精细化运营私域用户池。其核心功能包括流量来源追踪、用户行为分析、转化效果评估等&#xff0c;支持多平台数据整合。核心功能模块流量监测 实时监控私域流量入口&#xff08;如小程序、公…...

MCP服务器开发踩坑实录,深度解析asyncio+FastAPI+MCPv0.5兼容性难题及热修复方案

第一章&#xff1a;MCP服务器开发踩坑实录&#xff0c;深度解析asyncioFastAPIMCPv0.5兼容性难题及热修复方案在基于MCP&#xff08;Model Context Protocol&#xff09;v0.5规范构建异步AI服务代理时&#xff0c;我们发现FastAPI 0.115 与标准asyncio事件循环存在隐式冲突&…...

从赛道到产线:智能车竞赛如何为《美国工厂》精神谱写青春代码

1. 智能车竞赛&#xff1a;制造业的青春实验室 当《美国工厂》纪录片中那些机械臂精准运作的画面还在脑海中挥之不去时&#xff0c;我站在全国大学生智能车竞赛的现场&#xff0c;突然意识到这两者之间存在着某种奇妙的联系。智能车竞赛就像是一个微缩版的制造业实验室&#xf…...

Jimeng LoRA企业落地案例:设计公司LoRA训练-测试-选型一体化流程

Jimeng LoRA企业落地案例&#xff1a;设计公司LoRA训练-测试-选型一体化流程 1. 项目简介 今天给大家分享一个特别实用的企业级AI应用案例——如何为设计公司搭建一套完整的LoRA模型训练、测试和选型流程。这个项目基于Jimeng&#xff08;即梦&#xff09;系列LoRA模型&#…...

嵌入式系统内存泄漏防护与实战解决方案

1. 内存泄漏的危害与现状分析在嵌入式系统开发中&#xff0c;内存泄漏堪称"隐形杀手"。我经历过一个真实案例&#xff1a;某通信设备在现网运行三个月后频繁重启&#xff0c;最终定位是某个看似无害的日志处理函数每次调用泄漏512字节内存。这个案例让我深刻认识到&a…...