在每张图片周围添加一个div，颜色为黑色。 PHP或HTML
[英]Add a div around every picture, colored black. PHP or HTML
问题描述
How could I make a border around every picture on the web-page? 
如何在网页上的每张图片周围划上边框？ My webpage shows all the pictures inside a folder. 我的网页显示文件夹中的所有图片。 And that is from where my need comes for a border because it looks too ugly with out it. 这就是我需要边界的地方，因为没有边界看起来太难看了。
The code: index.php 代码：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>
I was thinking of two options: 我在想两个选择：
Option a.) Put some kind of a command that will change add a border to every picture on the webpage at the end of loading. 选项a。）放入某种命令，该命令将在加载结束时更改为网页上的每张图片添加边框。
Option b.) (Which I perfer) Change the code I gave so it adds a border to every new picture displayed from the folder. 选项b。）（我愿意）更改我提供的代码，以便为文件夹中显示的每张新图片添加边框。
3 个解决方案
解决方案1
1 2014-11-07 10:02:35
<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>
I have just added the border style attribute to the image tag.. Hope this will work without affecting the css of other images.. 我刚刚在image标签中添加了border style属性。希望此方法在不影响其他图片的CSS的情况下工作。
解决方案2
0 已采纳 2014-11-07 07:49:00
Why don't you use CSS? 为什么不使用CSS？ Insert this directly after the title tag. 将其直接插入标题标签之后。
<style>
img { border: 5px solid #000000; }
</style>
解决方案3
0 2014-11-07 07:52:09
You should use CSS to make this happen, simply: 您应该使用CSS来做到这一点，只需：
img {
border: 3px solid black;
}
For example. 例如。 This will apply to every image in your website. 这将适用于您网站中的每张图片。 And in case you want to exclude something like logo or header images, just specify it in your CSS-code, like this: 如果要排除徽标或标题图像之类的东西，只需在CSS代码中指定它，如下所示：
.content img {
border: 3px solid black;
}
And of course in your HTML-code, wrap your content around <div class="content"> CONTENT HERE!! </div> 当然，在您的HTML代码中，将您的内容包装在<div class="content"> CONTENT HERE!! </div> <div class="content"> CONTENT HERE!! </div> so it applies correctly. <div class="content"> CONTENT HERE!! </div>以便正确应用。
Using JavaScript for this kind of a thing is almost guaranteed to cause some issues with the heaviness of your website, I would not recommend that, neither do I recommend any PHP solutions for this. 几乎可以肯定，使用JavaScript进行此类操作会导致您的网站繁重，从而导致某些问题，因此，我不建议这样做，也不推荐任何PHP解决方案。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.