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

html/css中用float实现的盒子案例

运行效果:

代码部分:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">.father{width:300px; height:400px; background:gray;}.box1{width:100px; height:100px; background:red;}.box2{width:100px; height:100px; background:blue;float:right;}.box3{width:200px; height:100px; background:green;}	.box4{width:100px; height:200px; background:yellow;float:right;}.f1{width:200; height:100px}.f2{width:200px; height:200px;}.c{margin:0 auto}
</style>
</head>
<body><div class="father c"><div class="box4">44444</div><div class="f2"><div class="f1"><div class="box2">22222</div><div class="box1">11111</div></div><div class="box3">33333</div></div></div>
</body>
</html>

相关文章:

html/css中用float实现的盒子案例

运行效果&#xff1a; 代码部分&#xff1a; <!doctype html> <html> <head> <meta charset"utf-8"> <title>无标题文档</title> <style type"text/css">.father{width:300px; height:400px; background:gray;…...

simulink中 Data store memory、write和read模块及案例介绍

目录 1.Data store memory模块 2.data store write模块 3.data store read模块 4.仿真分析 4.1简单使用三个模块 4.2 模块间的调用顺序剖析 1.Data store memory模块 向右拖拉得到Data store read模块&#xff0c;向左拉得到Data write模块 理解&#xff1a;可视为定义变量…...

java设计模式学习之【装饰器模式】

文章目录 引言装饰器模式简介定义与用途实现方式 使用场景优势与劣势装饰器模式在Spring中的应用画图示例代码地址 引言 在日常生活中&#xff0c;我们常常对基本事物添加额外的装饰以增强其功能或美观。例如&#xff0c;给手机加一个保护壳来提升其防护能力&#xff0c;或者在…...

Ubuntu宝塔面板本地部署Emlog个人博客网站并远程访问【内网穿透】

文章目录 前言1. 网站搭建1.1 Emolog网页下载和安装1.2 网页测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar临时数据隧道2.2.Cpolar稳定隧道&#xff08;云端设置&#xff09;2.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 3. 公网访问测试总结 前言 博客作为使…...

简述IO流的使用以及使用时需要注意的事项

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍介绍IO流的使用以及使用时需要注意的事项以及部分理论知识 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f349;博主收将持续更新学习记录获&#xff0c;友友们有任何问题可…...

西工大计算机学院计算机系统基础实验一(函数编写11~14)

稳住心态不要慌&#xff0c;如果考试周冲突的话&#xff0c;可以直接复制这篇博客和上一篇博客西工大计算机学院计算机系统基础实验一&#xff08;函数编写1~10&#xff09;-CSDN博客最后的代码&#xff0c;然后直接提交&#xff0c;等熬过考试周之后回过头再慢慢做也可以。 第…...

Spring 声明式事务

Spring 声明式事务 1.Spring 事务管理概述1.1 事务管理的重要性1.2 Spring事务管理的两种方式1.2.1 编程式事务管理1.2.2 声明式事务管理 1.3 为什么选择声明式事务管理 2. 声明式事务管理2.1 基本用法2.2 常用属性2.2.1 propagation&#xff08;传播行为&#xff09;2.2.2 iso…...

通达OA inc/package/down.php接口存在未授权访问漏洞

声明 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 一. 产品简介 通达OA&#xff08;Office Anywhere网络智能办公系统&am…...

数据库原理: 笛卡儿积

笛卡儿积&#xff08;Cartesian Product&#xff09;是集合论中的一个概念&#xff0c;也在数据库中的查询操作中经常使用。笛卡儿积是指两个集合&#xff08;或更多集合&#xff09;之间所有可能的组合。如果有两个集合A和B&#xff0c;它们的笛卡儿积记作A B&#xff0c;表示…...

docker安装配置prometheus+node_export+grafana

简介 Prometheus是一套开源的监控预警时间序列数据库的组合&#xff0c;Prometheus本身不具备收集监控数据功能&#xff0c;通过获取不同的export收集的数据&#xff0c;存储到时序数据库中。Grafana是一个跨平台的开源的分析和可视化工具&#xff0c;将采集过来的数据实现可视…...

【JavaScript】JS——Map数据类型

【JavaScript】JS——Map数据类型 什么是Map?特性Map与Object的比较 map的创建map的属性map相关方法map的遍历 什么是Map? 存储键值对的对象。 能够记住键的原始插入顺序任何值&#xff08;对象或原始值&#xff09;都可以作为键或值。 特性 Map中的一个键只能出现一次&am…...

【【FPGA的 MicroBlaze 的 介绍与使用 】】

FPGA的 MicroBlaze 的 介绍与使用 可编程片上系统&#xff08;SOPC&#xff09;的设计 在进行系统设计时&#xff0c;倘若系统非常复杂&#xff0c;采用传统 FPGA 单独用 Verilog/VHDL 语言进行开发的方式&#xff0c;工作量无疑是巨大的&#xff0c;这时调用 MicroBlaze 软核…...

PyQt pdf格式保存

参考文章 pyqt5:利用QFileDialog从本地选择图片\文本文档显示到label、保存图片\label文本到本地&#xff08;附代码&#xff09;_pyqt5中qfiledialog.getopenfileurl-CSDN博客 txt文件的打开与保存 def openTextFile(self): # 选择文本文件上传fd,fp QFileDialog.getOpen…...

微前端介绍

目录 微前端概念 微前端特性 场景演示 微前端方案 iframe 方案 qiankun 方案 micro-app 方案 EMP 方案 无界微前端 方案 无界方案 成本低 速度快 原生隔离 功能强大 总结 前言&#xff1a;微前端已经是一个非常成熟的领域了&#xff0c;但开发者不管采用哪个现…...

工业机器视觉megauging(向光有光)使用说明书(一,轻量级的visionpro)

机器视觉megauging&#xff08;未名之光&#xff0c;向光有光&#xff09;程序软件资源已经发布&#xff0c;欢迎下载尝新 8:11 2023/12/2 首先&#xff0c;既然觉得可以发表了&#xff0c;就发表。 其次&#xff0c;我这个人没写过什么软件使用说明书&#xff0c;既然走到这路…...

Java——面试:String 和 StringBuffer 的区别?

相同点&#xff1a; String 和 StringBuffer&#xff0c;它们可以储存和操作字符串&#xff0c; 即包含多个字符的字符数据。 String 和 StringBuffer 的区别有以下几点&#xff1a; 1.String 类提供了数值不可改变的字符串。而 StringBuffer 类提供的字符串进行修改。 当你知…...

图扑软件受邀出席高交会-全球清洁能源创新博览会

“相聚鹏城深圳&#xff0c;共享能源盛宴” 第二十五届中国国际高新技术成果交易会(简称“高交会”)于 11 月 15-18 日在深圳盛大开幕。高交会由商务部、科学技术部、工业和信息化部、国家发展改革委、农业农村部、国家知识产权局、中国科学院、中国工程院和深圳市人民政府共同…...

vue项目下npm或yarn下安装echarts多个版本

最近在大屏展示的时候&#xff0c;用到了百度的echarts图表库&#xff0c;看完效果图后&#xff0c;又浏览了一下echarts官网案例&#xff0c;大同小异。但是搬砖过程中发现实际效果和demo相差甚远&#xff0c;一番折腾发现&#xff0c;项目中安装的是echarts4.x版本&#xff0…...

在内网开发中使用Nginx代理来访问钉钉新版服务端API

如果你在内网开发中使用Nginx代理来访问钉钉新版服务端API&#xff0c;你可以在Nginx配置文件中进行相应的配置。 以下是一个简单的示例Nginx配置&#xff0c;用于将对指定URL的请求代理到钉钉服务端API&#xff1a; server { listen 80; server_name your_server_domain; l…...

机器学习算法如何进行特征重要性评估

特征重要性评估是机器学习中一种常用的方法&#xff0c;用于确定输入特征对模型预测的贡献程度。以下是几种常见的机器学习算法进行特征重要性评估的方法&#xff1a; 1 决策树算法&#xff08;如随机森林和梯度提升树&#xff09;&#xff1a;决策树算法可以通过计算每个特征…...

