【前端基础】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.…...
UE5 学习系列（二）用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇，在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下： 【Note】：如果你已经完成安装等操作，可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作，重…...
vscode里如何用git
打开vs终端执行如下： 1 初始化 Git 仓库（如果尚未初始化） git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架，专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用，其中包含三个使用通用基本模板的页面。在此…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下，江苏艾立泰以一场跨国资源接力的创新实践，重新定义了绿色供应链的边界。 跨国回收网络：废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点，将海外废弃包装箱通过标准…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）
笔记整理：刘治强，浙江大学硕士生，研究方向为知识图谱表示学习，大语言模型 论文链接：http://arxiv.org/abs/2407.16127 发表会议：ISWC 2024 1. 动机 传统的知识图谱补全（KGC）模型通过…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API，查询的是单条数据，比如根据主键ID查询用户信息，sql如下： select id, name, age from user where id #{id}API默认返回的数据格式是多条的，如下： {&qu…...
css3笔记 （1） 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案
JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停 1. 安全点（Safepoint）阻塞 现象：JVM暂停但无GC日志，日志显示No GCs detected。原因：JVM等待所有线程进入安全点（如…...
2025季度云服务器排行榜
在全球云服务器市场，各厂商的排名和地位并非一成不变，而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势，对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析： 一、全球“三巨头”…...