| <!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="width: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> |
相关文章：