zoukankan      html  css  js  c++  java
  • 书签导航(收藏起来以后用)

    <!DOCTYPE html>
      <html>
      <head>
      <meta charset='utf-8'/>
      <title>CSS Ribbon</title>
      <style>
      * {
      /* Basic CSS reset */
      margin:0;
      padding:0;
      }
       
      body {
      /* These styles have nothing to do with the ribbon */
      background:url(dark_wood.png) 0 0 repeat;
      padding:35px 0 0;
      margin:auto;
      text-align:center;
      }
       
      .ribbon {
      display:inline-block;
      }
       
      .ribbon:after, .ribbon:before {
      margin-top:0.5em;
      content: "";
      float:left;
      border:1.5em solid #fff;
      }
       
      .ribbon:after {
      border-right-color:transparent;
      }
       
      .ribbon:before {
      border-left-color:transparent;
      }
       
      .ribbon a:link, .ribbon a:visited {
      color:#000;
      text-decoration:none;
      float:left;
      height:3.5em;
      overflow:hidden;
      }
       
      .ribbon span {
      background:#fff;
      display:inline-block;
      line-height:3em;
      padding:0 1em;
      margin-top:0.5em;
      position:relative;
       
      -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
      -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
      -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
      -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
      transition: background-color 0.2s, margin-top 0.2s;
      }
       
      .ribbon a:hover span {
      background:#FFD204;
      margin-top:0;
      }
       
      .ribbon span:before {
      content: "";
      position:absolute;
      top:3em;
      left:0;
      border-right:0.5em solid #9B8651;
      border-bottom:0.5em solid #fff;
      }
       
      .ribbon span:after {
      content: "";
      position:absolute;
      top:3em;
      right:0;
      border-left:0.5em solid #9B8651;
      border-bottom:0.5em solid #fff;
      }
       
      </style>
      </head>
      <body>
      <div class='ribbon'>
      <a href='#'><span>Home</span></a>
      <a href='#'><span>About</span></a>
      <a href='#'><span>Services</span></a>
      <a href='#'><span>Contact</span></a>
      </div>
       
      <script src="/follow.js" type="text/javascript"></script>
      <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
       
      <div style="700px;margin:10px auto 20px auto;padding:0 0 0 380px;overflow:hidden">
      <!-- Baidu Button BEGIN -->
      <div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare" style="margin:10px 0 0 -4px">
      <a class="bds_tsina"></a>
      <a class="bds_tqq"></a>
      <a class="bds_renren"></a>
      <a class="bds_qzone"></a>
      <a class="bds_douban"></a>
      <a class="bds_xg"></a>
      <span class="bds_more">����</span>
      <a class="shareCount"></a>
      </div>
      <script type="text/javascript" id="bdshare_js" data="type=tools" ></script>
      <script type="text/javascript" id="bdshell_js"></script>
      <script type="text/javascript">
      document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + new Date().getHours
      ();
      </script>
      <!-- Baidu Button END -->
      </div>
      </body>
      </html>
  • 相关阅读:
    解决文字溢出,换行等问题
    js获取年、月、日、时、分、秒
    JQuery EasyUI DataGrid动态合并单元格
    JQuery EasyUI Combobox联动
    JQuery EasyUI 读取设置input
    JQuery EasyUI DataGrid获取当前行索引及快速清空
    jQuery EasyUI combobox多选及赋值
    JQuery EasyUI DataGrid 、tree查询
    HTML元素ID和Name区别
    JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式(转)
  • 原文地址:https://www.cnblogs.com/mayicom/p/3802916.html
Copyright © 2011-2022 走看看