zoukankan      html  css  js  c++  java
  • 用CSS实现WinVista风格的菜单代码

    代码简介:

    用CSS代码实现的Vista风格样式的菜单,是不是很清爽,美感十足,看了就很喜欢,圆角的菜单。

    代码内容:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1
    
    -transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>用CSS实现WinVista风格的菜单代码_网页代码站(www.webdm.cn)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <style type="text/css" />
    img{ border: 0pt; }
    #bottom_div{
     520px;
    height: 150px;
    background-color: #b9d1ea;
    clear:both;
    }
    
    #vista_toolbar {
    float:left;
    font:normal 12px 'Trebuchet MS','Arial';
    margin:0;
    padding:0;
    }
    
    #vista_toolbar ul {
    background-image:url(http://www.webdm.cn/images/20090922/back.gif);
    background-repeat:repeat-x;
    float:left;
    line-height:32px;
    list-style:none;
    margin:0;
    padding:0 10px 0 10px;
    500px;
    }
    
    #vista_toolbar li {
    display:inline;
    padding:0;
    }
    
    #vista_toolbar a {
    color:#FFF; 
    float:left;
    padding:0 3px 0 3px; 
    text-decoration:none;
    }
    
    #vista_toolbar a span {
    display:block;
    float:none;
    padding:0 10px 0 7px;
    }
    
    #vista_toolbar a span img {
    border:none;
    margin:8px 4px 0 0;
    }
    
    #vista_toolbar a:hover{
    background: url(http://www.webdm.cn/images/20090922/left.png) no-repeat left center;
    }
    
    #vista_toolbar a:hover span {
    background:url(http://www.webdm.cn/images/20090922/right.png) no-repeat right center;
    }
    
    #vista_toolbar a.right {
    float:right; /* for help button - just add class "right" ->  <a class="right"... */
    }
    </style>
    </head>
    <body>
    <div>
    </div>
    <div id="vista_toolbar">
    <ul>
    <li><a href="/"><span>网页代码站</span></a></li>
    <li><a href="/"><span>代码下载</span></a></li>
    <li><a href="/"><span>我的音乐</span></a></li>
    <li><a href="/"><span>我的日志</span></a></li>
    <li><a class="right" href="http://www.webdm.cn"><span>帮助</span></a></li>
    </ul>
    </div>
    <div id="bottom_div">
     Welcome to WebDm.cn</div>
    </body>
    </html>
    <br>
    <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!
    

    代码来自:http://www.webdm.cn/webcode/064a61fe-a616-4c1f-af1c-7472a400ef44.html

  • 相关阅读:
    矩阵图
    博客园评价
    团队冲刺
    团队冲刺
    第二阶段团队冲刺
    团队博客
    团队冲刺
    总结会议
    会议10
    会议09
  • 原文地址:https://www.cnblogs.com/webdm/p/2024653.html
Copyright © 2011-2022 走看看