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

html/css中位置position的绝对位置absolute顺时针盒子案例图片排序

news 2026/5/23 0:29:53

目标图片：

Dreamweaver界面：

代码部分：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">.red{background-color:red;width:350px;height:150px;margin:0 auto;position:absolute;top:0;left:0;}.yellow{background-color:yellow;width:150px;height:350px;margin:0 auto;position:absolute;right:0;}.green{background-color:green;width:150px;height:350px;margin:0 auto;position:absolute;bottom:0;left:0;}.pink{background-color:pink;width:200px;height:200px;margin:0 auto;position:absolute;top:150px;left:150px;}.blue{background-color:blue;width:350px;height:150px;margin:0 auto;position:absolute;bottom:0;right:0;}.f{width:500px;height:500px;margin:0 auto;position:absolute;} 
</style>
</head><body>
<div class="f">
<div class="red" >red</div>
<div class="yellow" >yellow</div>
<div class="green" >green</div>
<div class="pink" >pink</div>
<div class="blue" >blue</div>
</div>
</body>
</html>

Google浏览器运行效果：

相关文章：

html/css中位置position的绝对位置absolute顺时针盒子案例图片排序

目标图片&#xff1a; Dreamweaver界面&#xff1a; 代码部分&#xff1a; <!doctype html> <html> <head> <meta charset"utf-8"> <title>无标题文档</title> <style type"text/css">.red{background-color:r…...

编程日记 2023/12/1 17:46:46

分享86个清新唯美PPT，总有一款适合您

分享86个清新唯美PPT&#xff0c;总有一款适合您 86个清新唯美PPT下载链接&#xff1a;https://pan.baidu.com/s/1QEaXeWAekCbAWDD0iTgvMw?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整…...

编程日记 2023/12/1 17:44:44

虚拟机系列：Oracle VM VirtualBox安装/更新/卸载出现 无法访问你试图使用的功能所在的网络位置

Oracle VM VirtualBox安装/更新/卸载出现 无法访问你试图使用的功能所在的网络位置 Oracle VM VirtualBox安装/更新/卸载出现 无法访问你试图使用的功能所在的网络位置Oracle VM VirtualBox安装/更新/卸载出现 无法访问你试图使用的功能所在的网络位置 在更新Oracle VM Virtua…...

编程日记 2023/12/1 17:42:42

【数据库】数据库并发控制的冲突检测，冲突可串行化的调度，保障事务的特性

冲突可串行化 ​专栏内容&#xff1a; 手写数据库toadb 本专栏主要介绍如何从零开发&#xff0c;开发的步骤&#xff0c;以及开发过程中的涉及的原理&#xff0c;遇到的问题等&#xff0c;让大家能跟上并且可以一起开发&#xff0c;让每个需要的人成为参与者。 本专栏会定期更新…...

编程日记 2023/12/1 17:41:40

java 对象大小计算

说明&#xff1a; 对于64位机&#xff1a;一个对象由三部分组成 对象头(object header) mark word &#xff1a;64bitkclass pointer &#xff1a;32bit(默认使用指针压缩)&#xff0c;如果取消指针压缩( XX:-UseCompressedOops)&#xff0c;则占用64bit数组长度&#xff1a;数…...

编程日记 2023/12/1 17:39:38

12个国外电子元器件基本参数（下）

DAC8162SDSCR TI DAC088S085CISQNOPB TI TL4050C41QDBZR TI NE3516S02-T1D-A RENESAS TECHNOLOGY MXL862-AL-R MAXLINEAR SI32176-B-GM1R SILICON LAB...

编程日记 2023/12/1 17:35:34

Docker容器中的OpenCV：轻松构建可移植的计算机视觉环境

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 构建可移植的计算机视觉环境 文章目录 前言引言简介&#xff1a;目的和重要性&#xff1a; 深入理解Docker和OpenCVDocker的基本概念和优势&#xff1a;OpenCV简介和应用领域&#xff1a;…...

编程日记 2023/12/1 17:34:33

SSH基础和高级用法

SSH基础和高级用法 SSH&#xff08;Secure Shell&#xff09;是一种安全协议&#xff0c;用于在不安全的网络上提供安全的远程登录和数据传输。以下是一些SSH的用法和高级用法&#xff1a; 基本用法&#xff1a; 远程登录&#xff1a;使用ssh命令可以实现在本地计算机上远程…...

编程日记 2023/12/1 17:29:28

算法通关第十三关-青铜挑战数学基础问题

数组元素积的符号 描述 : 已知函数 signFunc(x) 将会根据 x 的正负返回特定值&#xff1a; 如果 x 是正数&#xff0c;返回 1 。如果 x 是负数&#xff0c;返回 -1 。如果 x 是等于 0 &#xff0c;返回 0 。 给你一个整数数组 nums 。令 product 为数组 nums 中所有元素值的…...

编程日记 2023/12/1 17:24:23

