效果预览：http://hovertree.com/code/texiao/ks63r6aq.htm

  1.  <!DOCTYPE html>
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <title>超漂亮的HTML导航菜单CSS代码 - 何问起</title>
  5.      <style>
  6.          #top {
  7.              display: block;
  8.              text-align: left;
  9.              height: 105px;
  10.              position: relative;
  11.              z-index: 0;
  12.          }
  13.  
  14.          .m {
  15.              margin: 0 auto;
  16.              width: 970px;
  17.          }
  18.  
  19.          body {
  20.              font-size: 12px;
  21.          }
  22.  
  23.          a {
  24.              color: #333;
  25.              text-decoration: none;
  26.          }
  27.  
  28.              a:link {
  29.                  text-decoration: none;
  30.              }
  31.              /* Download by http://hovertree.com*/
  32.              a.blue:link, a.blue:visited {
  33.                  color: #014cc9;
  34.                  text-decoration: none;
  35.              }
  36.  
  37.              a.blue:hover, a.blue:active {
  38.                  color: #014cc9;
  39.                  text-decoration: underline;
  40.              }
  41.  
  42.              a.org:link, a.org:visited {
  43.                  color: #ff4e00;
  44.                  text-decoration: none;
  45.              }
  46.  
  47.              a:hover, a:active, a.org:hover, a.org:active {
  48.                  color: #ff4e00;
  49.                  text-decoration: underline;
  50.              }
  51.  
  52.          #navpart {
  53.              background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) repeat-x center top;
  54.              height: 105px;
  55.              width: 950px;
  56.              z-index: 0;
  57.              margin-top: 0;
  58.              margin-right: auto;
  59.              margin-bottom: 0;
  60.              margin-left: auto;
  61.              clear: both;
  62.              position: relative;
  63.          }
  64.  
  65.              #navpart .sideleft {
  66.                  background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) no-repeat left bottom;
  67.                  float: left;
  68.                  height: 105px;
  69.                  width: 6px;
  70.              }
  71.  
  72.              #navpart .sideright {
  73.                  background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) no-repeat right bottom;
  74.                  float: right;
  75.                  height: 105px;
  76.                  width: 6px;
  77.              }
  78.  
  79.          #navmenubar {
  80.              height: 32px;
  81.              float: left;
  82.              display: inline;
  83.              margin: 0 -6px;
  84.              width: 100%;
  85.              position: relative;
  86.              z-index: 3;
  87.              top: 0;
  88.          }
  89.  
  90.          #hot {
  91.              background: url(http://hovertree.com/hvtimg/201508/7qmwfe9p.png) no-repeat left top;
  92.              height: 21px;
  93.              width: 19px;
  94.              position: absolute;
  95.              top: -5px;
  96.              right: 2px;
  97.              z-index: 666;
  98.              background:black;
  99.          }
  100.  
  101.          #navmenubar .sideleft {
  102.              background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) no-repeat left bottom;
  103.              float: left;
  104.              height: 32px;
  105.              width: 6px;
  106.              display: inline;
  107.              margin: 0 0 0 8px;
  108.          }
  109.  
  110.          #navmenubar .sideright {
  111.              background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) no-repeat right bottom;
  112.              float: left;
  113.              height: 32px;
  114.              width: 6px;
  115.              display: inline;
  116.              margin: 0 4px 0 -2px;
  117.          }
  118.          /* NAVMENU */
  119.          #navmenubar .navmenu {
  120.              background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) repeat-x center top;
  121.              height: 32px;
  122.              padding: 0;
  123.              margin: 0;
  124.              float: left;
  125.              display: inline;
  126.          }
  127.  
  128.              #navmenubar .navmenu li {
  129.                  float: left;
  130.                  white-space: nowrap;
  131.                  margin: 0px;
  132.                  padding: 0px;
  133.                  display: inline;
  134.              }
  135.  
  136.                  #navmenubar .navmenu li a {
  137.                      background: url(http://hovertree.com/hvtimg/bjafjb/d46iuj2w.gif) no-repeat 0 0;
  138.                      width: 80px;
  139.                      padding: 7px 2px 5px 0;
  140.                      float: left;
  141.                      line-height: 20px;
  142.                      height: 20px;
  143.                      text-align: center;
  144.                  }
  145.  
  146.                      #navmenubar .navmenu li a:hover {
  147.                          background-position: 0 -32px;
  148.                          color: #602800;
  149.                          text-decoration: none;
  150.                          padding: 8px 2px 4px 0;
  151.                      }
  152.  
  153.              #navmenubar .navmenu .current a, #navmenubar .navmenu .current a:hover {
  154.                  background: url(http://hovertree.com/hvtimg/bjafjb/d46iuj2w.gif) no-repeat 0 -64px;
  155.                  font-weight: 600;
  156.                  color: #FFF;
  157.                  font-size: 14px;
  158.                  padding: 7px 2px 5px 0;
  159.              }
  160.  
  161.          #top #navpart .content {
  162.              margin-top: 40px;
  163.              margin-right: auto;
  164.              margin-bottom: 0px;
  165.              margin-left: auto;
  166.              width: 900px;
  167.              height: auto;
  168.              color: white;
  169.          }
  170.  
  171.              #top #navpart .content a {
  172.                  color: white;
  173.                  display: inline-block;
  174.                  margin-top: 0px;
  175.                  height: 30px;
  176.                  border: 0px solid white;
  177.                  line-height: 30px;
  178.                  padding: 10px;
  179.              }
  180.  
  181.          .clear {
  182.              clear: both;
  183.              display: block;
  184.              font: 0px/0 sans-serif;
  185.              height: 0px;
  186.              overflow: hidden;
  187.          }
  188.      </style>
  189.  
  190.  </head>
  191.  <body>
  192.      <div id="top" class="m">
  193.          <div id="navpart">
  194.              <div class="sideleft"></div>
  195.              <div class="sideright"></div>
  196.              <!--NavMenu-->
  197.              <div id="navmenubar">
  198.                  <div class="sideleft"></div>
  199.                  <ul class="navmenu">
  200.                      <li class="current"><a href="http://hovertree.com" target="_top" title="首页">何问起</a></li>
  201.                      <li><a href="http://hovertree.com/"><span>编程资源</span></a></li>
  202.                      <li><a href="http://hovertree.com"><span>高质量源码</span></a></li>
  203.                  </ul>
  204.                  <div class="sideright"></div>
  205.                  <div class="sideleft"></div>
  206.                  <ul class="navmenu">
  207.                      <li><a href="http://tool.hovertree.com"><span>工具</span></a></li>
  208.                      <li><a href="http://hovertree.com/code/"><span>代码</span></a></li>
  209.                      <li><a href="http://keleyi.com"><span>jQuery教程</span></a></li>
  210.                      <li><a href="http://hovertree.com/tiku/"><span>在线题库</span></a></li>
  211.                  </ul>
  212.                  <div class="sideright"></div>
  213.                  <div>
  214.                      <div class="content">
  215.                          <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="http://hovertree.com/ziyuan/js/" target="_blank">JS运算符优先级</a>
  216.   <a href="http://hovertree.com/code/texiao/ks63r6aq.htm" target="_blank">特效代码</a> <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="http://hovertree.com/" target="_blank">特效代码</a><a href="http://hovertree.com/hvtart/bjae/e4pya1x0.htm" target="_blank">.NET正则表达式</a>
  217.   <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="keleyi.com/ziliao/googlejavascriptstyle.htm" target="_blank">谷歌JS风格</a> <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="http://hovertree.com/" target="_blank">特效代码</a> <a href="http://hovertree.com/h/bjaf/nebj8df9.htm" target="_blank">js实现异步循环</a>
  218.  
  219.                      </div>
  220.                  </div>
  221.              </div>
  222.          </div>
  223.      </div>
  224.      <div class="clear"></div>
  225.  </body>
  226.  </html>

