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

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

news 2026/4/1 16:37:12

目标图片：

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

从编译到定制：WinSCP全流程开发指南

从编译到定制&#xff1a;WinSCP全流程开发指南 【免费下载链接】winscp WinSCP is a popular free file manager for Windows supporting SFTP, FTP, FTPS, SCP, S3, WebDAV and local-to-local file transfers. A powerful tool to enhance your productivity with a user-fr…...

编程新知 2026/4/1 16:34:51

飞机上吸烟还叫嚣“憋得难受”？

坐飞机最怕遇到什么&#xff1f;不是延误&#xff0c;也不是颠簸&#xff0c;而是那种不拿一飞机人性命当回事的“巨婴”旅客。就在昨天&#xff08;3月29日&#xff09;&#xff0c;四川航空一架从成都飞往尼泊尔加德满都的航班上&#xff0c;就出了这么一档子事儿。一位“老烟…...

编程新知 2026/4/1 16:16:40

AUC 的两种等价定义：从排序概率到 ROC 曲线的统一理解

一、AUC 的本质&#xff1a;一个排序概率1. 问题设定假设我们面对的是一个二分类 / 排序问题&#xff1a;每个样本 &#xfffd;&#xfffd; 有真实标签 &#xfffd;&#xfffd;∈0,1模型给出一个连续预测分数 &#xfffd;&#xfffd;∈&#xfffd;分数越大&#xff0c;模…...

编程新知 2026/4/1 15:50:28

ESP32-S3驱动JW01二氧化碳传感器：从供电陷阱到数据解析的实战指南

1. 硬件连接&#xff1a;电压匹配是生死线 第一次拿到JW01传感器时&#xff0c;我像往常一样顺手接上了ESP32-S3开发板的5V引脚——毕竟大多数传感器模块都标着"5V供电"的字样。结果串口监视器里一片死寂&#xff0c;连乱码都没有。翻出万用表测量才发现&#xff0c;…...

编程新知 2026/4/1 13:06:37

手把手教你用AT32F403A实现串口空闲中断接收完整数据帧

深入解析AT32F403A串口空闲中断实现高效数据帧接收 在嵌入式系统开发中&#xff0c;串口通信是最基础也最常用的外设接口之一。面对实际应用中常见的不定长数据帧接收需求&#xff0c;传统轮询方式不仅效率低下&#xff0c;还容易丢失数据。而国产MCU雅特力AT32F403A提供的**串…...

编程新知 2026/4/1 12:08:08

如何高效保存B站视频？BiliTools全能下载解决方案让你无忧离线观看

如何高效保存B站视频&#xff1f;BiliTools全能下载解决方案让你无忧离线观看 【免费下载链接】BiliTools A cross-platform bilibili toolbox. 跨平台哔哩哔哩工具箱&#xff0c;支持下载视频、番剧等等各类资源 项目地址: https://gitcode.com/GitHub_Trending/bilit/BiliT…...

编程新知 2026/4/1 11:59:54

SuGaR与NeRF对比分析：为什么高斯泼溅是未来趋势

SuGaR与NeRF对比分析&#xff1a;为什么高斯泼溅是未来趋势 【免费下载链接】SuGaR [CVPR 2024] Official PyTorch implementation of SuGaR: Surface-Aligned Gaussian Splatting for Efficient 3D Mesh Reconstruction and High-Quality Mesh Rendering 项目地址: https://…...

编程新知 2026/4/1 11:23:38

Phi-4-mini-reasoning：轻量级推理模型在人工智能浪潮中的定位

Phi-4-mini-reasoning&#xff1a;轻量级推理模型在人工智能浪潮中的定位 1. 轻量级推理模型的时代价值 当ChatGPT等千亿参数大模型占据媒体头条时&#xff0c;一个容易被忽视的趋势正在悄然兴起——轻量级推理模型正在特定领域展现出惊人的实用性。Phi-4-mini-reasoning正是…...

编程新知 2026/4/1 10:47:10

小爱音箱音乐自由播放器：解锁无限听歌体验的完整指南

小爱音箱音乐自由播放器&#xff1a;解锁无限听歌体验的完整指南 【免费下载链接】xiaomusic 使用小爱音箱播放音乐&#xff0c;音乐使用 yt-dlp 下载。 项目地址: https://gitcode.com/GitHub_Trending/xia/xiaomusic 你是否厌倦了音乐平台的各种限制&#xff1f;是否想…...

编程新知 2026/4/1 9:05:16

解锁开源工具QMK Toolbox：完全掌握机械键盘个性化定制

解锁开源工具QMK Toolbox&#xff1a;完全掌握机械键盘个性化定制 【免费下载链接】qmk_toolbox A Toolbox companion for QMK Firmware 项目地址: https://gitcode.com/gh_mirrors/qm/qmk_toolbox QMK Toolbox是一款开源的设备管理工具&#xff0c;专为QMK固件设计&…...

编程新知 2026/4/1 8:40:55