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

news/2024/9/20 2:34:39

目标图片:

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浏览器运行效果:


http://lihuaxi.xjx100.cn/news/1863207.html

相关文章

不会代码(零基础)学语音开发(跟我一起开始吧)

这款语音开发板&#xff0c;性价比非常高&#xff0c;集成了多种外设&#xff0c;包括180度数码舵机、双直流电机、双继电器、电位器、红外寻迹/接近传感器等等语音开发能用到的外部设备&#xff0c;构建了最为完善的语音开发环境。这样我们通过一个小小的开发板&#xff0c;就…

Wnmp本地搭建结合内网穿透实现远程访问本地Wnmp服务

文章目录 前言1.Wnmp下载安装2.Wnmp设置3.安装cpolar内网穿透3.1 注册账号3.2 下载cpolar客户端3.3 登录cpolar web ui管理界面3.4 创建公网地址 4.固定公网地址访问 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的 人工智能学习网站&#xff0c; 通俗易懂&a…

科普关于msvcp140.dll文件是什么内容,解决msvcp140.dll丢失的修复方法

在使用电脑时出现了关于msvcp140.dll丢失的问题&#xff0c;这是什么情况&#xff0c;出现这样的问题通常都会导致电脑中的一些软件不能使用&#xff0c;那么都有什么办法能够解决msvcp140.dll丢失的问题呢&#xff1f;今天就给大家科普一些关于msvcp140.dll文件是什么的内容&a…

react相关hooks(一)

视图上某个状态发生了变化&#xff0c;所以视图要进行相应的更新 vue是编译时的行为 react时运行时的行为 useReducer //搜集所有操作某一个数据的方案 const {useReducer} from react; const [count,dispatch] useReducer(countReducer],0) const countReducer(count,{type,…

shopee活动怎么报,shopee活动怎么分类?-站斧浏览器

报虾皮活动需要提前了解活动信息、优化产品信息、制定合理的定价策略、积极互动与推广以及及时跟进销售情况等多个方面进行考虑和准备。另外通过对虾皮活动的分类&#xff0c;我们可以更好地了解活动的特点和管理要求&#xff0c;为参与活动做好准备。 Shopee活动怎么报&#…

2022年9月26日 Go生态洞察:Go运行时4年后的进展

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

C++ Primer Plus第十三章笔记

目录 基类 构造函数&#xff1a;访问权限的考虑 1.2 派生类和基类之间的特殊关系 继承&#xff1a;is-a关系 多态公有继承 静态联编和动态联编 指针和引用类型的兼容性 虚成员函数和动态联编 虚函数的注意事项 构造函数 析构函数 友元 没有重新定义 重新定义将隐…

Java中CAS底层原理

一、概述 CAS 是 compare and swap 的简写&#xff0c;即比较并交换。通过比较工作内存值(预期值A)和主物理内存的共享值V是否相同,相同则执行规定操作&#xff0c;否则继续比较直到主内存和工作内存的值一致为止。这个过程是原子的。 在 Java 平台上对这种操作进行了包装。在 …