【前端基础】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.…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
深入剖析AI大模型：大模型时代的 Prompt 工程全解析
今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...
为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？
在建筑行业，项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升，传统的管理模式已经难以满足现代工程的需求。过去，许多企业依赖手工记录、口头沟通和分散的信息管理，导致效率低下、成本失控、风险频发。例如&#…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块，它提供了一个轻量级的 HTTP 服务器实现，主要用于构建基于 HTTP 的应用程序和服务。 功能介绍： 主要功能 HTTP服务器功能： 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
Python爬虫（一）：爬虫伪装
一、网站防爬机制概述 在当今互联网环境中，具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类： 身份验证机制：直接将未经授权的爬虫阻挡在外反爬技术体系：通过各种技术手段增加爬虫获取数据的难度…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试，通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小，增大可提高计算复杂度duration: 测试持续时间（秒&…...
数据库分批入库
今天在工作中，遇到一个问题，就是分批查询的时候，由于批次过大导致出现了一些问题，一下是问题描述和解决方案： 示例： // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
招商蛇口 | 执笔CID，启幕低密生活新境
作为中国城市生长的力量，招商蛇口以“美好生活承载者”为使命，深耕全球111座城市，以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子，招商蛇口始终与城市发展同频共振，以建筑诠释对土地与生活的…...