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.hqwc.cn/news/233429.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PyQt基础_014_对话框类控件QFileDialog

基本操作 import sys from PyQt5.QtCore import * from PyQt5.QtGui import * from PyQt5.QtWidgets import *class filedialogdemo(QWidget):def __init__(self, parentNone):super(filedialogdemo, self).__init__(parent)layout QVBoxLayout()self.btn QPushButton("…

Vue3-数据交互请求工具设计

1.安装axios pnpm add axios 2.利用axios.create创建一个自定义的axios来使用 参考官网&#xff1a;axios中文文档|axios中文网 | axios 在src/utils文件夹下新建request.js&#xff0c;封装axios模块 import axios from axios const baseURL const instance axios.creat…

javaagent字节码增强浅尝

概述 javaagent 技术广泛应用于对代码的增强&#xff0c;比如统计方法执行时间、GC 信息打印、分布式链路跟踪等&#xff1b;实现方式包括 javassist 和 bytebuddy&#xff0c;bytebuddy 是对 javassist 的改进&#xff1b;类似于 spring 中的 AOP&#xff1b; Instrumentati…

手把手教你写IP地址规划方案

中午好&#xff0c;我的网工朋友。 IP地址的合理规划是网络设计的重要环节&#xff0c;大型计算机网络必须对IP地址进行统一规划并得到有效实施。 IP地址规划的好坏&#xff0c;不仅会影响到网络路由协议算法的效率&#xff0c;还会影响到网络的性能&#xff0c;网络的扩展&a…

vue3+ts 实现时间间隔选择器

需求背景解决效果视频效果balancedTimeElement.vue 需求背景 实现一个分片的时间间隔选择器&#xff0c;需要把显示时间段显示成图表&#xff0c;涉及一下集中数据转换 [“02:30-05:30”,“07:30-10:30”,“14:30-17:30”]‘[(2,5),(7,10),(14,17)]’[4, 5, 6, 7, 8, 9, 10, …

金鸣图片转excel、word网页版操作说明

一、点击“点击添加需转换的图片或PDF”&#xff0c;如还没登录将弹出登录窗口&#xff0c;直接登录即可&#xff0c;如已登录&#xff0c;则直接添加待识别的图片或DPF即可。 二、将待识别的图片或PDF添加进列表后点击“提交识别”按钮。 三、识别成功后将弹出窗口&#xff0c…

从零开始构造一个Operator(保姆级教程)

文章目录 operator是什么operator如何开发CRD需求分析Operator1. 初始化项目2. 初始化CRD相关文件3. code-generator生成代码4. controller业务逻辑实现5. manager启动6. 本地安装调试7. 部署在集群上8. 卸载清除资源 项目地址&#xff1a;https://github.com/kosmos-io/simple…

清早送朋友的阳光早安问候语祝福,愿你好运同行

1、早上好&#xff01;送上清晨第一缕阳光&#xff0c;伴随着燕舞蝶飞的风声&#xff0c;给您最温馨的问候。让心情放飞&#xff0c;让梦想翱翔&#xff0c;让生命绽放。祝您每天都充满能量&#xff0c;前程似锦&#xff01; ​ 2、平凡就是幸福&#xff0c;简单就是快乐&…

vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?

面试官&#xff1a;vue要做权限管理该怎么做&#xff1f;如果控制到按钮级别的权限怎么做&#xff1f; 一、是什么 权限是对特定资源的访问许可&#xff0c;所谓权限控制&#xff0c;也就是确保用户只能访问到被分配的资源 而前端权限归根结底是请求的发起权&#xff0c;请求…

poc_order_cnt_type

为什么有poc_order_cnt_type?poc_order_cnt_type是为了推断出POC,POC表示了播放的顺序,frame_num在传递参考帧后加1,这里涉及到一个播放顺序和解码顺序的问题。 poc_order_cnt_type分为三种,取值为0~2,先从最简单的poc_order_cnt_type为2说起。 poc_order_cnt_type为2 …

004:Direct 2D离屏渲染(Qt中实现)

简介&#xff1a; 用QT开发图像显示的小程序&#xff0c;需要一些标注工具&#xff0c;由于用的是opengl渲染&#xff0c;所以就在内存中进行绘制&#xff0c;然后纹理贴图贴出去&#xff0c;发现Qt绘制的效果太差&#xff0c;且速度一般&#xff0c;于是就想着用direct2d来绘制…

WEB渗透—反序列化(九)

Web渗透—反序列化 课程学习分享&#xff08;课程非本人制作&#xff0c;仅提供学习分享&#xff09; 靶场下载地址&#xff1a;GitHub - mcc0624/php_ser_Class: php反序列化靶场课程&#xff0c;基于课程制作的靶场 课程地址&#xff1a;PHP反序列化漏洞学习_哔哩哔_…