随笔 - 317, 文章 - 0, 评论 - 453, 阅读 - 114万
  博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

tab导航 img样式

Posted on   PHP-张工  阅读(2012)  评论(0编辑  收藏  举报

请使用CHROME浏览器查看。

TAB导航样式

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>

  

努力加载评论中...
点击右上角即可分享
微信分享提示