html - 黑盒位置练习-6ren

html - 黑盒位置练习

转载作者：行者123 更新时间：2023-11-28 03:45:37

25

4

我有这张图片，我需要回复它。我已经完成了大部分代码，但是我在做黑匣子时遇到了一些麻烦。它需要是: - 在“红盒子”之上 - 在“bluebox”的背后 - 在“blueinbox”之上

body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin:0 !important;
    width: 100% !important;
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    -webkit-font-smoothing: antialiased !important;
}
.container {
    background-color: #e1e1e1;
    height: 200px;
    width: 400px;
    border: 0;
    margin: auto;
    display: table;
    margin-top: 20px;
    position: relative;
}
.redbox {
    background-color: #fff;
    height: 120px;
    width: 120px;
    margin: 20px 20px 0 0;
    display: table;
    right: 0;
    border-style: solid;
    border-width: 1px;
    border-color: red;
    border-radius: 5px;
    position: absolute;
}
.bluebox {
    background-color: #fff;
    height: 120px;
    width: 120px;
    margin: 60px 60px 0 0;
    display: table;
    right: 0;
    border-style: solid;
    border-width: 1px;
    border-color: blue;
    position: absolute;
    border-left-style: dashed;
}
.blueinbox {
    background-color: #00aeef;
    height: 80px;
    width: 80px;
    margin: 20px 20px 0 0;
    float: right;
}
.ninja {
    color: #fff;
    font-family: "Open Sans", Arial, sans-serif;
    letter-spacing: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

<body>
    <div class="container">
        <div class="redbox">
        </div>
        <div class="bluebox">
            <div class="blueinbox">
                <div class="ninja">
                    <p>NINJA!</p>
                </div>
            </div>
        </div>
    </div>
          
</body>

最佳答案

完成。

body {
	font: 500 16px 'Open Sans', Arial, sans-serif;
	color: #fff;
}

.container {
	position: relative;
	max-width: 400px;
	height: 200px;
	margin: 2rem auto;
	border: 1px solid #000;
	background-color: #eee;
}

.box-red, .box-blue-light, .box-blue-dark, .box-black {
	position: absolute;
}

.box-red {
	top: 20px;
	right: 20px;
	width: 120px;
	height: 120px;
	border: 1px solid red;
	border-radius: 5px;
}

.box-black {
	top: 40px;
	right: 40px;
	width: 60px;
	height: 60px;
	background-color: #000;
}

.box-blue-light {
	top: 80px;
	right: 80px;
	width: 80px;
	height: 80px;
	background-color: #05adeb;
}
.box-blue-light::before {
	content: "";
	position: absolute;
	right: 0;
	width: 20px;
	height: 20px;
	background-color: #000;
}
.box-blue-light h5 {
	margin-top: 2rem;
	font: 500 1rem 'Open Sans';
	letter-spacing: 2px;
	text-align: center;
}

.box-blue-dark {
	top: 60px;
	right: 60px;
	width: 120px;
	height: 120px;
	border: 1px solid blue;
	border-left-style: dashed;
	background: #fff url("https://media1.giphy.com/media/fLg3MEWdgH5Ti/200.gif");
}
.box-blue-dark::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(170,50,90,.25)
}

<body>
	<div class="container">
		<div class="box-red"></div>
		<div class="box-black"></div>
		<div class="box-blue-dark"></div>
		<div class="box-blue-light"><h5>NINJA!<h5></div>
	</div>
</body>

关于html - 黑盒位置练习，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43990327/

25

4

0

文章推荐： c++ - CreateProcess() 中的 lpCommandLine 出现问题

文章推荐： javascript - AngularJS 和 Websocket

文章推荐： c++ - 指针和 char*

文章推荐： c++ - 以当前节点为根的二进制搜索树插入 C++

