图库的问题

Question

我是编码新手，正在开展一个小项目。我试图在html＆amp;中创建一个图库。 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/