我需要创建一个具有固定大小“单元格”网格的网页,每个单元格将为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当然不是我的实力.我已经在这个工作了一段时间,并看过/工作了很多例子,如何做各种各样的组件.我还没有找到任何可以工作的东西,当所有的东西放在一起.
解决方法
原文地址:https://www.jb51.cc/html/224203.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。