左上角Banner

很早以前就看到网上有这样的效果了，左上角来个横条

在网站 http://demo.doyoe.com/ 上又看到了，把效果单独扣下来了，和大家一起分享

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<HTML lang=zh-cn>
<HEAD>
<TITLE> Examples</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<style>
#top_right {
	POSITION: fixed; TEXT-ALIGN: /** 注释*/ 
	center; FILTER: 
	progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=.7,M12=0.6,M21=-.7,M22=0.6); 
	BACKGROUND-COLOR: #333; 
	WIDTH: 200px; 
	DISPLAY: block; 
	FONT: bold 14px/28px georgia, sans-serif; 
	HEIGHT: 28px; 
	COLOR: #fff; 
	TOP: -20px; 
	RIGHT: -20px; 
	box-shadow: 0 0 5px rgba(0, 0, 0, .5), inset 0 0 2px #fff; 
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .1); 
	_position: absolute; 
 	-webkit-transform: translate(40px, 45px) rotate(45deg); 
 	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .5), inset 0 0 2px #fff;
}
#top_left {
	POSITION: fixed; TEXT-ALIGN: /** 注释*/ 
	center; FILTER: 
	progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=.7,M12=0.6,M21=-.7,M22=0.6); 
	BACKGROUND-COLOR: #333; 
	WIDTH: 200px; 
	DISPLAY: block; 
	FONT: bold 14px/28px georgia, sans-serif; 
	HEIGHT: 28px; 
	COLOR: #fff; 
	TOP: -20px; 
	LEFT: -20px; 
	box-shadow: 0 0 5px rgba(0, 0, 0, .5), inset 0 0 2px #fff; 
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .1); 
	_position: absolute; 
	-moz-transform: translate(-40px, 45px) rotate(-45deg); 
	-webkit-transform: translate(-40px, 45px) rotate(-45deg); 
	-o-transform: translate(-40px, 45px) rotate(-45deg); 
	transform: translate(-40px, 45px) rotate(-45deg); 
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .5), inset 0 0 2px #fff; 
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .5), inset 0 0 2px #fff;
}
#top_left:hover{
	BACKGROUND-COLOR: #900; 
	TEXT-DECORATION: none; 
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .5)
}
#top_right:hover {
	BACKGROUND-COLOR: #900; 
	TEXT-DECORATION: none; 
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .5)
}
a:link {
	text-decoration: none;
}
 
</style>

</HEAD>
<BODY>
 
<HEADER >
 
</HEADER> 
 
 

<A id=top_left  title="AAA" href="###">我在左上角</A>
<A id=top_right  title="AAA" href="###">我在右上角</A>
 <br>
<div style="text-align:center "> MyTitle</div>

</BODY></HTML>
猜你喜欢
