zoukankan      html  css  js  c++  java
  • 带个形象小图标的黑色水平CSS菜单

    演示效果截图

     带个形象小图标的黑色水平CSS菜单

    用到的图片

     

    CSS代码

    body{background:#FFF;font-family:Verdana, Arial, Helvetica,
    sans-serif;font-size:80%;color:#000;margin:0;vertical-align:top}
    img{border:0;vertical-align:middle}
    a:link{color:#00248A;text-decoration:none}
    a:visited{color:#4b6bc6;text-decoration:none}
    a:hover{color:#FFF;background-color:#2E6AB1}
    #top{border-bottom:7px solid #3b3b3b;
    background:#000 url(headerblackbackground.gif)
     repeat-x center top;}
    #header{height:80px;vertical-align:bottom;margin-left:20px}
    #header #tabs{float:left;margin-top:50px;height:32px}
    .tabsheader{font-family:verdana,arial,Trebuchet MS,tahoma,arial,
    verdana,tahoma,verdana,sans-serif;font-size:100%;color:#000;
    clear:both;text-align:center}
    .tabsheader ul{display:inline;list-style-type:none;margin:0;padding:0}
    .tabsheader li{float:left}
    .tabsheader a,.tabsheader a:visited{87px}
    .tabsheader a.current:visited,.tabsheader a.current,
    .tabsheader a.current:hover{84px;position:relative;float:left;
    margin-right:2px;background:url(tabsdark.gif);color:#FFF;
    padding-top:6px;height:24px}
    .tabsheader a.current:visited img,.tabsheader a:hover img{}
    .tabsheader a{84px;position:relative;float:left;margin-right:2px;
    background-image:url(tabsdark.gif);background-position:-87px 0;
    padding-top:8px;color:#dedede;height:24px}
    .tabsheader a:visited{color:#dedede}
    .tabsheader a img{}
    .tabsheader a:hover{top:0;background-image:url(tabsdark.gif);
    background-position:-175px 0;padding-top:6px;height:24px;color:#FFF;
    background-color:transparent}
    :link:focus,:visited:focus{-moz-outline:0}

    HTML代码

    <div id="top">
    <div id="header">
    <div id="tabs">
    <div class="tabsheader" id="chromemenu">
    <ul>
    <li><a href="http://www.865171.cn">
    <img src="images/movie_16.gif">&nbsp;Movies</a></li>
    <li><a href="http://www.865171.cn">
    <img src="images/tv_16.gif">&nbsp;TV</a></li>
    <li><a href="http://www.865171.cn">
    <img src="images/disc-media_16.gif">&nbsp;DVDs</a></li>
    <li><a href="http://www.865171.cn">
    <img src="images/history_16.gif">&nbsp;Books</a></li>
    <li><a href="http://www.865171.cn">
    <img src="images/music_16.gif">&nbsp;Music</a></li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    <div style="padding-left:20px;">
    <a href="http://www.865171.cn" target=_blank>
    <h3>www.865171.cn</h3></a>
    </div>
  • 相关阅读:
    Spring+SpringMVC+MyBatis深入学习及搭建(二)——MyBatis原始Dao开发和mapper代理开发
    Spring+SpringMVC+MyBatis深入学习及搭建(一)——MyBatis的基础知识
    Hibernate HQL语句
    spring的IO原理
    jsp概述
    java的常用接口
    java各种内部类
    Serlvet 处理http请求并保持长连接
    JVM高级特性与实践(一):Java内存区域 与 内存溢出异常
    JVM高级特性与实践(二):对象存活判定算法(引用) 与 回收
  • 原文地址:https://www.cnblogs.com/luluping/p/1542063.html
Copyright © 2011-2022 走看看