学步园

请使用CHROME浏览器查看。

TAB导航样式

TAB1 TAB1 TAB1 TAB1

asdfasdfasdfasdfasdf

代码

    <style type="text/css">   
    .divTab
    {
		position:relative;
		top:2px;
		margin-left:10px;
    }    
    .divContent
    {
		-webkit-box-shadow:0px 0px 10px #ddd;
		-moz-box-shadow:0px 0px 10px #ddd;
		box-shadow:0px 0px 10px #ddd;
    }    
    .divTab a
    {
		text-shadow:1px 1px 5px #999;
		display:block;
		float:left;
		margin-right:5px;
		border:solid 2px #ddd;
		padding:0px 10px;
		-webkit-border-top-left-radius:5px;
		-webkit-border-top-right-radius:5px;
		background-color:#eff;
		color:gray;
		text-decoration:none;
		cursor:pointer;
    }    
    .divTab a:hover
    {
		background-color:#fef;
    }    
    .divTab .aCur
    {
		border-bottom:solid 2px white;
		background-color:white;
		color:blue;
		cursor:default;
    }    
    .divTab .aCur:hover
    {
		background-color:white;
    }
    </style>
<div class="divTab" style="">
<a href="#">TAB1</a>
<a href="#" class="aCur">TAB1</a>
<a href="#">TAB1</a>
<a href="#">TAB1</a>
</div>
<div class="divContent" style="border:solid 2px #ddd; padding:10px; clear:both;">
asdfasdfasdfasdfasdf
</div>

IMG样式

代码

    <style type="text/css">

    .divImg img
    {
		-webkit-box-shadow:0px 0px 10px #666;
		-moz-box-shadow:0px 0px 10px #666;
		box-shadow:0px 0px 10px #666;
		border:solid 5px white;
		outline:1px solid gray;
		width:200px; height:150px; margin:30px;
		*border:solid 5px gray;
    }
    
    .divImg img:hover
    {
		-webkit-box-shadow:0px 0px 10px red;
		-moz-box-shadow:0px 0px 10px red;
		box-shadow:0px 0px 10px red;
		*border:solid 5px red;
    }
    </style>
<div class="divImg">
<img alt="" src="1.jpg" />
<img alt="" src="1.jpg" />
<img alt="" src="1.jpg" />
<img alt="" src="1.jpg" />
<img alt="" src="1.jpg" />
</div>