Question

所以，我正在为我的一位摄影师朋友在网站上工作。我试图创建一个响应或流畅的＆＃39;网格（一个表，2行和4列）作为一种链接到他的图库的菜单。

这里的基本想法是拥有这样的东西：

（由于某种原因，它让我上传这张图片，但不会让我发布，因为我没有10个声誉，所以这里是链接） http://i.stack.imgur.com/wTntr.jpg

每个图库页面的缩略图显然只会替换白色方块。

现在这个布局我想要发生两件事。首先，我希望这个表是流畅的，我可以使用这个css脚本来做：

@charset "utf-8";
/*************************/
/* Fluid Grid Album Menu */
/*************************/

@media
only screen and (max-width: 1020px
{
    table, thread, tbody, th, td, tr {
        display: block;
    font-family: Calibri;
    }

    thread tr {
    position: absolute;
    }

    tr { border: 0px; }

    td {
    border: none;
    position: relative;
    }

    td:before {
    position: relative;
    padding: 10px;
    }

之前我从来没有真正使用过CSS，因为我还没有真正成为开发人员，所以有些可能是错误或不必要的，所以我很抱歉。现在这工作正常，网格确实适应页面。问题是当我尝试添加下一部分时。

在鼠标悬停时，我希望图像稍微增长，所以为此，我使用了这段代码：

<img src="(image url)" width='240' height='164' 
        onMouseOver="this.width='255'; this.height='174.25'"
        onMouseOut="this.width='240'; this.height='164'">

当我添加此代码时，会发生以下两种情况之一。如果我的图像尺寸与它们完全相同（在px中），图像对鼠标悬停有所需的效果，但在较小的设备上，这会压缩图像宽度，但高度保持固定。

但是，如果我将图像大小更改为％而不是px，则图像会大小调整，但是在鼠标悬停时它们会消失，因此我猜测我无法使用％s。

我的想法是，我可能不得不在CSS中而不是在HTML中包含响应和/或鼠标悬停效果。有什么建议？

Answer 1

对不起伙计们，我开始习惯于解决这个问题，尽管ChrisWillard和Lister先生确实让我走上正轨，所以所有的功劳都归功于他们！

为了让别人清楚，这就是我让它为我工作的方式。响应表/图像和鼠标悬停效果都应该通过CSS而不是HTML来实现，因此每个表项的HTML都被清理为：

<td onClick="document.location.href='(link URL)';">
<div align="center">
<img src="(image URL)">
<br>(Text to display under image)</div></td>

美好而简单。这个表的CSS只是简短的，ChrisWillard的例子向我展示了CSS基本上是如何工作的，从而我能够在HTML的最顶端包含这个（在'style'标签中）：

img { width: 90%; height:auto; margin: 5px }
img:hover { width: 95%; height:auto; margin: 0px }
table { width: 90%; height:auto }
td { width: 25%; height: 50%; padding: 5px }

我发现当你的鼠标悬停在图像上（没有边距）时，整个网格会移动一点，所以我添加了一个在悬停效果上消失的边距。由于我只是增加了一点图像尺寸，我估计5px足够了，而且它是。

另外我注意到在调整页面大小时各个容器（td）的宽度会很有趣，所以（因为我希望网格在每一行上有4个容器）我将宽度设置为25％（因为我只想要2行）我把高度改为50％。

一旦你意识到它是如何工作的，这真的很容易，所以谢谢你们的帮助！非常感谢！

响应表包含HTML和CSS中的图像

1 个答案: