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

浮动模块布局

基本思路
若宽度和浏览器一样宽,则不需要设置width

一般父盒子使用标准流,然后标准流内使用浮动

一般父盒子需要居中显示,使用 margin: 0 auto;

注意浮动盒子之间的margin值 与 父盒子width、height值之间的相等关系,一定要计算好!
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动布局</title><style>* {margin: 0;padding: 0;}.top {/* width和浏览器默认的一致,不用设置 */height: 50px;margin-top: 20px;background-color: pink;}.banner {height: 120px;width: 1010px;   /*设置快读*/margin: 10px auto;  /*居中*/background-color: green;}.box {height: 300px;width: 1010px;margin: 10px auto;background-color: lightblue;}.box>.box1 {float: left;margin: 10px;}.box>div {float: left;background-color: pink;margin: 10px;margin-left: 0;height: 280px;width: 240px;}.footer {height: 300px;background-color: aquamarine;}</style>
</head>
<body><div class="top">top</div><div class="banner">banner</div><div class="box"><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div><div class="box4">box4</div></div><div class="footer">footer</div>
</body>
</html>

相关文章:

浮动模块布局

基本思路 若宽度和浏览器一样宽&#xff0c;则不需要设置width 一般父盒子使用标准流&#xff0c;然后标准流内使用浮动 一般父盒子需要居中显示&#xff0c;使用 margin: 0 auto; 注意浮动盒子之间的margin值 与 父盒子width、height值之间的相等关系&#xff0c;一定要计算…...

信号、进程、线程、I/O介绍

文章目录 信号进程进程通信线程可/不可重入函数线程同步互斥锁条件变量自旋锁读写锁 I/O操作阻塞/非阻塞I/OI/O多路复用存储映射I/O 信号 信号是事件发生时对进程的通知机制&#xff0c;可以看做软件中断。信号与硬件中断的相似之处在于其能够打断程序当前执行的正常流程。大多…...

【css3】涟漪动画