如何使用 Freepik 的 Pikaso 工具来画图

Freepik 是一个提供高质量的照片、矢量图像、插图以及 PSD 文件素材的网站https://www.freepik.com/您可以在这里找到各种风格和主题的素材&#xff0c;用于您的创意项目。Freepik 还提供了一个名为 Pikaso 的在线画图工具&#xff0c;让您可以轻松地创建和编辑您自己的图像&am…...

编程日记 2023/12/1 17:23:22

一个没正常处理tcp对端关闭的bug

最近使用自研的http client时发现一个问题&#xff0c;对端在发送响应数据之后立即调用close关闭了连接&#xff0c;我这没有调用到响应的回调&#xff0c;而是调用到了连接关闭的回调。对端延迟一会再关闭连接就没问题&#xff0c;用curl去访问也是正常的。经过排查是没有正确…...

编程日记 2023/12/1 17:18:17

什么是JDK

JDK是Java的开发工具&#xff0c;全称为Java Development Kit&#xff0c;包含Java运行环境&#xff0c;Java工具&#xff0c;Java基础类库三大部分。 Java运行环境 Java运行环境&#xff0c;也就是JRE&#xff0c;全称为Java Runtime Environment &#xff0c;其中包含JVM&…...

编程日记 2023/12/1 17:16:16

积分表二（高等数学同济版中所有的积分公式）

文章目录 含有 x − a x a \sqrt{\pm \frac{x-a}{xa}} xax−a​ ​ 或者 ( x − a ) ( b − x ) \sqrt{(x-a)(b-x)} (x−a)(b−x) ​ 的积分含有三角函数函数的积分含有反三角函数的积分 (其中 a > 0 a>0 a>0)含有指数函数的积分含有对数函数的积分含有双曲函数的…...

编程日记 2023/12/1 17:12:12

Golang数据类型（数字型）

Go数据类型&#xff08;数字型&#xff09; Go中数字型数据类型大致分为整数&#xff08;integer&#xff09;、浮点数&#xff08;floating point &#xff09;和复数&#xff08;Complex&#xff09;三种 整数重要概念 整数在Go和Python中有较大区别&#xff0c;主要体现在…...

编程日记 2023/12/1 17:09:09

【JVM系列】- 穿插·对象的实例化与直接内存

对象的实例化与直接内存 &#x1f604;生命不息&#xff0c;写作不止 &#x1f525; 继续踏上学习之路&#xff0c;学之分享笔记 &#x1f44a; 总有一天我也能像各位大佬一样 &#x1f31d;分享学习心得&#xff0c;欢迎指正&#xff0c;大家一起学习成长&#xff01; 文章目录…...

编程日记 2023/12/1 17:08:08

【C++干货铺】继承 | 多继承 | 虚继承

个人主页点击直达&#xff1a;小白不是程序媛 C系列专栏&#xff1a;C干货铺 代码仓库&#xff1a;Gitee 目录 继承的概念及定义 继承的概念 继承的定义 继承基类成员访问方式的变化 基类和派生类的赋值转化 继承中的作用域 派生类的默认成员函数 构造函数 拷贝构造…...

编程日记 2023/12/1 17:06:07

【ARM CoreLink 系列 8.1 -- SMMU 详细介绍-STE Entry 详细介绍 1】

请阅读【ARM CoreLink 文章专栏导读】 上篇文章：【ARM CoreLink 系列 8 – SMMU 详细介绍-上半部】 文章目录 ARM SMMU STE ENTRY1.1 STE ENTRYWORD[0]1.1.1 S1ContexPtr1.1.2 S1Fmt1.1.3 Config1.1.4 V(Valid)1.2 STE ENTRY WORD[1]1.2.1 S1CDMax1.2.2 S1ContextPtr1.3 STE E…...

编程日记 2023/12/1 17:05:05

高防CDN与WAF防火墙的协同防护：构筑网络安全堡垒

随着互联网的不断发展&#xff0c;网络安全威胁也日益增多&#xff0c;而网站作为企业在数字领域的门户&#xff0c;面临的风险更加复杂多样。在构筑网络安全堡垒的过程中&#xff0c;高防CDN&#xff08;Content Delivery Network&#xff09;与WAF&#xff08;Web Applicatio…...

编程日记 2023/12/1 17:03:03

golang strings包的基本操作

文章目录 golang 的字符串函数EqualFoldHasPrefixHasSuffixContainsContainsRuneContainsAnyCountIndexIndexByteIndexRuneIndexAnyIndexFuncLastIndexLastIndexAnyLastIndexFuncTitleToLowerToLowerSpecialToUpperToUpperSpecialToTitleToTitleSpecialRepeatReplaceMapTrimTri…...

编程日记 2023/12/1 17:02:02

高效解决在本地打开可视化服务器端的tensorboard

