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

css 简单网页布局——浮动（一）

news 2026/4/2 4:41:06

1. 三种布局方式

1.1 标准流

1.2 浮动的使用

1.3 简述浮动

1.3.1 浮动三大特性

 <style>.out {border: 1px red solid;width: 1000px;height: 500px;}.one {background-color: aquamarine;width: 200px;height: 100px;}.two {background-color: blueviolet;width: 200px;height: 100px;}.add {width: 300px;height: 200px;background-color: blue;}</style>
</head>
<body><div class="out"><div class="one">1111</div><div class="two">2222</div><div class="add">AAAAA</div></div>
</body>

1.3.2 浮动的常规使用

1.4 浮动案例

案例 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>* {padding: 0;margin: 0;}.out {border: 1px red solid;width: 1000px;height: 500px;margin: 10px auto;background-color: bisque;}.left {background-color: aquamarine;width: 300px;height: 500px;float: left;}.right {background-color: blueviolet;width: 700px;height: 500px;float: right;}</style>
</head>
<body><div class="out"><div class="left"></div><div class="right"></div></div>
</body>
</html>

案例 2 ：

<!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;}.out {width: 880px;height: 170px;margin: 10px auto;background-color: aquamarine;}.one,.two,.three,.four {height: 150px;width: 200px;margin: 10px ;}.one {background-color: burlywood;float: left;}.two {background-color: cadetblue;float: left;}.three {background-color: chocolate;float: left;}.four {background-color: darkorange;float: left;}</style>
</head>
<body><div class="out"><div class="one">甲</div><div class="two">乙</div><div class="three">丙</div><div class="four">丁</div></div>
</body>
</html>

第二种方式：

<!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;}div {border: 1px red solid;width: 850px;height: 300px;margin: 10px auto;}.test {list-style: none;}/* 必须对 li 设置宽高，背景颜色等 */.test li {float: left;width: 150px;height: 200px;background-color: bisque;margin: 10px;}</style>
</head>
<body><div><ul class="test"><li>111</li><li>222</li><li>333</li><li>444</li><li>555</li></ul></div>
</body>
</html>

案例 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;}.out {width: 1200px;height: 600px;margin: 10px auto;background-color: aquamarine;}.left {width: 350px;height: 600px;background-color: bisque;float: left;}.right {width: 850px;height: 00px;background-color: blueviolet;float: right;}.right ul {list-style: none;}.right ul li {float: left;width: 190px;height: 280px;background-color: brown;margin: 10px;}</style>
</head>
<body><div class="out"><div class="left"></div><div class="right"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div>
</body>
</html>

案例 4 ：

<!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: 100px;background-color: aquamarine;}.banner {margin: 10px auto;height: 100px;width: 1000px;background-color: bisque;}.up {width: 1000px;margin: 10px auto;background-color: burlywood;}.up ul {list-style: none;}.up ul li {width: 230px;height: 100px;float: left;margin: 10px 10px;background-color: blueviolet;}.down {width: 1000px;margin: 10px auto;background-color: burlywood;}.down ul {list-style: none;}.down ul li {width: 230px;height: 300px;float: left;margin: 10px 10px;background-color:burlywood;}.footer {height: 300px;background-color:cornflowerblue;margin-top: 460px;}</style>
</head>
<body><div class="top"></div><div class="banner"></div><div class="up"><ul><li></li><li></li><li></li><li></li></ul></div><div class="down"><ul><li></li><li></li><li></li><li></li></ul></div><div class="footer"></div>
</body>
</html>

1.5 案例总结

<!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>* {padding: 0;margin: 0;}div {width: 200px;height: 200px;margin-top: 10px;margin-left: 10px;}.one {background-color: aquamarine;}.two {background-color: bisque;}.three {background-color: blueviolet;}</style>
</head>
<body><div class="one">111</div><div class="two">222</div><div class="three">333</div>
</body>
</html>

css 简单网页布局——浮动（一）