效果展示 dom代码 <div class"mapSelfTitle66"><div></div> </div> 样式代码 .mapSelfTitle66{width:120px;height:60px;position: relative;&>div{width:100%;height:100%;background: url("~/assets/images/video_show/err…...

基础课17——智能客服系统

客户服务是一种以客户为中心的服务模式&#xff0c;旨在提高客户满意度和忠诚度&#xff0c;促进企业业务增长和可持续发展。在客户服务中&#xff0c;企业需要了解客户需求&#xff0c;提供优质、高效、个性化的服务&#xff0c;解决客户问题&#xff0c;满足客户需求&#xf…...

vue3 ts 导出PDF jsPDF

jsPDF 是一个基于 HTML5 的客户端解决方案&#xff0c;用于生成各种用途的 PDF 文档。 1、安装&#xff1a;npm install jspdf npm install --save html2canvas 2、引入&#xff1a;import jsPDF from "jspdf" import html2canvas from html2canvas 3、使用 <…...

Agent 应用于提示工程

如果Agent模仿了人类在现实世界中的操作方式&#xff0c;那么&#xff0c;能否应用于提示工程即Prompt Engingeering 呢&#xff1f; 从LLM到Prompt Engineering 大型语言模型(LLM)是一种基于Transformer的模型&#xff0c;已经在一个巨大的语料库或文本数据集上进行了训练&…...

云原生安全日志审计

记得添加&#xff0c;把配置文件挂载进去 - mountPath: /etc/kubernetes/auditname: audit-policyreadOnly: true.....- hostPath:path: /etc/kubernetes/audit/type: DirectoryOrCreatename: audit-policy/etc/kubernetes/manifests/kube-apiserver.yaml 具体配置文件如下 a…...

2023 辽宁省大学数学建模 B 题 数据驱动的水下导航适配区分类预测

“海洋强国”战略部署已成为推动中国现代化建设的重要组成部分&#xff0c;国家对 此提出“发展海洋经济&#xff0c;保护海洋生态环境&#xff0c;加快建设海洋强国”的明确要求。 《辽宁省“十四五”海洋经济发展规划》明确未来全省海洋经济的发展战略、 发展目标、重大任…...

ES 8.x新特性一览(完整版)

一、看点 在 2022 年 2 月 11 日&#xff0c;Elasticsearch&#xff08;ES&#xff09;正式发布了 8.0 版本&#xff0c;而截止到 2023 年 10 月&#xff0c;历经一年半时间&#xff0c;ES官方已经连续发布了多个版本&#xff0c;最新版本为 8.10.4。这一系列的更新引入了众多引…...

生产实战shell,给安全部门提供日志

生产实战shell,给安全部门提供日志 #!/bin/bashbackup_dir"/data/rw_copy" log_dir"/data/weblogic_log/test/yingyong" nginx_log_dir"/data/nginx_log" apache_log_dir"/data/apache_log" weblogic_log_dir"/data/weblogic_lo…...

HarmonyOS数据管理与应用数据持久化(一)

一. 数据管理概述 功能介绍 数据管理为开发者提供数据存储、数据管理能力&#xff0c;比如联系人应用数据可以保存到数据库中&#xff0c;提供数据库的安全、可靠等管理机制。 数据存储&#xff1a;提供通用数据持久化能力&#xff0c;根据数据特点&#xff0c;分为用户首选项、…...

小型气象站在智慧农业高标准农田建设中的作用

了解“小型气象站在智慧农业高标准农田建设中的作用”&#xff0c;我们需要了解什么是小型气象站&#xff1f;什么是高标准农田&#xff1f; 所谓小型气象站是一种气象观测设备&#xff0c;根据应用领域不同可分为农业气象站&#xff0c;校园气象站&#xff0c;森林气象站&…...

kruskal求最小生成树

算法思路&#xff1a; 将所有边按照权值的大小进行升序排序&#xff0c;然后从小到大一一判断。 如果这个边与之前选择的所有边不会组成回路&#xff0c;就选择这条边分&#xff1b;反之&#xff0c;舍去。 直到具有 n 个顶点的连通网筛选出来 n-1 条边为止。 筛选出来的边…...

876. 链表的中间结点

876. 链表的中间结点 算法 快慢指针 & 题目特征 需要对链表中的节点进行遍历&#xff0c;并且需要根据节点之间的相对位置或者距离进行操作 题目链接&#xff1a;https://leetcode.cn/problems/middle-of-the-linked-list/ 算法 快慢指针 & 题目特征 需要对链表中…...

【机器学习】二、决策树

目录 一、决策树定义&#xff1a; 二、决策树特征选择 2.1 特征选择问题 2.2 信息增益 2.2.1 熵 2.2.2 信息增益 三、决策树的生成 3.1 ID3算法 3.1.1理论推导 3.1.2代码实现 3.2 C4.5 算法 3.2.1理论推导 ​ 3.2.2代码实现 四、决策树的剪枝 4.1 原理 4.2 算法思路&#xff1a…...

低代码PAAS加速推进企业数字化转型

无论是“十四五”规划从国家层面提出的“加快数字化发展 建设数字中国”&#xff0c;还是后疫情时代企业自身的感受&#xff0c;数字化转型已成为必答题。当前 企业 业务场景化、线上趋势愈加明显&#xff0c;越来越多并发的数字化应用场景&#xff0c;而原有集中式架构扩展能力…...

时间复杂度为 O(nlogn) 的排序算法

归并排序 归并排序遵循 分治 的思想&#xff1a;将原问题分解为几个规模较小但类似于原问题的子问题&#xff0c;递归地求解这些子问题&#xff0c;然后合并这些子问题的解来建立原问题的解&#xff0c;归并排序的步骤如下&#xff1a; 划分&#xff1a;分解待排序的 n 个元素…...

掌控你的Mac性能:System Dashboard Pro,一款专业的系统监视器

作为Mac用户&#xff0c;你是否曾经想要更好地了解你的电脑性能&#xff0c;以便优化其运行&#xff1f;是否想要实时监控系统状态&#xff0c;以便及时发现并解决问题&#xff1f;如果你有这样的需求&#xff0c;那么System Dashboard Pro就是你的不二之选。 System Dashboar…...

C++ Qt如何往Windows AppData目录写数据

在使用Qt开发客户端软件时,我们可以把程序相关信息保存到AppData目录, 下次启动时读取,就可以保存程序的状态,便于用户使用。 Windows AppData目录是Windows操作系统中的一个重要目录,主要用于存储应用程序的自定义设置、文件和数据。这个目录包含了许多与应用程序相关的配…...

xargs命令

xargs命令 xargs 命令是一个非常好用的 Linux 命令&#xff0c;它可以将管道或标准输入转换成命令行参数&#xff0c;并用这些参数来执行指定 的命令。默认情况下&#xff0c; xargs 命令会将输入按照空格、制表符、换行符等符号进行分隔&#xff0c;并将它们作为一组参数 传…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

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

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

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

(一)单例模式

一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

智能职业发展系统:AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...