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

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

news 2025/7/8 23:32:29

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

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目：3442. 奇偶频次间的最大差值 I 思路 ：哈希，时间复杂度0(n)。用哈希表来记录每个字符串中字符的分布情况，哈希表这里用数组即可实现。 C版本： class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2025/7/7 5:08:22

铭豹扩展坞 USB转网口突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因：背景：一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/7/8 23:06:54

day52 ResNet18 CBAM

在深度学习的旅程中，我们不断探索如何提升模型的性能。今天，我将分享我在 ResNet18 模型中插入 CBAM（Convolutional Block Attention Module）模块，并采用分阶段微调策略的实践过程。通过这个过程，我不仅提升…...

编程新知 2025/7/8 4:49:20

苍穹外卖--缓存菜品

1.问题说明用户端小程序展示的菜品数据都是通过查询数据库获得，如果用户端访问量比较大，数据库访问压力随之增大 2.实现思路通过Redis来缓存菜品数据，减少数据库查询操作。缓存逻辑分析： ①每个分类下的菜品保持一份缓存数据…...

编程新知 2025/7/8 6:05:27

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言：为什么 Eureka 依然是存量系统的核心？ 尽管 Nacos 等新注册中心崛起，但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制，是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2025/7/8 17:02:18

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...

编程新知 2025/6/21 17:17:46

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码我们将以 fmt 这个流行的格式化库为例，演示如何：使用 FetchContent 从 GitH…...

编程新知 2025/7/8 19:51:41