1. 三种布局方式 1.1 标准流 1.2 浮动的使用 1.3 简述浮动 1.3.1 浮动三大特性 <style>.out {border: 1px red solid;width: 1000px;height: 500px;}.one {background-color: aquamarine;width: 200px;height: 100px;}.two {background-color: blueviolet;width: 200px;h…...

编程日记 2024/10/6 16:37:38

设计模式（3）builder

需求： 对于复杂的对象，我们只需要通过设置一些参数，就可以得到相对应的实例。简单来说， 需求就是用一个类通过方法返回一个新建的对象，而且可以通过方法去设置这个对象 public interface CarBuilder {void se…...

编程日记 2024/10/6 16:36:38

Day01-MySQL数据库介绍及部署

Day01-MySQL数据库介绍及部署 1、数据库服务概述介绍1.1 企业中为什么需要数据库？1.2 数据库服务作用1.3 数据库服务分类 2、数据库服务安装部署2.1 数据库版本应用2.2 数据库服务程序下载2.3 数据库软件安装方式2.3.1 二进制安装步骤 3、数据库服务初始化介绍3.1 安…...

编程日记 2024/10/6 16:35:37

分享一个餐饮连锁店点餐系统餐馆食材采购系统Java、python、php三个版本（源码、调试、LW、开题、PPT)

💕💕作者：计算机源码社 💕💕个人简介：本人八年开发经验，擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等，大家有这一块的问题可以一起交流&…...

编程日记 2024/10/6 16:34:35

解决跨域问题

第一种让后端解决第二种通过代理来解决首先可以先搭建后端接口解决则参照vue-cli官网首先新建一个vue.config.js文件然后在项目的根目录新建两个文件夹开发环境和生产环境然后可以使用环境变量系统会自动识别你是生产环境还是开发环境然后在封装的axios中配…...

编程日记 2024/10/6 16:32:34

面试知识储备-多线程

1.线程的概念线程使得在一个程序中可以同时执行多个任务。在 Java 应用程序中，多个线程可以同时运行，例如一个线程可以处理用户输入，另一个线程可以进行后台数据处理。 2.创建线程的方式 （1）重写thread类中的run方法…...

编程日记 2024/10/6 16:31:33

边缘计算插上AI的翅膀会咋样？

人工智能（Artificial Intelligence,AI）是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学，是新一轮产业革命的重要驱动力量。2022年底发布的ChatGPT将人工智能技术上升到了一个新的高度。如今&#x…...

编程日记 2024/10/6 16:22:16

脉冲神经网络（SNN）论文阅读（六）-----ECCV-2024 脉冲驱动的SNN目标检测框架：SpikeYOLO

原文链接：CSDN-脉冲神经网络（SNN）论文阅读（六）-----ECCV-2024 脉冲驱动的SNN目标检测框架：SpikeYOLO Integer-Valued Training and Spike-Driven Inference Spiking Neural Network for High-performance …...

编程日记 2024/10/6 16:21:15

周报_2024/10/6

周报时间 2024/9/30——2024/10/6 科研进展写项目标书实验了不同比例的标签加噪，模型效果随着标签加噪比例增加下降明显下周计划构造概念漂移数据集借鉴其他文章中应对标签加噪的做法...

编程日记 2024/10/6 16:20:14

[深度学习][python]yolov11+bytetrack+pyqt5实现目标追踪

【算法介绍】 YOLOv11、ByteTrack和PyQt5的组合为实现高效目标追踪提供了一个强大的解决方案。 YOLOv11是YOLO系列的最新版本，它在保持高检测速度的同时，通过改进网络结构、优化损失函数等方式，提高了检测精度，能够同时处理多个…...

编程日记 2024/10/6 16:17:10

如何使用ssm实现基于Web的穿戴搭配系统的设计与实现+vue

TOC ssm784基于Web的穿戴搭配系统的设计与实现vue 第1章绪论 1.1 研究背景互联网概念的产生到如今的蓬勃发展，用了短短的几十年时间就风靡全球，使得全球各个行业都进行了互联网的改造升级，标志着互联网浪潮的来临。在这个新的时代&…...

编程日记 2024/10/6 16:16:08

JavaScript的设计模式

JavaScript设计模式是指在面向对象编程中，通过对类和对象进行抽象和泛化，提取出一些通用的设计思路和解决方案，以解决常见的软件设计问题。这些设计模式可以分为以下几类进行详细介绍： 一、创建型模式 1. 工厂模式（F…...

编程日记 2024/10/6 16:15:07

CIKM 2024 | 时空数据(Spatial-temporal)论文总结

CIKM 2024于10月21号-10月25号在美国爱达荷州博伊西举行（Boise, Idaho, USA） 本文总结了CIKM 2024有关时空数据（spatial-temporal data）的相关论文，主要包含交通预测，插补，事故预测&#xff0c…...

编程日记 2024/10/6 16:14:06

计算机毕业设计网上体育商城系统的设计与实现 Java实战项目附源码+文档+视频讲解

博主介绍：✌从事软件开发10年之余，专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…...

编程日记 2024/10/6 16:13:04

【数据结构】什么是哈希表(散列表)?

🦄个人主页:修修修也 🎏所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 目录 📌哈希表的概念 📌哈希函数的构造方法 🎏直接定址法 🎏除留余数法 🎏平方取中法 🎏折叠法 &#x…...

编程日记 2024/10/6 16:11:03

【优选算法】（第二十三篇）

目录快速选择算法（medium） 题目解析讲解算法原理编写代码最⼩的k个数（medium） 题目解析讲解算法原理编写代码快速选择算法（medium） 题目解析 1.题目链接：. - 力扣（L…...

编程日记 2024/10/6 16:10:01

Java.数据结构.HashSet

目录 1 基本概念 2 数据结构 3 常用操作 3.1 add(E e)：向HashSet中添加元素 3.2 remove(Object o)：从HashSet中移除元素 3.3 contains(Object o)：判断HashSet中是否包含指定元素 3.4 size()：返回HashSet中元素的个数 3.5 …...

编程日记 2024/10/6 16:05:56

关于懒惰学习与渴求学习的一份介绍

在这篇文章中，我将介绍些懒惰学习与渴求学习的算法例子，会介绍其概念、优缺点以及其python的运用。一、渴求学习 1.1概念渴求学习（Eager Learning）是指在训练阶段构建出复杂的模型，然后在预测阶段运用这个构建出的…...

编程日记 2024/10/6 16:04:55

sed 环境配置

参考项目来自这里： https://github.com/DCASE-REPO/DESED_task/tree/master/recipes/dcase2023_task4_baseline 1. 更新自己的 conda 避免一些包在旧的conda 环境中不存在； conda update conda使用conda 指定安装对应版本 # CUDA 11.7 conda instal…...

编程日记 2024/10/6 16:03:54

黑神话：仙童，数据库自动反射魔法棒

黑神话：仙童，数据库自动反射魔法棒 Golang 通用代码生成器仙童发布了最新版本电音仙女尝鲜版十一及其介绍视频，视频请见：https://www.bilibili.com/video/BV1ET4wecEBk/ 此视频介绍了使用最新版的仙童代码生成器，将 …...

编程日记 2024/10/6 16:02:53

GameFramework——FileSystem篇

目录一、快速入门 1.1 什么是文件系统模块？ 1.2 基本使用步骤 1.2.1 创建文件系统 1.2.2 写入文件 1.2.3 读取文件 1.2.4 删除文件 1.2.5 加载已有文件系统二、文件布局 2.1 HeaderData（文件头） 2.2 BlockData（块数据…...

编程新知 2026/4/2 4:15:13

AI模型评估指标：InstantID在各项基准测试中的表现

AI模型评估指标：InstantID在各项基准测试中的表现【免费下载链接】InstantID 项目地址: https://ai.gitcode.com/hf_mirrors/InstantX/InstantID InstantID作为一款领先的AI模型，在多项基准测试中展现出卓越性能。本文将深入解析其在各项评估指…...

编程新知 2026/4/2 3:54:59

阿博图书馆管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】

💡实话实说：用最专业的技术、最实惠的价格、最真诚的态度服务大家。无论最终合作与否，咱们都是朋友，能帮的地方我绝不含糊。买卖不成仁义在，这就是我的做人原则。摘要在信息化时代背景下，图书馆作为知识传…...

编程新知 2026/4/2 3:23:31

Python胶水代码变高性能引擎（Mojo原生编译实战手记）

第一章：Python胶水代码变高性能引擎（Mojo原生编译实战手记）Python 以其简洁语法和丰富生态成为数据科学与系统集成的“胶水语言”，但其解释执行机制常在数值计算、实时推理等场景遭遇性能瓶颈。Mojo 作为新兴的系统级编程语言&…...

编程新知 2026/4/2 2:51:18

BiliBiliCCSubtitle：3分钟掌握B站字幕下载与格式转换的终极指南

BiliBiliCCSubtitle：3分钟掌握B站字幕下载与格式转换的终极指南【免费下载链接】BiliBiliCCSubtitle 一个用于下载B站(哔哩哔哩)CC字幕及转换的工具; 项目地址: https://gitcode.com/gh_mirrors/bi/BiliBiliCCSubtitle 你是否经常需要从B站视频中提取字幕内…...

编程新知 2026/4/2 2:47:15

MCP3208 12位SPI ADC嵌入式驱动与硬件设计实战

1. MCP3208芯片深度解析：面向嵌入式系统的12位8通道SPI模数转换器工程实践1.1 芯片定位与核心价值MCP3208是Microchip公司推出的逐次逼近型（SAR）模数转换器，专为资源受限的嵌入式系统设计。其核心价值在于以极简硬件接口&#xff…...

编程新知 2026/4/2 1:12:02

掌握PingFangSC字体配置优化：面向全平台开发者的专业指南

掌握PingFangSC字体配置优化：面向全平台开发者的专业指南【免费下载链接】PingFangSC PingFangSC字体包文件、苹果平方字体文件，包含ttf和woff2格式项目地址: https://gitcode.com/gh_mirrors/pi/PingFangSC 比传统方案提升30%效率的跨平台适配…...

编程新知 2026/4/1 23:30:18

BiliTools：B站资源高效管理与下载完全指南

BiliTools：B站资源高效管理与下载完全指南【免费下载链接】BiliTools A cross-platform bilibili toolbox. 跨平台哔哩哔哩工具箱，支持下载视频、番剧等等各类资源项目地址: https://gitcode.com/GitHub_Trending/bilit/BiliTools BiliTools是一…...

编程新知 2026/4/1 23:26:17