Question

如何围绕网页上的每张图片制作边框？ 我的网页显示了文件夹中的所有图片。这就是我需要边框的地方，因为它看起来太难看了。

代码：index.php

<html>
<head>
<title>Goat Imager</title>
</head>
<body bgcolor="#CCCC00">
<?
$files = glob("images/*.*");
for ($i=1; $i<count($files); $i++)
{
    $num = $files[$i];
    print $num."<br>";
    echo '<img src="'.$num.'" alt="random image"/>'."<br><br><br>";
}
?>
</body>
</html>

我在想两个选择：

选项a。）添加一些可以更改的命令在加载结束时为网页上的每张图片添加边框。

选项b。）（我更喜欢）更改我提供的代码，以便为文件夹中显示的每个新图片添加边框。

Answer 1

<html>
<head>
<title>Goat Imager</title>
</head>
<body bgcolor="#CCCC00">
<?
$files = glob("images/*.*");
for ($i=1; $i<count($files); $i++)
{
    $num = $files[$i];
    print $num."<br>";
    echo '<img src="'.$num.'" alt="random image" style="border:2px solid"/>'."<br><br><br>";
}
?>
</body>
</html>

我刚刚将border style属性添加到image标记中。希望这可以在不影响其他图片的CSS的情况下工作..

Answer 2

为什么不使用CSS？在标题标记后直接插入。

<style>
    img { border: 5px solid #000000; }
</style>

Answer 3

你应该使用CSS来实现这一点，只需：

img {
   border: 3px solid black;
}

例如。这将适用于您网站中的每个图像。如果您想要排除徽标或标题图像之类的内容，只需在CSS代码中指定它，如下所示：

.content img {
   border: 3px solid black;
}

当然，在您的HTML代码中，将您的内容包装在<div class="content"> CONTENT HERE!! </div>左右，以便正确应用。

使用JavaScript进行此类操作几乎可以保证会导致网站沉重的问题，我不建议这样做，我也不建议使用任何PHP解决方案。

在每张照片上添加一个div，黑色。 PHP或HTML

3 个答案: