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

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

news 2025/12/23 23:53:32

目标图片：

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

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2025/12/22 12:29:52

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/12/18 20:53:35

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/12/22 15:10:06

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2025/12/20 19:07:28

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/12/13 4:20:30

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2025/9/9 23:27:37

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/12/22 8:54:25

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2025/12/12 18:44:23

基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

编程新知 2025/10/4 20:58:43

Linux 中如何提取压缩文件 ？

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

编程新知 2025/12/19 7:25:08