设为首页收藏本站
开启辅助访问
合元网络
 

默认版块

 您所在的位置：合元网络»|||默认版块222222论坛 › 代码学习 › 默认版块 › CSS3立体飘带状菜单  
打印 上一主题 下一主题

CSS3立体飘带状菜单

查看: 1208 发表于 2016-10-14 22:10:40 [复制链接]
CSS3立体飘带状菜单，该菜单鼠标滑过时，菜单项向上立体凸起，结合黑色的木质背景，整个菜单显得非常立体生动。


  2. <!DOCTYPE html>
  3. <html>
  4.         <head>
  5.                 <meta charset='utf-8'/>
  6.                 <title>CSS Ribbon</title>
  7.                 <style>
  8.                         * {
  9.                                 /* Basic CSS reset */
  10.                                 margin:0;
  11.                                 padding:0;
  12.                         }

  14.                         body {
  15.                                 /* These styles have nothing to do with the ribbon */
  16.                                 background:url(dark_wood.png) 0 0 repeat;
  17.                                 padding:35px 0 0;
  18.                                 margin:auto;
  19.                                 text-align:center;
  20.                         }

  22.                         .ribbon {
  23.                                 display:inline-block;
  24.                         }

  26.                         .ribbon:after, .ribbon:before {
  27.                                 margin-top:0.5em;
  28.                                 content: "";
  29.                                 float:left;
  30.                                 border:1.5em solid #fff;
  31.                         }

  33.                         .ribbon:after {
  34.                                 border-right-color:transparent;
  35.                         }

  37.                         .ribbon:before {
  38.                                 border-left-color:transparent;
  39.                         }

  41.                         .ribbon a:link, .ribbon a:visited {
  42.                                 color:#000;
  43.                                 text-decoration:none;
  44.                             float:left;
  45.                             height:3.5em;
  46.                                 overflow:hidden;
  47.                         }

  49.                         .ribbon span {
  50.                                 background:#fff;
  51.                                 display:inline-block;
  52.                                 line-height:3em;
  53.                                 padding:0 1em;
  54.                                 margin-top:0.5em;
  55.                                 position:relative;

  57.                                 -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
  58.                                 -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
  59.                                 -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
  60.                                 -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
  61.                                 transition: background-color 0.2s, margin-top 0.2s;
  62.                         }

  64.                         .ribbon a:hover span {
  65.                                 background:#FFD204;
  66.                                 margin-top:0;
  67.                         }

  69.                         .ribbon span:before {
  70.                                 content: "";
  71.                                 position:absolute;
  72.                                 top:3em;
  73.                                 left:0;
  74.                                 border-right:0.5em solid #9B8651;
  75.                                 border-bottom:0.5em solid #fff;
  76.                         }

  78.                         .ribbon span:after {
  79.                                 content: "";
  80.                                 position:absolute;
  81.                                 top:3em;
  82.                                 right:0;
  83.                                 border-left:0.5em solid #9B8651;
  84.                                 border-bottom:0.5em solid #fff;
  85.                         }

  87.                 </style>
  88.         </head>
  89.         <body>
  90.                 <div class='ribbon'>
  91.                         <a href='#'><span>Home</span></a>
  92.                         <a href='#'><span>About</span></a>
  93.                         <a href='#'><span>Services</span></a>
  94.                         <a href='#'><span>Contact</span></a>
  95.                 </div>

  97.                 <script src="/follow.js" type="text/javascript"></script>
  98.                 <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>

  100.                 <div style="width:700px;margin:10px auto 20px auto;padding:0 0 0 380px;overflow:hidden">
  101. <!-- Baidu Button BEGIN -->
  102.     <div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare" style="margin:10px 0 0 -4px">
  103.         <a class="bds_tsina"></a>
  104.         <a class="bds_tqq"></a>
  105.         <a class="bds_renren"></a>
  106.         <a class="bds_qzone"></a>
  107.         <a class="bds_douban"></a>
  108.         <a class="bds_xg"></a>
  109.         <span class="bds_more">更多</span>
  110.                 <a class="shareCount"></a>
  111.     </div>
  112. <script type="text/javascript" id="bdshare_js" data="type=tools" ></script>
  113. <script type="text/javascript" id="bdshell_js"></script>
  114. <script type="text/javascript">
  115.     document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours
  116. ();
  117. </script>
  118. <!-- Baidu Button END -->
  119. </div>
  120.         </body>
  121. </html>
复制代码


回复

— 产品中心 —

PRODUCT CENTER

— 产品中心 —

PRODUCT CENTER
增值服务　|　搜索推广　|　营销优化　|　合作案例　|　建站相关　|　关于我们　|　联系我们　|　首页大图　|　
CopyRight 2012-2017 合元网络 版权所有
公司地址：郑州市高新区升龙又一城A区2号楼2单元17楼　热线电话：15303843903　豫ICP备14027215号
快速回复 返回列表