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

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

news 2025/11/5 9:55:44

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

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。相对于RMAN恢复需要很长时间， 数据库闪回只需要几分钟。 2.技术实现数据库设置 2个db_recovery参数创建guarantee闪回点，不需要开启数据库闪回。…...

编程新知 2025/7/30 7:20:17

遍历 Map 类型集合的方法汇总

1 方法一先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/11/1 22:49:39

iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享

平时用 iPhone 的时候，难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵，或者买了二手 iPhone 却被原来的 iCloud 账号锁住，这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

编程新知 2025/11/2 22:10:34

SpringCloudGateway 自定义局部过滤器

场景： 将所有请求转化为同一路径请求（方便穿网配置）在请求头内标识原来路径，然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2025/10/30 22:13:49

如何理解 IP 数据报中的 TTL？

目录前言理解前言面试灵魂一问：说说对 IP 数据报中 TTL 的理解？我们都知道，IP 数据报由首部和数据两部分组成，首部又分为两部分：固定部分和可变部分，共占 20 字节，而即将讨论的 TTL 就位于首…...

编程新知 2025/11/2 8:55:38

论文笔记——相干体技术在裂缝预测中的应用研究

目录相关地震知识补充地震数据的认识地震几何属性相干体算法定义基本原理第一代相干体技术：基于互相关的相干体技术（Correlation）第二代相干体技术：基于相似的相干体技术（Semblance）基于多道相似的相干体…...

编程新知 2025/10/26 1:27:31

在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）

考察一般的三次多项式，以r为参数： p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]； 此多项式的根为： 尽管看起来这个多项式是特殊的，其实一般的三次多项式都是可以通过线性变换化为这个形式…...

编程新知 2025/10/28 10:00:33

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

编程新知 2025/10/28 21:05:15