网页特效：http://www.cnblogs.com/roucheng/p/texiao.html

HTML+CSS代码橙色导航菜单的更多相关文章

  1. 纯css实现京东导航菜单

    纯CSS代码实现导航菜单,推荐在chrome预览! 预览请点击这里:mygithub <!doctype html> <html lang="en"> &l ...

  2. 用css实现三级导航菜单

    主要使用css的hover伪类来实现该功能. 主要思路:先搭出三级菜单的框架,然后使用css的:hover来实现! 对li添加类selected,对该类添加position:relative属性,然后 ...

  3. 简单的CSS 下拉导航菜单实现代码

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <met ...

  4. 纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,

    HTML代码如下 <!-- 头部导航栏开始--><div id="nav"><dl class="sy"><dt> ...

  5. 纯CSS下拉导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="h ...

  6. 利用Html.css OPPO手机导航菜单的制作解析

    <body> <div id="top" class="auto"> <div class="nav"> ...

  7. 38 个免费开源的 CSS 下拉导航菜单

    http://www.oschina.net/news/51624/38-open-source-css-dropdown-menus

  8. 纯CSS 3D翻转一个面（翻转导航菜单 立方体）

    在做练习的时候学到css的翻转导航菜单,原代码有点让人头疼,通过对其css的参数一点点研究了其实现过程. 这里推荐大家研究这个3D翻转动画的代码. 我的github:swarz,欢迎给老弟我++星星 ...

  9. 用CSS做导航菜单的4个理由

    导航结构在网站设计中是起到决定性作用的,导航菜单/栏常常通过颜色.排版.形状和一些图片来帮助网站创造更好的视觉和感受,它是网页设计的关键元素.虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的 ...

