文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用CSS-Position重新创建此图像

问如何使用CSS-Position重新创建此图像
EN

Stack Overflow用户

提问于 2021-09-09 19:26:00

回答 1查看 33关注 0票数 2

我必须在这个问题的末尾使用定位来重新创建图像。我不允许以任何方式编辑HTML。我不想知道解决方案，而是想知道我遗漏或忽略了什么。我敢肯定这必须用position: absolute来完成，但我不确定如何分别针对每个盒子。

代码如下：

body {
    font-family: 'Mansalva', cursive;
    position: absolute;
}

div {
    border: 3px solid black;
    text-align: center;
    position: relative;
    height: 100px;
    width: 200px;
    background-color: blue;
}

p {
    border: 2px solid black;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom: 0px;
    background-color: black;
    color: white;
    font-size: 35px;
    height: 100px;
    width: 200px;
}

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div><p>Your Name</p></div>
</body>

css

position

回答 1

Stack Overflow用户

发布于 2021-09-09 19:49:15

要仅使用css执行此操作，您必须使用选择器。

例如：

/* Selects the second <li> element in a list */
li:nth-child(2) {
    color: lime;
}

/* Selects every fourth element
among any group of siblings */
:nth-child(4n) {
    color: lime;
}

documentation做得非常好。

在不接触HTML和添加JS的情况下，我认为CSS选择器是强制性的。

帮助您的另一个link

您可以使用CSS选择器来定位特定的div和CSS网格

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69123752

复制

相似问题

问如何使用CSS-Position重新创建此图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS-Position重新创建此图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CSS-Position重新创建此图像
EN