基本的(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
----------
文檔格式聲明 首先要作的,也是最重要的,就是確認(rèn)你使用了正確的(X)HTML !DOCTYPE,如果沒有這玩意兒,絕大部分的瀏覽器將會被拋入“quirks”模式并引出各種各樣的
不兼容問題。W3C QA - List of valid DTDs列出了所有能夠被引用的正確的文檔格式聲明。對于這個樣式表,使用XHTML1.0或者1.1會更加合適。我自己所有的網(wǎng)頁都使用XHTML1.1。
步驟3
----------
添加超鏈接和樣式信息 為了使用:hover偽類,我需要將這個基本的無序列表改變成一個超鏈接的無序列表。那是因為IE瀏覽器只允許:hover偽類在超鏈接上使用。我同樣需要添加額外的聲明來指向特定的圖片。
出處:藍色理想
責(zé)任編輯:moby
上一頁 XHTML+CSS創(chuàng)建“兩步式”的相冊 [1] 下一頁 XHTML+CSS創(chuàng)建“兩步式”的相冊 [3]
◎進入論壇網(wǎng)絡(luò)編程版塊參加討論
|