[火]图像数据增强 支持目标检测数据集图像增强 标注框信息同步增强 支持以下图像增强方式HSV-Hue 增强HSV-Saturation 增强 HSV-Value 增强图像旋转 (+/

[火]图像数据增强 支持目标检测数据集图像增强 标注框信息同步增强 支持以下图像增强方式 HSV-Hue 增强 HSV-Saturation 增强 HSV-Value 增强 图像旋转 (/- degrees) 图像平移 (/- 分数) 图像缩放 (/- 增益) 图像错切 (/- 分数) 图像透视 (/- 分数), 范围&#xff1a;0-0.00…...

Subtitle Edit:实现专业级字幕制作的7大创新方法指南

Subtitle Edit&#xff1a;实现专业级字幕制作的7大创新方法指南 【免费下载链接】subtitleedit the subtitle editor :) 项目地址: https://gitcode.com/gh_mirrors/su/subtitleedit 在视频内容创作与传播领域&#xff0c;字幕不仅是辅助理解的工具&#xff0c;更是提升…...

数学解题能力实测:通义千问QwQ-32B vs Claude 3.5 Sonnet,谁才是理科生最佳AI助手?

数学解题能力实测&#xff1a;通义千问QwQ-32B vs Claude 3.5 Sonnet&#xff0c;谁才是理科生最佳AI助手&#xff1f; 当一道复杂的AIME竞赛题摆在面前时&#xff0c;你会选择哪种AI助手&#xff1f;是擅长分步推导的开源新秀QwQ-32B&#xff0c;还是以逻辑严谨著称的Claude 3…...

快速原型:用快马一键生成win11右键菜单传统样式恢复工具

快速原型&#xff1a;用快马一键生成win11右键菜单传统样式恢复工具 最近升级到Windows 11后&#xff0c;最让我不习惯的就是那个右键菜单了。新版的设计把所有选项都折叠起来&#xff0c;每次想找个功能还得点"显示更多选项"&#xff0c;效率大打折扣。作为一个习惯…...

3步安全卸载:EdgeRemover的非强制解决方案

3步安全卸载&#xff1a;EdgeRemover的非强制解决方案 【免费下载链接】EdgeRemover PowerShell script to remove Microsoft Edge in a non-forceful manner. 项目地址: https://gitcode.com/gh_mirrors/ed/EdgeRemover Windows Edge卸载过程中如何确保系统安全&#x…...

Vue项目发版后用户总看到旧页面?3种缓存清理方案实测(含Vue2/Vue3对比)

Vue项目发版后用户总看到旧页面&#xff1f;3种缓存清理方案实测&#xff08;含Vue2/Vue3对比&#xff09; 每次发版后&#xff0c;总有用户反馈"页面没变化"&#xff0c;这可能是浏览器缓存在作祟。作为前端开发者&#xff0c;我们常遇到这类问题——明明服务端已更…...

告别单点故障:Azkaban 3.84.4多Executor集群部署与性能调优实战

告别单点故障&#xff1a;Azkaban 3.84.4多Executor集群部署与性能调优实战 在数据密集型企业的日常运营中&#xff0c;任务调度系统如同中枢神经般重要。当团队规模扩大、数据处理需求激增时&#xff0c;单节点Azkaban往往会成为性能瓶颈——任务队列堆积、响应延迟&#xff0…...

全志Tiger-ISP调试工具安装与使用全攻略

1. 全志Tiger-ISP调试工具入门指南 第一次接触全志Tiger-ISP调试工具时&#xff0c;我也是一头雾水。这个工具主要用于图像信号处理器(ISP)的调试和优化&#xff0c;是开发智能摄像头、行车记录仪等视觉设备的必备利器。简单来说&#xff0c;它能让你像调色师一样精细调整图像的…...

Wand-Enhancer技术解析与选型指南:解锁WeMod高级功能的完整路径

Wand-Enhancer技术解析与选型指南&#xff1a;解锁WeMod高级功能的完整路径 【免费下载链接】Wand-Enhancer Advanced UX and interoperability extension for Wand (WeMod) app 项目地址: https://gitcode.com/gh_mirrors/we/Wand-Enhancer Wand-Enhancer是一款针对WeM…...

剪映高级感文字动画素材合集 预设+教程全整理

平时做口播视频时&#xff0c;总觉得文字动画的精致度跟不上内容节奏&#xff0c;找适配的素材又要花不少时间&#xff0c;所以最近整理了一份剪映高级感口播动态文字动画素材合集&#xff0c;涵盖预设、教程和配套排查资料&#xff0c;今天分享给有同样需求的朋友。 一、素材合…...