| <!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"> |
| |
|
| |
<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> |
| |
|
| |
</div> |
| |
</body> |
| |
</html> |