产品列表到底应该怎么做?(2)
作者:Lucars 来源:Alibaba.com UED 发布时间:2009-01-02 16:34:00
第一次尝试:
首先我们还是来考虑考虑到底使用什么标签来写这个列表吧,所谓back 2 base嘛。重新分析列表中最重要的元素有且仅有:标题、图片、简介。显然标题是最重要的,作为一个product的title存在,而图片和简介都是用来描述标题的内容,因此第一个想到的标签就是dl,这样便有了以下布局(抱歉还没有时间整一个代码输入):
<dl>
<dt>[name]</dt>
<dd><div>[photo]</div><div>[intro]</div></dd>
</dl>
对dt和dd都做float:left,dt做一个margin-top:100px来定位到图片和简介中间,dd做一个margin-left:-25%来定位到和dt相同的x坐标(由于无法输入代码就不贴css了)这样的html是我认为最贴切的,根据现在流行的html语义化定义这样的布局太合适不过了。当然css中还是存在非常多的困难,而前面所说的“某原因”也并没有得到解决,反而更甚了,因为把标题和简介流拆开后,标题过长便会和简介的文字叠加根本无法阅读!然而经过几秒钟的思考后认为这玩意儿的解决已经超出了我的范围了。当然,有人可能会说把标题和图片换一个不就可以了么?是的,没错,但是如果这样的话使用dl标签还有什么意义呢?可能有意义吧,就是标题和简介都是为了说明这张图片而存在的,但是真的可以这么想吗?还有待实验去证明,这里就不讨论了。
第二次尝试:
如上所述,dl的存在就没意义了,那就算了吧,退而求其次使用ul(请在砸我鸡蛋前念着我还死了那么多脑细胞在这个上面的份上轻点儿吧),无序列表虽然不如定义列表来得语义那么强烈,但至少它还是和列表吧,至少不是一个division吧。ul的布局相比较就简单多了,看上去也只是把div标签换成了li而已,那么html结构如下:
<ul>
<li><div>[photo]</div>
<div>[name]</div>
<div>[intro]</div>
</li>
</ul>
到这个时候终于要直面本文第四次提到的“某原因”了,如何解决li浮动后高度不同导致的矩阵错位问题?最先进入脑子的想法就是记得很久很久以前看到过一篇关于div自适应高度的文章,于是就在google翻找,当时没有收藏真是太失误了。在google搜索自适应高度那是相当多呀,但是有一篇文章是不得不借鉴的,但是这篇文章并不是适应于我们的案例,很显然它更适用于两栏或者三栏布局,而我们至少有四栏甚至五栏。自此还有什么办法可以让多列布局自适应高度呢?(请不要跟我提关于巨大的padding与负margin这件事)伪装的自适应对于需要货真价实产品的我们是没有用的……至此思维告一段落,我需要回到源头来,最开始的出发点在哪里?如果只是为了清除浮动的话?使用最简单的方法?
带着上面的问题,便渐渐有了解决方案,不可避免的,我可能需要借助后台工程师的力量了,我在每4个li之后的那个li上加上clear:left属性,以清除左边的浮动来防止它因为前面li的高度不够而导致的错位,从它之后的li就应该会乖乖地跟在它的后面了。这个想法很美好,但是很天真,可能我确实在FF等标准浏览器下面获得了预想中的效果(没有想到实现起来那么简单,正在开心中),突然发现又是那该死的IE!!!那个加了clear属性的li确实正常显示了,但是在它之后的那些继续原来它应该范的错误,没有起到清除整行浮动的作用。我懊恼了~通过漫长的研究至今已经找到了一个语义和样式都比较平衡的点却无法在IE中得以实现,怎么办?
第一个想法就是使用hack技术(虽然UEDer们都不推崇,但是为了维护之前的成果,老子发飙了),问题就是如何做hack。先看这样的例子,如果我每4个li后面都插一个<li style=”clear:both;float:none;”></li>的话,不管在IE下还是在FF下都可以完美地完成任务,但是这个方案有一个致命的缺陷,就是对原有html语义的破坏,凭什么好好的列表突然就多出一个空li来?那么能不能在不影响原来语义的情况下,在FF依然使用它应该使用的clear:left方式的情况下来针对IE进行hack呢?非常幸运的是IE给我们提供了条件注释工具<!–[if IE]><![endif]–>(我想一旦开始使用这个东西之后一定会非常依赖它的),因此html结构就变成了这样:
<li>[productItem]</li>
<!–[if IE]><li class=”clearForIE”></li><![endif]–>
<li class=”clearForFF”>[productItem]</li>
希望这样能够看得懂。至此为了尽力表述完整语义的目的就达到了,因为所有的浏览器、搜索引擎和用户都会把那段IE的hack作为一个普通的注释来看待(这里也包括IE自己,这是一段条件注释,那还是注释),因此产品列表的li就没有被中途无故打断,更不会像最早的div版本每四个是一个division。到这里研究工作就算完成了(关于这个IE特有的hack的可能的严重后果木有给予考虑。。。),不过还有一些额外的思考。
其实使用division也不完全是不好,如果division这样做:
<div class=”top20″>
<div class=”top15″>
<div class=”top10″>
<div class=”top5″>
DIV[productItem]{1-5}
</div>
DIV[productItem]{6-10}
</div>
DIV[productItem]{11-15}
</div>
DIV[productItem]{16-20}
</div>
猜你喜欢
- 1. 服务器优化优化原则:内存里的数据要比磁盘上的数据访问起来快;站数据尽可能长时间地留在内存里能减少磁盘读写活动的工作量;让索引信息留在内
- 1.因为oracle 10g暂时没有与win7兼容的版本,我们可以通过对安装软件中某些文件的修改达到安装的目地。 a)打开“\ORACLE1
- 从本篇开始讲述如何用css实现网页的布局,即如何用css控制网页内各个元素的显示位置。如果你是一个初学者,很可能觉得做一个网页的第一步就是布
- 开始制作符合标准的站点,第一件事情就是声明符合自己需要的DOCTYPE。查看本站首页原代码,可以看到第一行就是:<!DOCTYPE h
- 如何使用Index Server建立一个网站导航地图?程序代码如下:<html><head><title>asp教程之网站导航 -
- 作用:用ASP程序将页面中的电话号码生成图片格式。以下是引用片段:<% Call Com_CreatValidCode(Request
- MySQL出错代码列表:1005:创建表失败1006:创建数据库失败1007:数据库已存在,创建数据库失败1008:数据库不存在,删除数据库
- 虽然淘宝商城的名字中带有“商城”两字,但是很显然的,淘宝商城并不是一个B2C商城,淘宝商城仍只是一个C2C平台,充其量只是个收费版的淘宝。在
- ASP中RegExp是什么 '名字字符检验Public Function CheckName(Str) &nbs
- 文通过一个操作实例来说明SQL中主标识列IDENTITY的使用技巧。要求:在 sql server 2005中,建立数据表book,在表bo
- 大家都知道索引对于数据访问的性能有非常关键的作用,都知道索引可以提高数据访问效率。为什么索引能提高数据访问性能?他会不会有“副作用”?是不是
- Web开发中,我们经常会遇到分页显示和排序数据记录集的情况,这在服务器端使用服务器端的代码和数据库技术是件很轻松的事情,比如:ASP、PHP
- ASCII(str) 返回字符串str的第一个字符的ASCII值(str是空串时返回0)mysql> select ASCII(
- 不得不承认,傲游在用户体验方面是做得比较好的,所以它的用户群非常大。也正因为如此,它的某些不好的特性也造成了开发人员不可忽略的浏览器兼容问题
- 问题当浏览SQL Server 2008的新特性时,我们看到了透明数据加密。这看起来很有趣。您能为我们解释一下并介绍下执行它的细节吗?专家解
- 前几天因为一个例外,数据库在没有做备份的情况下,直接删除了表记录。事后,又需要查询到删除的记录的内容。因此,在网上软件SS了半天,发现Log
- Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了
- “Lightbox”是一个别致且易用的图片显示效果,它可以使图片直接呈现在当前页面之上而不用转到新的窗口。lightbox效果网络上有很多j
- 例如1441,那么会产生“运行时错误”,报错信息类似下面:SessionID 错误 'ASP 0164 : 80004005'
- MS SQL Server 2000通过企业管理器设置数据库的定期自动备份计划。1、打开企业管理器,双击打开你的服务器2、然后点上面菜单中的