基本的(x)html列表如下:
<ul id="gallery"> <li><img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></li> <li><img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></li> </ul>
步骤2
----------
文档格式声明 首先要作的,也是最重要的,就是确认你使用了正确的(X)HTML !DOCTYPE,如果没有这玩意儿,绝大部分的浏览器将会被抛入“quirks”模式并引出各种各样的
不兼容问题。W3C QA - List of valid DTDs列出了所有能够被引用的正确的文档格式声明。对于这个样式表,使用XHTML1.0或者1.1会更加合适。我自己所有的网页都使用XHTML1.1。
步骤3
----------
添加超链接和样式信息 为了使用:hover伪类,我需要将这个基本的无序列表改变成一个超链接的无序列表。那是因为IE浏览器只允许:hover伪类在超链接上使用。我同样需要添加额外的声明来指向特定的图片。
出处:蓝色理想
责任编辑:moby
上一页 XHTML+CSS创建“两步式”的相册 [1] 下一页 XHTML+CSS创建“两步式”的相册 [3]
◎进入论坛网络编程版块参加讨论
|