本例在CSS中使用"滑動門"技術設定玻璃材質背景的水平導覽功能表,代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>使用滑動門技術實現半透明效果菜單</title><style type="text/css">.menu {font-family:Arial;font-size:14px;width:0 auto 0 0;background:url(under.gif);}.menu ul {padding:0 0 0 8px;margin:0;list-style:none;height:35px;display:block;width:500px;}.menu ul li {float:left;}.menu ul li a {display:block;line-height:35px;color:#DDDDDD;text-decoration:none;padding:0 0 0 14px;float:left; //相容IE}.menu ul li a:hover {color:#FFFFFF;background:url(hover.gif);}.menu ul li a b {display:block;padding:0 14px 0 0;}.menu ul li a:hover b {color:#FFFFFF;background:url(hover.gif) no-repeat right top;}</style></head><body><div class="menu"><ul><li><a href="#"><b>Home</b></a></li><li><a href="#"><b>Connect</b></a></li><li><a href="#"><b>Web Dev</b></a></li><li><a href="#"><b>Web Design</b></a></li><li><a href="#"><b>Map</b></a></li></ul></div></body></html>
素材下載： http://files.cnblogs.com/likebeta/201205292522870.zip
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
