图片库的问题

Question

我是编码新手，正在做一个小项目。我正在尝试在 html 和 css 中创建一个图像库，每当您将鼠标悬停在图像上时，该图像的较大预览就会显示在中间。这是我的画廊的屏幕截图链接： 如您所见，这很简单，我遇到的问题是： 1.图像的位置，以便我在新的浏览器/计算机中打开它们时它们看起来相同 2. 我想知道在css中是否有更简化的编码方式，因为现在我正在做的基本上是每张图片都这样：

#forest {   display:inline-block;   height: 70px;   width: 70px;   margin-top: 100px;   margin-left: 70px;   margin-right: -90px; }

#previewforest {    position:absolute;   z-index:10;   height: 350px;   opacity: 0;   margin-top: -100px;   margin-right: 50px;   margin-bottom: 300px;   margin-left: 50px; }

#forest:hover{   opacity:0.4; }

#forest:hover ~ #previewforest {   opacity:1.0; }

谢谢你，我希望这已经足够清楚了。

Answer 1

您可以使用类来代替 id。一个类可以多次使用。

要在 css 中使用它而不是：

#image {}

你这样做是为了上课：

.image { }

现在你可以在你拥有的每张图片上使用这个类：

<div class="image">
   Picture here
</div>

要使您的页面在所有浏览器中看起来都一样，您可以重置您的 CSS：

http://www.cssreset.com/