c - atof 练习(K&R 第 4.2 节，练习 4.2)
K&R 前。 4.2 要求您修改给定的(非标准)atof 函数，该函数缺少处理指数的指数处理机制(如 123e6 或 456e-7)。我添加了一个最小的更改来处理正确输入的、无空格的个位数指数。为了检
算法的复杂性 - 练习
我正在学习计算机科学入门类(class)的考试，我对“常规”算法和递归算法中的复杂性主题有疑问(通常我们将这些问题写成 C 代码). 我想知道 Internet 和/或书籍中是否有涵盖该主题的基础级别
javascript 练习 - 带字符串的递归函数
console.log( ‘blah’.repeatMe( 3 ) ); 使用 Javascript 编写代码，使前面的函数打印: 输出:blahblahblah 最佳答案噢，放弃函数式解决方案太有
java - 扩展抽象类的奇怪行为(练习)
我正在准备 Java SE 7 认证考试，并且正在做一些关于继承和访问修饰符的无聊练习。但是现在我在应用继承时遇到了意外的行为。在我的基础包 com.testpkg 中，我有一个抽象类: packa
C 队列问题(练习)
我刚刚开始了 C 语言队列的第一课，我得到了创建队列、向队列添加元素和删除元素的练习。但是，我在检查队列是满还是空时遇到了麻烦。 #include typedef struct FloatQueue
javascript - JavaScript 练习
请问我从昨天开始就被困在下面这个问题中了。下面是问题: Write a program that uses console.log to print all the numbers from 1 to
用于结帐的 Java 练习
我最近尝试了一些 Java，希望对我的风格进行一些评论。如果你喜欢看这个放在图像中的练习，并告诉我我的风格是否足够好？或者是做的还不够好，可以告诉我应该在哪方面多下工夫，帮我改进一下？ exercis
SQL 练习 - 似乎无法解决这个问题
我对手动编写 SQL 查询还很陌生，而且我有一个我似乎无法解决的练习。我了解解决此问题所需的工具，但我就是想不出解决方案。你能帮助我理解如何以一种能让我在未来解决类似练习的方式解决这个问题吗？我
c# - 多态性——练习
好吧，这就是练习: Define a class named student, containing three grades of students. The class will have a f
javascript - 找不到重构警报的方法(练习)
我是一个 JS 菜鸟，试图制作这个“你好，先生/小姐你的名字!”干净的。我看不到在 if/else 中重构警报的方法，因为那样我就失去了 var b 的值。 JS: "use strict
c++ - 模板 - 练习
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
Javascript 练习 - 反转二维数组
反转二维数组的值，可以扩展 n 次。 [1, [2, [3, ... [n, null]]]] 给定: 所有数组的长度始终为 2 列表中的最后一个数组将包含一个 null 索引 1 示例: [1, [
ocaml - 简单的 OCaml 练习
我试图通过 Jason Hickey 笔记自学 OCaml，下面的练习让我难住了。问题:编写一个函数 sum 给定两个整数边界 m,n 和函数 f 计算求和。我正在尝试这个: let r
SICP 练习 1.19
这是一个生成斐波那契数列的程序，这里是引用:http://sicp.org.ua/sicp/Exercise1-19 据说我们可以将程序视为“a <- bq + aq + ap and b <- bp
scheme - 评估顺序，SICP 练习
所以，我正在努力通过 SICP。第 4 章的第一个练习是: Exercise 4.1. Notice that we cannot tell whether the metacircular eva
javascript - 基本 JavaScript 练习
这个问题已经有答案了: Count the number of occurrences of a character in a string in Javascript (39 个回答) 已关闭 6
sql - 练习 SQL 查询
已关闭。这个问题是 off-topic 。目前不接受答案。想要改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。已关闭10 年前。 Improve th
javascript - 拆分账单 - JavaScript 练习
我目前正在学习 JS，并且正在尝试进行编码练习。到目前为止，我已经成功地使用离线和在线部分代码的大量资源拼凑了以下代码。我已经非常接近了 - 只是结果中的数字无法正确。一些背景:在函数中输入一个对象
java - 无限元素回收器 View 练习
我需要创建一个回收器 View 练习，这是一个带有简单的单个回收器的应用程序加载大小为 20 的页面，并且可以容纳无限数量的项目。现在我不想做出重新加载越来越多的项目的幼稚解决方案，而是一个优雅的解
java - 练习 Java - EDX
下面的实现正确吗？输入:Oldrecords(GameRecord 对象数组)和 newRecords (GameRecord) 我将检查 oldRecords 数组中的 newRecord 值。如

首页

博学

6Ren·AI

商城

html - 黑盒位置练习