zoukankan      html  css  js  c++  java
  • 纯CSS仿迅雷首页的菜单导航代码

    代码简介:

    这个导航条做的不错,是模仿迅雷视频网站的,完全基于CSS和HTML代码,大气清新,请运行一下看看效果如何。

    代码内容:

    <!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">
    <head>
    <title>纯CSS仿迅雷首页的菜单导航代码_网页代码站(www.webdm.cn)</title>
    <style type="text/css">
    body{margin:0px;font-size:13px; font-family:Verdana, Arial, Helvetica, sans-serif}
    #nav{position:relative;964px;height:95px;z-index:1px;margin:10px auto; background:url(http://www.webdm.cn/images/20101214/1/kkindex_nav.png)}
    #navli{position:absolute;580px;height:32px;left:35px;top:-2px;}
    ul {margin:0;}
    .dh li{72px;height:30px; float:left;position:relative; line-height:30px;zoom:1;list-style:none;text-align:center; background:url

    (http://www.webdm.cn/images/20101214/1/kkindex_nav.png) no-repeat; background-position:-125px -99px}
    .dh li a{color:#000000; text-decoration:none}
    .dh li a:hover{zoom:1;color:#ffffff;text-decoration:none; font-weight:bold; background:url(http://www.webdm.cn/images/20101214/1/kkindex_nav.png) no-repeat 0 -95px;

    72px; height:30px;}
    .dhhome{background:url(http://www.webdm.cn/images/20101214/1/kkindex_nav.png) no-repeat 0 -95px;72px;height:30px;zoom:1;color:#ffffff !important; font-

    weight:bold}
    .dhright{position:absolute;280px;height:31px;left:680px;top:-2px; text-align:center; line-height:30px;}
    .dhrightimg{ position:absolute;right:-4px; top:10px;background:url(http://www.webdm.cn/images/20101214/1/kkindex_nav.png) no-repeat; background-position:-954px -115px;

    padding-right:15px; 10px;height:10px;}
    </style>
    </head>

    <body>
    <div id="nav">
      <div id="navli">
        <ul class="dh">
        <li><a href="/" class="dhhome">首页</a></li>
        <li><a href="http://www.webdm.cn/">电影</a></li>
        <li><a href="http://www.webdm.cn/">电视剧</a></li>
        <li><a href="http://www.webdm.cn/">综艺</a></li>
        <li><a href="http://www.webdm.cn/">动漫</a></li>
        <li><a href="http://www.webdm.cn/">漫画</a></li>
        <li><a href="http://www.webdm.cn/">娱乐</a></li>
        </ul>
      </div>
      <div class="dhright">
       大片 - 首播 - 新片 - 客服论坛 - 更多  
      <div class="dhrightimg"></div></div>
    </div>
               <br />
        <p>
            <a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>
    </body>
    </html>
    代码来自:http://www.webdm.cn/webcode/ec39beaa-aab8-41d5-89dd-6ea7d6b65730.html
  • 相关阅读:
    FaceBook API
    CAP – Consistency, Availability, Partition Tolerance
    Hypothesis Testing
    MOSS 2007中如何添加VariationsLabelMenu来在不同语言的variation间切换?
    用Windows 2008 R2做工作机遇到的IE的安全问题
    如何使用Notepad++快速整理挤在一起的CallStack信息(将换行符作为被替换的内容)
    Managed Metadata Service介绍系列 之四
    MOSS 2007捞取ConfigDB中的数据, 得到内部名所对应的timer job的title及运行状况
    Log Parser分析IIS log的举例
    EventCache表太大, 怎么办?
  • 原文地址:https://www.cnblogs.com/webdm/p/2109460.html
Copyright © 2011-2022 走看看