|
菜单的点击颜色变化效果采用链接的hover样式，不再需要JavaScript。 我设置页头的蝴蝶图片为<h1>的背景，这样可以不用担心易用性，在不能显示图片的设备中(如屏幕阅读机和搜索机器人)也可以正常阅读标题。 第2小时 菜单的第一项(HOME)使用一个不同的图标，我不得不隐藏原来的背景，为HOME菜单增加一个额外的id(frst): #hMenu ul li#frst 再另外一个(CONTACT)图标： background: transparent url(menuBullet3.gif) no-repeat 615px 9px; 我无法用CSS控制2列有一样的高度，幸运的是，我可以用背景图片来变通实现。我定义了"container"纵向重复背景。 background: #fff url(bgMain.gif) repeat-y;  第3小时 CSS定义盒比表格方便多了，特别是边框的许多属性非常有用。 现在我开始定义<h2>标题。图标的定义和上面的方法一样。 我将"news"层浮动(float)在"sightings" 和 "membership"的右面。 定义"copyright"层" clear: both;"，这样它可以跟在浮动层的下面。将正文中的蝴蝶图片浮动在右面，文字可以自动环绕在图片周围。定义图片的1px border和设置padding距离就可以实现原来2个表格嵌套的效果。 又发现一些问题：版权层与内容层有部分重叠。 第4小时 显示的错误与"sightings" and "membership"的float:right; 定义有关。将它们浮动在左面就可以解决这个问题，这看上去很奇怪。我用firefox进行第一次测试，恩，看上去还不坏，只是菜单的图标有几pixel的移位。 有一些CSS技巧可以修正在非IE浏览器的显示效果，例如给不同浏览器不同的属性值。 我同一元素定义中使用了!important 值，相同的定义写在前面可以优先执行，这个值不被IE浏览器支持。 background: url(menuBullet2.gif) no-repeat 4px 6px !important;
background: url(menuBullet2.gif) no-repeat 4px 9px; 在CSS中，如果同一元素有多个定义，最后一个是有效的。但是因为IE不支持!important，所以IE将使用第二个定义值，而其他浏览器将采用第一个定义值。 全部完成，看这里的结果。 结论基于表格的设计 我用各种能找到的浏览器来测试页面，包括linux、windows和Macintosh平台的浏览器。表格布局的页面在不同浏览器中看上去都一样。"它象岩石一样坚固"，这是给表格布局的第一评价。 上一页 [1] [2] [3] [4] [5] [6] 下一页
|
