zoukankan      html  css  js  c++  java
  • 亮蓝色水平CSS选项卡菜单

    演示效果截图

    亮蓝色水平CSS选项卡菜单

    用到的图片

    
    

    CSS代码

    body{background:#fff url(bkg_page.png) repeat-x;padding:0;
    margin:0;font-family:'Verdana';font-size:12px;color:#7f8991}
    #header{margin:108px 0 0 100px}
    #header em{display:none}
    #header ul{100%;float:left;
    padding:0;margin:0;list-style-type:none}
    #header li{float:left;padding:0;margin:0;display:inline}
    #header li a{display:block;height:46px}
    #header li a.home{
    background:url(menu_01.png) no-repeat left top;52px}
    #header li a.homeActive{
    background:url(menu_01.png) no-repeat left bottom;52px}
    #header li a.gallery{
    background:url(menu_02.png) no-repeat left top;60px}
    #header li a.galleryActive{
    background:url(menu_02.png) no-repeat left bottom;60px}
    #header li a.resources{
    background:url(menu_03.png) no-repeat left top;76px;
    margin:0;padding:0}
    #header li a.resourcesActive{
    background:url(menu_03.png) no-repeat left bottom;76px}
    #header li a.submit{
    background:url(menu_04.png) no-repeat left top;97px}
    #header li a.submitActive{
    background:url(menu_04.png) no-repeat left bottom;97px}
    #header li a.feed{
    background:url(menu_05.png) no-repeat left top;68px}
    #header li a.feedActive{
    background:url(menu_05.png) no-repeat left bottom;68px}
    #header li a.about{
    background:url(menu_06.png) no-repeat left top;52px}
    #header li a.aboutActive{
    background:url(menu_06.png) no-repeat left bottom;52px}
    #header li a.blog{
    background:url(menu_10.png) no-repeat left top;51px}
    #header li a.blogActive{
    background:url(menu_10.png) no-repeat left bottom;51px}
    #header li a.contact{
    background:url(menu_07.png) no-repeat left top;64px}
    #header li a.contactActive{
    background:url(menu_07.png) no-repeat left bottom;64px}
    #header li a:hover{
    background-position:left bottom}

    HTML代码

    <div style="position:absolute;top:30px;left:10px;
    height:70px;overflow:hidden;padding-left:100px;">
    <h3>www.865171.cn</h3>
    </div>
    <div id="header">
    <ul>
    <li><a class="homeActive" href="http://www.865171.cn/">
    <em>home</em></a></li>
    <li><a class="gallery" href="http://www.865171.cn/">
    <em>gallery entries</em></a></li>
    <li><a class="resources" href="http://www.865171.cn/">
    <em>resources</em></a></li>
    <li><a class="submit" href="http://www.865171.cn/">
    <em>submit a site</em></a></li>
    <li><a class="feed" href="http://www.865171.cn/">
    <em>our feed</em></a></li>
    <li><a class="blog" href="http://www.865171.cn/">
    <em>blog</em></a></li>
    </ul>
    </div>
  • 相关阅读:
    html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
    HTMl5的存储方式sessionStorage和localStorage详解
    浏览器文档模式设置
    页面缓存
    SQL Server死锁总结
    读写分离,读写分离死锁解决方案,事务发布死锁解决方案,发布订阅死锁解决方案
    页面缓存
    HTML5 history API,创造更好的浏览体验
    【转】编写高质量代码改善C#程序的157个建议——建议96:成员应优先考虑公开基类型或接口
    【转】编写高质量代码改善C#程序的157个建议——建议95:避免在构造方法中调用虚成员
  • 原文地址:https://www.cnblogs.com/luluping/p/1542065.html
Copyright © 2011-2022 走看看