|
现在(x)html看起来就像这样：
<ul id="gallery">
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g1.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g2.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g3.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g4.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g5.jpg" alt="#5" title="#5" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g6.jpg" alt="#6" title="#6" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g7.jpg" alt="#7" title="#7" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g8.jpg" alt="#8" title="#8" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g9.jpg" alt="#9" title="#9" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g10.jpg" alt="#10" title="#10" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g11.jpg" alt="#11" title="#11" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g12.jpg" alt="#12" title="#12" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g13.jpg" alt="#13" title="#13" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g14.jpg" alt="#14" title="#14" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g15.jpg" alt="#15" title="#15" /></a></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g16.jpg" alt="#16" title="#16" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g17.jpg" alt="#17" title="#17" /></a></li>
<li class="pad"></li>
<li class="lft"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g18.jpg" alt="#18" title="#18" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g19.jpg" alt="#19" title="#19" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g20.jpg" alt="#20" title="#20" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g21.jpg" alt="#21" title="#21" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g22.jpg" alt="#22" title="#22" /></a></li>
<li><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g23.jpg" alt="#23" title="#23" /></a></li>
<li class="rgt"><a href="#nogo"><img src="http://sheneyan.com/image/article/css_gallery2/g24.jpg" alt="#24" title="#24" /></a></li>
</ul>
要确认每一个列表元素都是位于同一行，因为将他们分成多行将导致IE浏览器中显示出现不必要的空隙。
示例效果：
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
现在每个列表元素都封套了一个超链接。一些没有类的指定，而另一些有'lft'或者'rgt'，分别是'左'和'右'的缩写。我还增加了一个空的列表元素带有class="pad"用来修正ie的一个bug,呆会会有详细说明。
我使用href="#nogo"来代替常用的"#"，所以任何对超链接的点击都不会跳到页面的开头（只要确信你的页面中没有一个锚叫做#nogo就OK了）。
这个(x)html的无序列表现在已经完成了，我不再需要对它做任何修改。
出处：蓝色理想
责任编辑：moby
上一页 XHTML+CSS创建“两步式”的相册 [2] 下一页 XHTML+CSS创建“两步式”的相册 [4]
◎进入论坛网络编程版块参加讨论
|
第 1 页 
第 3 页 XHTML+CSS创建“两步式”的相册 [3]