文章目录 问题解决方案 问题 由于连着远程服务器构建模型&#xff0c;但是想在本地可视化却做不到&#xff0c;不要想当然天真的以为CTRLC点击链接http://localhost:6006就真能在本地打开tensorboard。你电脑都没连接服务器&#xff0c;只是pycharm连上了而已 解决方案 你需要…...

编程日记 2023/12/1 16:55:55

ARM SVE向量化技术解析与性能优化实践

1. ARM SVE向量化技术解析 1.1 SVE架构设计理念 ARM可扩展向量扩展(Scalable Vector Extension, SVE)是ARMv8-A和ARMv9-A架构引入的长向量指令集&#xff0c;其核心创新在于向量长度无关(Vector Length Agnostic, VLA)的设计哲学。与传统固定长度的SIMD指令&#xff08;如x86的…...

编程新知 2026/5/22 23:07:26

av1编码--比特流结构

目录 2.2.1 序列头信息 2.2.2 帧头信息 2.2.4 时间分隔符信息 2.2.5 切片组信息 AV1 比特流是由一系列名为开放比特流单元&#xff08;OBU&#xff09;的数据单元组成。每个 OBU 由一个可变长度的字节串&#xff08;Byte String&#xff09;组成。具体来讲&#xff0c;OBU 包…...

编程新知 2026/5/22 20:30:12

Verilator仿真保姆级避坑指南：从安装最新版到用GTKWave看波形的完整流程

Verilator仿真实战手册&#xff1a;从源码编译到波形调试的深度解析 1. 为什么选择Verilator&#xff1a;开源EDA工具链的新选择 在数字电路设计领域&#xff0c;仿真验证环节往往决定着项目成败。传统商业仿真器虽然功能强大&#xff0c;但高昂的授权费用和复杂的配置流程让许…...

编程新知 2026/5/22 19:26:33

港澳通行证照片怎么手机拍？2026港澳通行证照片规格要求与手机拍摄方法实测

出国、赴港澳的第一步就是办理港澳通行证&#xff0c;而一张符合规范的证件照是必不可少的。很多人都会问&#xff1a;港澳通行证照片能用手机拍吗&#xff1f;怎样才能拍出符合规范的照片&#xff1f;要不要去照相馆&#xff1f;今天就给大家详细讲解港澳通行证照片的拍摄全攻…...

编程新知 2026/5/22 16:48:51

GRETNA脑网络分析工具包：MATLAB中的图论网络分析终极指南

GRETNA脑网络分析工具包&#xff1a;MATLAB中的图论网络分析终极指南 【免费下载链接】GRETNA A Graph-theoretical Network Analysis Toolkit in MATLAB 项目地址: https://gitcode.com/gh_mirrors/gr/GRETNA GRETNA&#xff08;Graph-theoretical Network Analysis To…...

编程新知 2026/5/22 15:30:27

Layerdivider：AI智能分层工具完整指南 - 快速将单张图片转为分层PSD

Layerdivider&#xff1a;AI智能分层工具完整指南 - 快速将单张图片转为分层PSD 【免费下载链接】layerdivider A tool to divide a single illustration into a layered structure. 项目地址: https://gitcode.com/gh_mirrors/la/layerdivider Layerdivider是一个革命性…...

编程新知 2026/5/22 14:56:02

Unity签到系统架构设计：配置驱动与状态同步实践

1. 这不是个“签到页面”&#xff0c;而是一套可落地的用户留存引擎很多人看到“Unity七日签到”第一反应是&#xff1a;不就是做个UI面板&#xff0c;点七次按钮&#xff0c;发七种奖励&#xff1f;我试过——真这么干&#xff0c;上线三天就被运营打回来重做。原因很简单&…...

编程新知 2026/5/22 14:31:55

如何快速解决Cursor试用限制：终极完整指南

如何快速解决Cursor试用限制&#xff1a;终极完整指南 【免费下载链接】go-cursor-help 解决Cursor在免费订阅期间出现以下提示的问题: Your request has been blocked as our system has detected suspicious activity / Youve reached your trial request limit. / Too many …...

编程新知 2026/5/22 14:20:35

IT运维、远程协助必看！ToDesk录屏功能实测：被控方也能“回放”操作全程

Hello大家&#xff0c;不知道各位有没有注意到&#xff0c;在ToDesk远程控制上新的V4.8.8.9版本中&#xff0c;无论是在基本设置还是在远控连接过程中的悬浮球功能栏里都能看见【录屏设置/开始录屏】这一项&#xff01;那么&#xff0c;这究竟是何意味呐&#xff1f;又有哪些人…...

编程新知 2026/5/22 13:07:03

在自动化脚本中集成Taotoken API并观察其长时间运行的可靠性

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 在自动化脚本中集成Taotoken API并观察其长时间运行的可靠性 对于需要长时间、周期性调用大模型API的自动化任务而言&#xff0c;服…...

编程新知 2026/5/22 11:50:51