使用CSS雙層滑動門技術實現三態半透明效果水平導覽功能表

來源:互聯網
上載者:User
<!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 ul {    font-family:Arial;    font-size:14px;    padding:0 0 0 8px;    margin:0 auto;    list-style:none;    height:35px;    white-space:nowrap; //防止IE下單個功能表項目中間折行}.menu ul li {    float:left;    margin:0 2px;}.menu ul li a {    display:block;    float:left;    line-height:35px;    color:#666666;    text-decoration:none;    padding:0 0 0 14px;    background:url(three-state-navi-background.gif);}.menu ul li a b {    display:block;    padding:0 14px 0 0;    background:url(three-state-navi-background.gif) no-repeat right top;}.menu ul li a:hover {    color:#FFFFFF;    background:url(three-state-navi-background.gif) no-repeat left center;}.menu ul li a:hover b {    background:url(three-state-navi-background.gif) no-repeat right center;}.menu ul li.current a { //對當前頁面連結所在功能表項目進行特殊設定    color:#FFFFFF;    background:url(three-state-navi-background.gif) no-repeat left bottom;}.menu ul li.current a b {    background:url(three-state-navi-background.gif) no-repeat right bottom;}.menu ul li.current a:hover {    background:url(three-state-navi-background.gif) no-repeat left bottom;    cursor:default;}.menu ul li.current a:hover b {    background:url(three-state-navi-background.gif) no-repeat right bottom;}</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 class="current"><a href="#"><b>Map</b></a></li></ul></div></body></html>

素材下載:http://files.cnblogs.com/likebeta/201205292523211.zip

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.