【前端基础】Day 5 CSS浮动
目录
1. 浮动
1.1 标准流（普通流/文档流）
1.2 浮动
1.2.1 浮动的特性
1.2.2 浮动元素常和标准流父级搭配使用
1.2.3 案例
2. 常见网页布局
2.1 常见网页布局
2.2 浮动布局注意点
3. 清除浮动
3.1 原因
3.2 清除浮动的本质
3.3 清除浮动的方法
3.3.1 额外标签法
3.3.2 父级添加overflow
3.3.3 after 伪元素法
3.3.4 双伪元素清除浮动
3.3.5 总结
4. PS 切图
5. 学成在线案例
CSS 属性书写顺序
页面布局整体思路
头部制作
1. 浮动
1.1 标准流（普通流/文档流）
1.2 浮动
1.2.1 浮动的特性
1. 脱标
2. 行内显示并且顶端对齐
行内块元素间有缝隙
3. 浮动的元素具有行内块元素的特性
1.2.2 浮动元素常和标准流父级搭配使用
摆放盒子：先大小后位置
1.2.3 案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 1226px;height: 615px;background-color: pink;margin: 0 auto;}.left {float: left;width: 234px;height: 615px;background-color: purple;}.right {float: right;width: 992px;height: 615px;background-color: skyblue;}li {float: left;width: 234px;height: 300px;background-color: #fff;list-style: none;margin-left: 14px;margin-bottom: 14px;}li img {width: 100%;}</style>
</head><body><div class="box"><div class="left"></div><div class="right"><ul><li><img src="../img1.jpg"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div>
</body></html>2. 常见网页布局
2.1 常见网页布局
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.top {height: 50px;background-color: gray;}.banner {width: 980px;height: 150px;background-color: gray;margin: 10px auto;}.box {height: 300px;width: 980px;background-color: pink;margin: 0 auto;}li {list-style: none;}.box li {float: left;width: 237px;height: 300px;background-color: gray;margin-right: 10px;}.box .last {margin-right: 0;}/* 只要是通栏的盒子（和浏览器一样宽）不需要指定宽 */.footer {height: 200px;background-color: gray;margin-top: 10px;}</style>
</head><body><div class="top">top</div><div class="banner">banner</div><div class="box"><ul><li>1</li><li>2</li><li>3</li><li class="last">4</li></ul></div><div class="footer">footer</div>
</body></html>2.2 浮动布局注意点
3. 清除浮动
3.1 原因
3.2 清除浮动的本质
3.3 清除浮动的方法
3.3.1 额外标签法
3.3.2 父级添加overflow
3.3.3 after 伪元素法
3.3.4 双伪元素清除浮动
3.3.5 总结
4. PS 切图
4.1 常见图片格式
4.2 图层切图
4.3 切片切图
4.4 PS 插件切图
5. 学成在线案例
准备工作
CSS 属性书写顺序
页面布局整体思路
头部制作
HTML代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学成在线首页</title><link rel="stylesheet" href="style.css">
</head><body><!-- 1.头部区域 --><div class="header w"><!-- logo部分 --><div class="logo"><img src="logo.png"></div><!-- 导航栏部分 nav --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div><!-- 搜索框 --><div class="search"><input type="text" value="输入关键词"><button></button></div><!-- 用户模块 --><div class="user"><img src="user.png" alt="">qq-lilei</div></div><!-- 2.banner部分 --><div class="banner"><!-- 版心 --><div class="w"><div class="subnav"><ul><li><a href="#">前端开发<span>></span></a></li><li><a href="#">后端开发<span>></span></a></li><li><a href="#">移动开发<span>></span></a></li><li><a href="#">人工智能<span>></span></a></li><li><a href="#">商业预测<span>></span></a></li><li><a href="#">云计算&大数据<span>></span></a></li><li><a href="#">运维&测试<span>></span></a></li><li><a href="#">UI设计<span>></span></a></li><li><a href="#">产品<span>></span></a></li></ul></div><!-- 课程表模块 --><div class="course"><h2>我的课程表</h2><div class="bd"><ul><li><h4>继续学习 程序语义设计</h4><p>正在学习-使用对象</p></li><li><h4>继续学习 程序语义设计</h4><p>正在学习-使用对象</p></li><li><h4>继续学习 程序语义设计</h4><p>正在学习-使用对象</p></li></ul><a href="#" class="more">全部课程</a></div></div></div></div><!-- 3.精品推荐模块 --><div class="goods w"><h3>精品推荐</h3><ul><li><a href="#">JQuery</a></li><li><a href="#">Spark</a></li><li><a href="#">MySQL</a></li><li><a href="#">JavaWeb</a></li><li><a href="#">MySQL</a></li><li><a href="#">JavaWeb</a></li></ul><a href="#" class="mod">修改兴趣</a></div><!-- 4.box核心内容其余 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><li><img src="pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="pic.png" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li></ul></div></div><!-- 5.footer 模块 --><div class="footer"><div class="w"><div class="copyright"><img src="logo.png" alt=""><p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p><a href="#" class="app">下载APP</a></div><div class="links"><dl><dt>关于学成网</dt><dd><a href="#">关于</a></dd><dd><a href="#">管理团队</a></dd><dd><a href="#">工作机会</a></dd><dd><a href="#">客户服务</a></dd><dd><a href="#">帮助</a></dd></dl><dl><dt>关于学成网</dt><dd><a href="#">关于</a></dd><dd><a href="#">管理团队</a></dd><dd><a href="#">工作机会</a></dd><dd><a href="#">客户服务</a></dd><dd><a href="#">帮助</a></dd></dl><dl><dt>关于学成网</dt><dd><a href="#">关于</a></dd><dd><a href="#">管理团队</a></dd><dd><a href="#">工作机会</a></dd><dd><a href="#">客户服务</a></dd><dd><a href="#">帮助</a></dd></dl></div></div></div>
</body></html>CSS代码
* {margin: 0;padding: 0;
}.w {width: 1200px;margin: auto;
}body {background-color: #f3f5f7;
}li {list-style: none;
}a {text-decoration: none;
}/* 清除浮动带来的影响 */
.clearfix:before,
.clearfix:after {content: "";display: table;
}.clearfix:after {clear: both;
}.clearfix {*zoom: 1;
}.header {height: 42px;margin: 30px auto;
}.logo {float: left;width: 198px;height: 42px;
}.nav {float: left;margin-left: 60px;
}.nav ul li {float: left;margin: 0 15px;
}.nav ul li a {display: block;height: 42px;padding: 0 10px;line-height: 42px;font-size: 18px;color: #050505;
}.nav ul li a:hover {border-bottom: 2px solid #00a4ff;color: #00a4ff;
}.search {float: left;width: 412px;height: 42px;margin-left: 70px;
}.search input {/* input 和button都是行内块元素，行内块元素间默认有缝隙 */float: left;width: 345px;height: 40px;border: 1px solid #00a4ff;border-right: none;color: #bfbfbf;font-size: 14px;padding-left: 15px;
}.search button {float: left;width: 50px;height: 42px;/* 按钮button默认有个边框需要手动去除 */border: 0;background-image: url(btn.png);
}.user {float: right;line-height: 42px;margin-right: 30px;font-size: 14px;color: #666;
}.banner {height: 421px;background-color: #1c036c;
}.banner .w {height: 421px;background: url(banner2.png) no-repeat top center;
}.subnav {float: left;width: 190px;height: 421px;background: rgba(0, 0, 0, 0.3);
}.subnav ul li {height: 45px;line-height: 45px;padding: 0 20px;
}.subnav ul li a {font-size: 14px;color: #fff;}.subnav ul li a span {float: right
}.subnav ul li a:hover {color: #00a4ff;
}.course {float: right;width: 230px;height: 300px;background-color: #fff;/* 浮动的盒子不会有外边距合并的问题 */margin-top: 50px;
}.course h2 {height: 42px;background-color: #9bceea;text-align: center;line-height: 42px;color: #fff;
}.bd {padding: 0 20px;
}.bd ul li {padding: 14px 0;border-bottom: 1px solid #ccc;
}.bd ul li h4 {font-size: 16px;color: #4e4e4e;
}.bd ul li p {font-size: 12px;color: #a5a5a5;
}.bd .more {display: block;height: 38px;border: 1px solid #00a4ff;margin-top: 5px;text-align: center;line-height: 38px;color: #00a4ff;font-size: 16px;font-weight: 700;
}/* 精品推荐模块 */
.goods {height: 60px;background-color: #fff;margin-top: 10px;box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.1);/* 行高会被继承 */line-height: 60px;
}.goods h3 {float: left;margin-left: 30px;font-size: 16px;color: #00a4ff;
}.goods ul {float: left;margin-left: 30px;
}.goods ul li {float: left;
}.goods ul li a {padding: 0 30px;font-size: 16px;color: #050505;border-left: 1px solid #ccc;
}.mod {float: right;margin-right: 30px;font-size: 14px;color: #00a4ff;
}.box {margin-top: 30px;}.box-hd {height: 45px;
}.box-hd h3 {float: left;font-size: 20px;color: #494949;
}.box-hd a {float: right;font-size: 12px;color: #a5a5a5;margin-top: 10px;margin-right: 30px;
}.box-bd ul {width: 1225px;
}/* 让li的父亲.box-bd ul足够宽能够一行装下5个盒子则无需换行 */
.box ul li {float: left;width: 228px;height: 270px;margin-right: 15px;margin-bottom: 15px;
}.box-bd ul li img {width: 100%;
}.box-bd ul li h4 {margin: 20px 20px 20px 25px;font-size: 14px;color: #050505;font-weight: 400;
}.box-bd .info {margin: 0 20px 0 25px;font-size: 12px;color: #999;
}.box-bd .info span {color: #ff7c2d;
}.footer {height: 415px;background-color: #fff;
}.footer .w {padding-top: 35px;
}.copyright {float: left;
}.copyright p {font-size: 12px;color: #666;margin: 20px 0 15px 0;
}.copyright .app {width: 118px;height: 33px;border: 1px solid #00a4ff;text-align: center;line-height: 33px;color: #00a4ff;font-size: 16px;
}.links {float: right;
}.links dl {float: left;margin-left: 100px;
}.links dl dt {font-size: 16px;color: #333;margin-bottom: 5px;
}.links dl dd a {color: #333;font-size: 12px;
}
相关文章：
【前端基础】Day 5 CSS浮动
目录 1. 浮动 1.1 标准流（普通流/文档流） 1.2 浮动 1.2.1 浮动的特性 1.2.2 浮动元素常和标准流父级搭配使用 1.2.3 案例 2. 常见网页布局 2.1 常见网页布局 2.2 浮动布局注意点 3. 清除浮动 3.1 原因 3.2 清除浮动的本质 3.3 清除浮动的方…...
处理DeepSeek返回的markdown文本
处理DeepSeek返回的markdown文本 markdown预览组件，支持公式显示，支持uniapp。 相关依赖 markdown-itmarkdown-it-mathjaxmarkdown-it-katexmarkdown-it-latexkatexgithub-markdown-css 组件源码 <!--* Description: markdown显示组件* Author: wa…...
互联网+房产中介+装修设计+物料市场+智能家居一体化平台需求书
一、项目概述 1.1 项目背景 随着互联网技术的飞速发展以及人们生活品质的显著提升，传统房产交易、装修设计、家居购物等领域暴露出诸多问题。信息不对称使得用户难以获取全面准确的信息，在房产交易中可能高价买入或低价卖出，装修时可能遭遇…...
Node.js定义以及性能优化
Node.js Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，广泛用于构建高性能的网络应用。以下是一些常见的 Node.js 面试题及其解答，帮助你准备面试： 1. 什么是 Node.js？ Node.js 是一个基于 Chrome V8 引擎的 JavaSc…...
浅谈流媒体协议以及视频编解码
流媒体协议介绍 流媒体协议用于传输视频、音频等多媒体数据，确保数据流畅地传输到用户设备。常见的流媒体协议包括 RTMP、HLS、DASH、WebRTC 等，每种协议具有不同的特点和适用场景。 1. RTMP (Real-Time Messaging Protocol) 定义：由 Adob…...
在 Windows 上配置 Ollama 服务并开放局域网访问
为了在局域网内共享 Ollama 服务，我们需要完成以下两步： 1、设置 Ollama 的环境变量 OLLAMA_HOST，使其监听局域网的 IP 地址。 （1） 配置 Ollama 服务的监听地址 Ollama 服务使用环境变量 OLLAMA_HOST 来指定监听的地…...
【六祎 - Note】消息队列的演变，架构图；备忘录； IBM MQ,RabbitMQ,Kafka,Pulsar
IBM MQ 于 1993 年推出。它最初称为 MQSeries，2002 年更名为 WebSphere MQ。2014 年更名为 IBM MQ。IBM MQ 是一款非常成功的产品，广泛应用于金融领域。其收入在 2020 年仍达到 10 亿美元。 RabbitMQ 架构与 IBM MQ 不同，更类似于 Kafka 的…...
常见AI写作工具介绍（ChatGPT 4o、DeepClaude、Claude 3.5 Sonnet 、DeepSeek R1等）
AI写作工具介绍 1. ChatGPT-4o ChatGPT-4o是OpenAI于2024年5月发布的最新旗舰模型，相比之前的版本，它在多模态支持和实时推理能力上有了显著提升。它能够处理和理解音频、图像和文本数据，适用于复杂的图像分析、语音识别等应用场景[1]。 2…...
WPF中对滚动条进行平滑滚动
有时候我们在动态添加内容时，需要将滚动条滚动到指定内容处。 一般我们会调用ScrollViewer的ScrollToVerticalOffset（垂直方向）函数和ScrollToHorizontalOffset（水平方向）函数来控制滚动条滚动到指定位置。 正常滚动效…...
深入xtquant：Python量化交易的桥梁与核心
深入xtquant：Python量化交易的桥梁与核心 🚀量化软件开通 🚀量化实战教程 在当今的金融市场中，量化交易已成为一种趋势。为了高效地进行策略开发和执行，选择合适的工具至关重要。xtquant，作为迅投官方开…...
Flutter 学习之旅 之 flutter 在 Android 端进行简单的打开前后相机预览 / 拍照保存
Flutter 学习之旅 之 flutter 在 Android 端进行简单的打开前后相机预览 / 拍照保存 目录 Flutter 学习之旅 之 flutter 在 Android 端进行简单的打开前后相机预览 / 拍照保存 一、简单介绍 二、简单介绍 camera 三、安装 camera 四、简单案例实现 五、关键代码 一、简单…...
网络变压器的主要电性参数与测试方法（2）
Hqst盈盛（华强盛）电子导读：网络变压器的主要电性参数与测试方法（2）.. 今天我们继续来看看网络变压器的2个主要电性参数与它的测试方法： 1. 线圈间分布电容Cp:线圈间杂散静电容 测试条件:100KHz/0.1…...
SpringSecurity基于JWT实现Token的处理
前面介绍了手写单点登录和JWT的应用，本文结合SpringSecurity来介绍下在SpringBoot项目中基于SpringSecurity作为认证授权框架的情况下如何整合JWT来实现Token的处理。 一、认证思路分析 SpringSecurity主要是通过过滤器来实现功能的！我们要找到SpringSecurity实现认证和校验…...
TCP的三次握手与四次挥手：建立与终止连接的关键步骤
引言 TCP（传输控制协议）工作在OSI模型的传输层。OSI模型将计算机网络功能划分为七个层级，从底层到顶层依次是：物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。传输层负责在网络节点之间提供可靠的端到端通信&a…...
某住宅小区地下车库安科瑞的新能源汽车充电桩的配电设计与应用方案
摘要： 文中以某住宅小区建设工程为例,重点研究了住宅小区地下车库新能源汽车充电桩配电设计,从位置设置、安装方式选择、配电箱设置、配电箱回路设置、供配电系统设计等方面展开分析,提出了民用建筑充电桩设计的科学建议,为新能源充电桩的推广应用提供参考。 关键…...
登录次数限制
文章目录 一、应用场景与设计目的1. 应用场景2. 设计目的 二、功能设计1. 登录限制规则2. 解锁机制3. 适用维度 三、技术实现1. 数据存储2. 逻辑流程3. 实现代码示例4. 动态锁定时间 四、安全增强与扩展1. 防止用户名枚举2. 加入验证码3. 监控与报警4. 分布式支持 五、设计思考…...
java jar包内的jar包如何打补丁
问题描述： 主包：hisca.jar，解压后 BOOT-INFO/lib下有其他jar包 因为一个小bug，需要修改这个hisca包下BOOT-INF/lib下的子jar包service-hisca-impl-1.0.0.jar中的一个service类及xml文件 操作步骤： 1、主包jar -xvf …...
面试(进阶) —虚拟列表在什么场景使用，如何实现？
面试(进阶) —虚拟列表在什么场景使用，如何实现？ 在前端开发中，当需要渲染大量数据时，传统的渲染方式往往会遇到性能瓶颈。一次性将大量数据渲染到DOM中，不仅会导致页面加载缓慢，还可能占用大量内存&#x…...
深入了解 NAT 模式：网络地址转换的奥秘
深入了解 NAT 模式：网络地址转换的奥秘 在计算机网络的世界里，NAT 模式（Network Address Translation，网络地址转换）扮演着至关重要的角色。它就像是网络中的翻译官，在不同网络地址之间进行转换࿰…...
Android Studio 新版本Gradle发布本地Maven仓库示例
发布代码到JitPack示例：https://blog.csdn.net/loutengyuan/article/details/145938967 以下是基于 Android Studio 24.2.2（Gradle 8.10.2 AGP 8.8.0 JDK17） 的本地 Maven 仓库发布示例，包含aar和jar的不同配置： 1.…...
synchronized 学习
学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...
Appium+python自动化（十六）- ADB命令
简介 Android 调试桥(adb)是多种用途的工具，该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具，其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利，如安装和调试…...
Cesium1.95中高性能加载1500个点
一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！
5月28日，中天合创屋面分布式光伏发电项目顺利并网发电，该项目位于内蒙古自治区鄂尔多斯市乌审旗，项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站，总装机容量为9.96MWp。 项目投运后，每年可节约标煤3670…...
Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的，比GNOME简单得多！ 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
unix/linux，sudo，其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...
成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战
在现代战争中，电磁频谱已成为继陆、海、空、天之后的 “第五维战场”，雷达作为电磁频谱领域的关键装备，其干扰与抗干扰能力的较量，直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器，凭借数字射…...
Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中，提示一个依赖外部头文件的cpp源文件需要同步，点…...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”（简单设计）是软件开发中的一个重要理念，倡导以最简单的方式实现软件功能，以确保代码清晰易懂、易维护，并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计，遵循“让事情保…...