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

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

news 2025/8/23 13:36:55

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

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…...

编程新知 2025/8/23 9:15:42

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/8/4 2:45:15

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2025/8/21 19:34:21

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2025/8/21 16:44:19

跨链模式：多链互操作架构与性能扩展方案

跨链模式：多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石一、跨链架构的核心范式演进 1. 分层协议栈：模块化解耦设计现代跨链系统采用分层协议栈实现灵活扩展（H2Cross架构）： 适配层&#xf…...

编程新知 2025/8/17 22:45:28

Android第十三次面试总结（四大组件基础）

Activity生命周期和四大启动模式详解一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成，用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机： onCreate() 调用时机：Activity 首次创建时调用。…...

编程新知 2025/8/13 23:52:16

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法：使用 MyBatis 的 <foreach> 标签和批处理模式（ExecutorType.BATCH）。方法一：使用 XML 的 <foreach> 标签&#xff…...

编程新知 2025/6/11 2:44:05

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/7/6 7:40:12