本文提供了一个使用XHTML 1.0 Strict标准与CSS进行网页布局的例子。通过绝对定位与浮动等技术实现图片轮播效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"><head profile="http://www.w3.org/2000/08/w3c-synd/#"><meta http-equiv="content-language" content="zh-cn" /><meta http-equiv="content-type" content="text/html;charset=gb2312" />
<style>...
dl {...}{ position:absolute; width:240px; height:170px; border:10px solid #eee;
}dd {...}{ margin:0; width:240px; height:170px; overflow:hidden; }img {...}{ border:1px solid black }dt {...}{ position:absolute; right:3px; top:50px; }a {...}{ display:block; margin:1px; width:20px; height:20px; text-align:center; font:700 12px/20px "宋体",sans-serif; color:#fff; text-decoration:none; background:#666; border:1px solid #fff; filter:alpha(opacity=40); opacity:.4; }a:hover {...}{ background:#000
}</style></head><body><dl><dt><a href="#a" title="">1</a><a href="#b" title="">2</a><a href="#c" title="">3</a></dt><dd><img src="http://www.blueidea.com/articleimg/2007/03/4549/1.jpg" alt="" title="" id="a" /><img src="http://www.blueidea.com/articleimg/2007/03/4549/2.jpg" alt="" title="" id="b" /><img src="http://www.blueidea.com/articleimg/2007/03/4549/3.jpg" alt="" title="" id="c" /></dd></dl></body></html>
扫一扫
758
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
