困难的HTML,JavaScript,CSS网页

概述FYI,这是我正在开展工作的一个简化/通用的例子.我只是寻找可以使这项工作的 HTML, JavaScript和/或CSS.我更喜欢这可以没有任何JavaScript库.此外,该页面将基于从数据库加载的数据构建.这只需要在较新的IE / Firefox浏览器中工作. 我需要创建一个具有固定大小“单元格”网格的网页,每个单元格将为150像素乘以150像素.这里是6×3网格示例,但是我的网格会根据数据 FYI,这是我正在开展工作的一个简化/通用的例子.我只是寻找可以使这项工作的 HTML,JavaScript和/或CSS.我更喜欢这可以没有任何JavaScript库.此外,该页面将基于从数据库加载的数据构建.这只需要在较新的IE / firefox浏览器中工作.

我需要创建一个具有固定大小“单元格”网格的网页,每个单元格将为150像素乘以150像素.这里是6×3网格示例,但是我的网格会根据数据库数据而有所不同(4×10或3×5等)：

-------------------------------------|     |     |     |     |     |     ||     |     |     |     |     |     ||     |     |     |     |     |     |-------------------------------------|     |     |     |     |     |     ||     |     |     |     |     |     |       6x3 grID of "cells"|     |     |     |     |     |     |-------------------------------------|     |     |     |     |     |     ||     |     |     |     |     |     ||     |     |     |     |     |     |-------------------------------------

这些单元格中的每一个将需要以下内容：

1)包含150像素×150像素的“主”图像.这个图像需要在浏览器中进行更改,希望可以使用CSS Sprites.我想将所有这些图像保存在一个文件中,并将其缩小到每个单元格所需的内容.

2)当鼠标悬停在“单元格”上时,将显示可点击图像的叠加.在下面的示例中,我使用字母,但图像不会是字母,更像图标.这些点击需要能够运行不同的每个图像的JavaScript函数(所以点击“A”图像将运行功能A,而点击“F”将运行功能F等).图像将依赖于数据库信息,因此对于不同的单元格,一些将被包括,而另一些不是.它们在单元格内的位置将始终是固定和控制的.这是一个单个单元格可以与顶部的图像(字母)一起看：

---------|A  B  C||D  E  F|     a single cell where all overlay images appear|G  H  I|------------------|A     C||   E   |     a single cell where only some overlay images appear|G      |---------

3)自由的文本包装和居中的单元格.如果这个免费文本位于主图像#1之上,并且在可点击的图像#2之下,那么这将是最好的,但如果它是所有的东西,而不是也可以.这个文本的长度限制会有一个合理的限制,因此滚动超过150px x 150px不应该是一个问题,但它需要包装.

为了纪录,这不是功课！和HTML / JavaScript / CSS当然不是我的实力.我已经在这个工作了一段时间,并看过/工作了很多例子,如何做各种各样的组件.我还没有找到任何可以工作的东西,当所有的东西放在一起.

解决方法 就个人而言,我认为桌子是魔鬼,所以这里有更像我会使用浮动的div的东西：

http://jsfiddle.net/gbcd6/11/

您可以轻松地转换图像的文本内容,或者通过CSS添加背景图像,以及根据“控制”div拥有的九个类别调用单独的Js函数.

编辑：

Here is the most current version of the solution,它包括一个实际的表,而不是使用display：table-cell,以及图像和包装的附加示例标记,以及一个基本的JavaScript示例.这是为了解决旧版浏览器支持的问题,并满足知识管理的要求.虽然整体结构仍然与原来的小提琴大致相同.

总结

以上是内存溢出为你收集整理的困难的HTML,JavaScript,CSS网页全部内容，希望文章能够帮你解决困难的HTML,JavaScript,CSS网页所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。