随机推荐

  1. android服务里生成通知点击后返回正在运行的程序和当前的Activity

    想在服务里生成一个通知,并且点击通知打开当前应用程序下单当前活动,折腾了半天,网上的那些都不靠谱,试了半天,最后把ActivityManager和反射都用进来了,终于解决了这个问题.这样在服务中想恢复 ...

  2. ASP.NET MVC 5 - 将数据从控制器传递给视图

    在我们讨论数据库和数据模型之前,让我们先讨论一下如何将数据从控制器传递给视图.控制器类将响应请求来的URL.控制器类是给您写代码来处理传入请求的地方,并从数据库中检索数据,并最终决定什么类型的返回结果 ...

  3. [ASP.NET MVC 小牛之路]11 - Filter

    Filter(筛选器)是基于AOP(面向方面编程)的设计,它的作用是对MVC框架处理客户端请求注入额外的逻辑,以非常简单优美的方式实现横切关注点(Cross-cutting Concerns).横切关 ...

  4. spark参数调优

    摘要 1.num-executors 2.executor-memory 3.executor-cores 4.driver-memory 5.spark.default.parallelism 6. ...

  5. 常用RGB色值表

      R G B 值   R G B 值   R G B 值 黑色 0 0 0 #000000 黄色 255 255 0 #FFFF00 浅灰蓝色 176 224 230 #B0E0E6 象牙黑 41 ...

  6. 使用Java纯代码实现MySQL的连接

      建立数据库 1. 点击连接-->MySQL: 输入连接名 . 主机名/IP地址 .端口 .用户名.密码(没有密码就省略),然后点击确定,建立的表格是灰色表示关闭状态,双击开启 2. 重新创建 ...

  7. iOS瀑布流实现(Swift)

    这段时间突然想到一个很久之前用到的知识-瀑布流,本来想用一个简单的方法,发现自己走入了歧途,最终只能狠下心来重写UICollectionViewFlowLayout.下面我将用两种方法实现瀑布流,以及 ...

  8. Linux线程体传递参数的方法详解

    传递参数的两种方法 线程函数只有一个参数的情况:直接定义一个变量通过应用传给线程函数. 例子 #include #include using namespace std; pthread_t thre ...

  9. WPF MVVM框架下，VM界面写控件

    MVVM正常就是在View页面写样式,ViewModel页面写逻辑,但是有的时候纯在View页面写样式并不能满足需求.我最近的这个项目就遇到了,因此只能在VM页面去写样式控件,然后绑定到View页面. ...

  10. SQL 联合查询 + XML解析

    (select a.EBILLNO, a.EMPNAME, a.APPLYDATE, b.HS_NAME, ), ),'') as SUMMARY, cast(c.XmlData as XML).va ...