使用HTML、CSS和PHP创建具有动态大小和位置的Hilbert矩阵

w3nuxt5m 于 2023-05-27 发布在 PHP

关注(0)|答案(1)|浏览(141)

我的任务如下：使用HTML、CSS和PHP创建Hilbert矩阵，对于任何n >= 1，n都应该在PHP源代码中定义为变量。此外，还将显示矩阵括号。
提示：https://css-tricks.com/examples/ShapesOfCSS/中的表单“TV-Screen”可以用作模板。使用PHP根据所选的n动态计算括号的大小和位置。
我现在有了下面的代码，它可以在n = 4的情况下执行此操作。

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  z-index: 1;
  position: absolute;
}

td {
  padding: 10px; 
  color: black;
}

.tv-screen {
  position: relative;
  width: 230px;
  height: 200px;
  margin: 20px;
  background: white;
  border-radius: 60% / 30%;
  color: white;
  text-indent: .1em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tv-screen::before {
  content: '';
  position: absolute;
  top: 8%;
  bottom: 8%;
  right: -1%;
  left: -1%;
  background: black;
  border-radius: 15% / 20%;
  z-index: -1; 
}

.matrix-entry {
  color: black;
  position: relative; 
  z-index: 1; 
}
</style>
</head>
<body>
<?php
$n = 4; 

echo "<div class='tv-screen'>";
echo "<table>";
for ($i = 1; $i <= $n; $i++) {
  echo "<tr>";
  for ($j = 1; $j <= $n; $j++) {
    $value = round(1 / ($i + $j - 1), 3);
    echo "<td class='matrix-entry'>" . $value . "</td>";
  }
  echo "</tr>";
}
echo "</table>";
echo "</div>";
?>
</body>
</html>

此外，我还尝试了在n=8、n=10和n=16的情况下，我需要的宽度和高度值。对于n=8，这是大约480 px和420 px，对于n=10，这是大约600 px和520 px，并且对于n=16，这是大约970 px和870 px。
但现在我有问题，以动态调整的立场和大小的要求。有人能帮我吗？

php

来源：https://stackoverflow.com/questions/76343694/creating-hilbert-matrix-with-dynamic-size-and-position-using-html-css-and-php

1条答案

按热度按时间

nhaq1z211#

我看到你的身高和宽度都是估计值。
看起来宽度大约是（n x 60）px，高度是（n x 53）px。
要分离CSS/PHP，请在**.tv-screen**的css中删除width/height。
在php中，你可以像这样改变开头。当你声明N时，宽度和高度。然后将它们添加到div上的自定义样式中。您也可以根据需要更改60/53乘数。

$n = 8; 
$width = $n * 60;
$height = $n * 53;
echo "<div style='height:{$height}px;width:{$width}px;' class='tv-screen'>";

或者你可以使用CSS calc并在页面顶部声明$n。然后在你的CSS for tv-screen中：

width: calc(<?php echo $n?> * 60px);
height: calc(<?php echo $n?> * 53px);

赞(0）回复(0）举报 2023-05-27

我来回答

使用HTML、CSS和PHP创建具有动态大小和位置的Hilbert矩阵

1条答案

相关问题

热门标签

最新问答