好用的选项卡，带渐变效果

2019独角兽企业重金招聘Python工程师标准>>>

 

#frame {
text-align: left;
width: 800px;
height: 600px;
background: #000 url(img/bg.png);
margin: 0 auto;
position: relative;
}
.viewport {
width: 422px;
height: 333px;
position: absolute;
left: 184px;
top: 29px;
display: none;
}
.info {
background: url(img/shaded.png);
color: #fff;
width:402px;
position: absolute;
bottom: 0;	
left: 0;
padding: 10px;
text-align: left;
line-height: 1.3em;
}
#menu {
	position: absolute;
	top: 390px;
	left: 144px;
	width: 432px;
	overflow: hidden;
}
a.icon {
	width: 62px;
	height: 100px;
	margin-right: 10px;
	text-indent: -9999px;
	line-height: 0;
	display: block;
}
#menu li {
	display: block;
	float: left;
}
#blog {
	background: #000 url(img/icon_blog.png);
	background-position: right;
}
#tumblr {
	background: #000 url(img/icon_tumblr.png);
	background-position: right;
}
#flickr {
	background: #000 url(img/icon_flickr.png);
	background-position: right;
}
#linkedin {
	background: #000 url(img/icon_linkedin.png);
	background-position: right;
}
#twitter {
	background: #000 url(img/icon_twitter.png);
	background-position: right;
}
#photoblog {
	background: #000 url(img/icon_photoblog.png);
	background-position: right;
}

#blog:hover, #tumblr:hover, #flickr:hover, #linkedin:hover, #twitter:hover, #photoblog:hover {
	background-position: left;
}

#vblog {
	background: url(img/blog.jpg);
}
#vtumblr {
	background: url(img/tumblr.jpg);
}
#vlinkedin {
	background: url(img/linkedin.jpg);
}
#vflickr {
	background: url(img/flickr.jpg);
}
#vphotoblog {
	background: url(img/photoblog.jpg);
}
#vphotoblog {
	background: url(img/photoblog.jpg);
}
#vtwitter {
	background: url(img/twitter.jpg);
}

 

<div id="frame">

	<div class="clearfix">

	<ul id="menu">

		<li><a class="icon" id="blog" href="http://www.i-marco.nl/weblog/" title="My weblog: The Net is Dead">blog</a></li>

		<li><a class="icon" id="tumblr" href="http://marcovhv.tumblr.com/" title="My miniblog on Tumblr: Opinionated">tumblr</a></li>

		<li><a class="icon" id="photoblog" href="http://www.i-marco.nl/photoblog/" title="My photoblog">photoblog</a></li>

		<li><a class="icon" id="linkedin" href="http://www.linkedin.com/in/marcovhv" title="My professional resume on LinkedIn">linkedin</a></li>

		<li><a class="icon" id="flickr" href="http://www.flickr.com/photos/i-marco" title="My photos on Flickr">flickr</a></li>

		<li><a class="icon" id="twitter" href="http://twitter.com/TheMarco" title="Ramblings on Twitter">twitter</a></li>

	</ul>

	</div>

	<div class="viewport" id="vblog"><div class="info">My weblog 'The Net is Dead' about web development, technology, photography, life, the universe and everything else. Annoying the internet since 2004.</div>

	</div>

	<div class="viewport" id="vtumblr"><div class="info">Since february 2009 I'm using Tumblr for smaller entries. Often less serious than on my blog. I also use Tumblr to play with it's excellent customization features.</div></div>

	<div class="viewport" id="vlinkedin"><div class="info">My professional profile on LinkedIn. Visit this page to learn more about my professional background and my network.</div></div>

	<div class="viewport" id="vtwitter"><div class="info">Ramblings on Twitter. Follow me here to keep in touch with what I'm doing right now!</div></div>

	<div class="viewport" id="vflickr"><div class="info">My photos on Flickr. Unlike on my photoblog you'll find just about any kind of photo here including family snapshots.</div></div>

	<div class="viewport" id="vphotoblog"><div class="info">My photography portfolio site. I use this site to showcase my very best photos. The site runs 'Dark Matter', a commercial photoblog template developed by me.</div></div>


</div>

<script type="text/javascript">

$(".icon").mouseover(function(){

	if($('#v' + this.id).css('display') == 'none') {

		$(".viewport").fadeOut(500);

		$('#v' + this.id).fadeIn(500);

	}

});

$(".viewport").mouseover(function(){$(".viewport").fadeOut(500);});

</script>

转载于:https://my.oschina.net/bojinzhu/blog/28893