【前端基础】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.…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
7.4.分块查找
一.分块查找的算法思想： 1.实例： 以上述图片的顺序表为例， 该顺序表的数据元素从整体来看是乱序的，但如果把这些数据元素分成一块一块的小区间， 第一个区间[0,1]索引上的数据元素都是小于等于10的， 第二…...
练习（含atoi的模拟实现,自定义类型等练习）
一、结构体大小的计算及位段 （结构体大小计算及位段 详解请看：自定义类型：结构体进阶-CSDN博客） 1.在32位系统环境，编译选项为4字节对齐，那么sizeof(A)和sizeof(B)是多少？ #pragma pack(4)st…...
centos 7 部署awstats 网站访问检测
一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats࿰…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log，共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题，不能使用ELK只能使用…...
【单片机期末】单片机系统设计
主要内容：系统状态机，系统时基，系统需求分析，系统构建，系统状态流图 一、题目要求 二、绘制系统状态流图 题目：根据上述描述绘制系统状态流图，注明状态转移条件及方向。 三、利用定时器产生时…...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版！！！6.8截至答题，大家注意呀！ 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:（ B ） A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...
高防服务器能够抵御哪些网络攻击呢？
高防服务器作为一种有着高度防御能力的服务器，可以帮助网站应对分布式拒绝服务攻击，有效识别和清理一些恶意的网络流量，为用户提供安全且稳定的网络环境，那么，高防服务器一般都可以抵御哪些网络攻击呢？下面…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系，以下是深入解析： 门铃FIFO溢出的本质 在RapidIO系统中，门铃消息FIFO是硬件控制器内部的缓冲区，用于临时存储接收到的门铃消息（Doorbell Message）。…...
深入理解Optional：处理空指针异常
1. 使用Optional处理可能为空的集合 在Java开发中，集合判空是一个常见但容易出错的场景。传统方式虽然可行，但存在一些潜在问题： // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...