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

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

目标图片:

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://www.lryc.cn/news/249912.html

相关文章:

  • 分享86个清新唯美PPT,总有一款适合您
  • 虚拟机系列:Oracle VM VirtualBox安装/更新/卸载出现 无法访问你试图使用的功能所在的网络位置
  • 【数据库】数据库并发控制的冲突检测,冲突可串行化的调度,保障事务的特性
  • java 对象大小计算
  • 12个国外电子元器件基本参数(下)
  • Docker容器中的OpenCV:轻松构建可移植的计算机视觉环境
  • SSH基础和高级用法
  • 算法通关第十三关-青铜挑战数学基础问题
  • 如何使用 Freepik 的 Pikaso 工具来画图
  • 一个没正常处理tcp对端关闭的bug
  • 什么是JDK
  • 积分表二(高等数学同济版中所有的积分公式)
  • Golang数据类型(数字型)
  • 【JVM系列】- 穿插·对象的实例化与直接内存
  • 【C++干货铺】继承 | 多继承 | 虚继承
  • 【ARM CoreLink 系列 8.1 -- SMMU 详细介绍-STE Entry 详细介绍 1】
  • 高防CDN与WAF防火墙的协同防护:构筑网络安全堡垒
  • golang strings包的基本操作
  • 高效解决在本地打开可视化服务器端的tensorboard
  • Spring Boot Actuator 2.2.5 基本使用
  • 字符串相似度匹配算法_莱茵斯坦距离算法
  • 【EI会议征稿】第九届电气、电子和计算机工程研究国际学术研讨会 (ISAEECE 2024)
  • Maven Helper插件——实现一键Maven依赖冲突问题
  • 理解位运算的规则
  • Android Bitmap 使用Vukan、RenderEffect、GLSL实现模糊
  • Vue H5页面长按保存为图片
  • 【Web】UUCTF 2022 新生赛 个人复现
  • 设置python下载包代理
  • nginx 配置前端项目添加https
  • 人群计数CSRNet的pytorch实现