作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个关于 html/css 的元素来制作元素周期表。
我已经完成了,但现在我希望在将屏幕大小时调整为移动版本时,每个元素都在另一个元素下方。
我给你两个元素来了解 html 部分:
html
<div class="periodic-row">
<div class="cell">
<div class="element">
<div class="at_num">3</div>
<div class="symbol">Li</div>
<div class="at_details">Lithium</div>
</div>
</div>
<div class="cell">
<div class="element">
<div class="at_num">4</div>
<div class="symbol">Be</div>
<div class="at_details">Beryllium</div>
</div>
</div>
这是 CSS 部分:
.periodic-row {
clear: both;
height: 10%;
}
.cell {
float: left;
position: relative;
width: 5.55%;
height: 100%;
}
.element {
position: absolute;
top: 0;
left: 0;
border: 1px solid rgb(0, 0, 0);
text-align: center;
background-color: rgb(45, 224, 209);
}
.at_num,
.at_details {
position: absolute;
color: rgb(255, 255, 255);
}
.at_num {
top: 4px;
right: 5px;
}
.symbol {
position: absolute;
top: 50%;
left: 0px;
right: 0px;
}
.at_details {
bottom: 4px;
left: 0px;
right: 0px;
}
.periodic-row:nth-child(-n+7) .cell:nth-child(n+13) .element {
background-color: rgb(153, 221, 255);
}
.periodic-row:nth-child(2) .cell:nth-child(13) .element,
.periodic-row:nth-child(3) .cell:nth-child(14) .element,
.periodic-row:nth-child(4) .cell:nth-child(14) .element,
.periodic-row:nth-child(4) .cell:nth-child(15) .element,
.periodic-row:nth-child(5) .cell:nth-child(15) .element,
.periodic-row:nth-child(5) .cell:nth-child(16) .element,
.periodic-row:nth-child(6) .cell:nth-child(16) .element {
background-color: rgb(194, 224, 45);
}
.periodic-row:nth-child(1) .cell:nth-child(4n+1) .element,
.periodic-row:nth-child(2) .cell:nth-child(n+14) .element,
.periodic-row:nth-child(3) .cell:nth-child(n+15) .element,
.periodic-row:nth-child(4) .cell:nth-child(n+16) .element,
.periodic-row:nth-child(5) .cell:nth-child(n+17) .element,
.periodic-row:nth-child(6) .cell:nth-child(17) .element,
.periodic-row:nth-child(7) .cell:nth-child(17) .element {
background-color: rgb(191, 191, 33);
}
.periodic-row:nth-child(-n+7) .cell:nth-child(18) .element {
background-color: rgb(224, 147, 45);
}
.cell:nth-child(-n+2) .element{
background-color: rgb(108, 45, 224);
}
.cell:nth-child(-n+1) .element{
background-color: rgb(224, 45, 57);
}
.periodic-row:nth-child(n+8) .element {
background-color: rgb(52, 143, 235);
}
.periodic-row:last-child .element{
background-color: rgb(52, 235, 155);
}
@media (min-width: 600px) {
.periodic {
height: 460px;
margin-right: -2px;
}
.element {
right: 2px;
bottom: 2px;
}
.at_num,
.at_details {
font-size: 8px;
opacity: 1;
}
.symbol {
margin-top: -17px;
font-weight: bold;
line-height: 30px;
color: rgb(255, 255, 255);
text-shadow: rgb(255, 255, 255);
}
}
@media (min-width: 992px) {
.periodic {
height: 680px;
}
.at_num,
.at_details {
font-size: 11px;
}
.symbol {
font-size: 24px;
}
}
@media (min-width: 1200px) {
.periodic {
height: 800px;
}
.at_num,
.at_details {
font-size: 13px;
}
.symbol {
font-size: 30px;
}
}
参见 here JsFiddle。
注意:我不能使用表格,这就是我用
做的原因最佳答案
请试试这个 css。
.periodic-row {
clear: both;
height: 10%;
}
.cell {
float: left;
position: relative;
width: 5.55%;
height: 100%;
}
.element {
padding: 5px;
border: 1px solid rgb(0, 0, 0);
text-align: center;
background-color: rgb(45, 224, 209);
}
.at_num,
.at_details {
color: rgb(255, 255, 255);
}
.symbol {
top: 50%;
left: 0px;
right: 0px;
}
.at_details {
bottom: 4px;
left: 0px;
right: 0px;
}
.periodic-row:nth-child(-n+7) .cell:nth-child(n+13) .element {
background-color: rgb(153, 221, 255);
}
.periodic-row:nth-child(2) .cell:nth-child(13) .element,
.periodic-row:nth-child(3) .cell:nth-child(14) .element,
.periodic-row:nth-child(4) .cell:nth-child(14) .element,
.periodic-row:nth-child(4) .cell:nth-child(15) .element,
.periodic-row:nth-child(5) .cell:nth-child(15) .element,
.periodic-row:nth-child(5) .cell:nth-child(16) .element,
.periodic-row:nth-child(6) .cell:nth-child(16) .element {
background-color: rgb(194, 224, 45);
}
.periodic-row:nth-child(1) .cell:nth-child(4n+1) .element,
.periodic-row:nth-child(2) .cell:nth-child(n+14) .element,
.periodic-row:nth-child(3) .cell:nth-child(n+15) .element,
.periodic-row:nth-child(4) .cell:nth-child(n+16) .element,
.periodic-row:nth-child(5) .cell:nth-child(n+17) .element,
.periodic-row:nth-child(6) .cell:nth-child(17) .element,
.periodic-row:nth-child(7) .cell:nth-child(17) .element {
background-color: rgb(191, 191, 33);
}
.periodic-row:nth-child(-n+7) .cell:nth-child(18) .element {
background-color: rgb(224, 147, 45);
}
.cell:nth-child(-n+2) .element{
background-color: rgb(108, 45, 224);
}
.cell:nth-child(-n+1) .element{
background-color: rgb(224, 45, 57);
}
.periodic-row:nth-child(n+8) .element {
background-color: rgb(52, 143, 235);
}
.periodic-row:last-child .element{
background-color: rgb(52, 235, 155);
}
@media (min-width: 600px) {
.periodic {
height: 460px;
margin-right: -2px;
}
.element {
right: 2px;
bottom: 2px;
}
.at_num,
.at_details {
font-size: 8px;
opacity: 1;
}
.symbol {
font-weight: bold;
line-height: 30px;
color: rgb(255, 255, 255);
text-shadow: rgb(255, 255, 255);
}
}
@media (min-width: 992px) {
.periodic {
height: 680px;
}
.at_num,
.at_details {
font-size: 11px;
}
.symbol {
font-size: 24px;
}
}
@media (min-width: 1200px) {
.periodic {
height: 800px;
}
.at_num,
.at_details {
font-size: 13px;
}
.symbol {
font-size: 30px;
}
}
<div class="periodic-row">
<div class="cell">
<div class="element">
<div class="at_num">3</div>
<div class="symbol">Li</div>
<div class="at_details">Lithium</div>
</div>
</div>
<div class="cell">
<div class="element">
<div class="at_num">4</div>
<div class="symbol">Be</div>
<div class="at_details">Beryllium</div>
</div>
</div>
关于html - 元素周期表,元素一个比一个低,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59436630/
我有一个关于 html/css 的元素来制作元素周期表。 我已经完成了,但现在我希望在将屏幕大小时调整为移动版本时,每个元素都在另一个元素下方。 我给你两个元素来了解 html 部分: htm
我是一名优秀的程序员,十分优秀!