CSS样式如何实现Logo立体盒子效果

  •   2009-07-31/13:31
  •    让我们看一下该如何实现立体盒子的效果吧,然后,我们将会给大家展示一些很好的例子。

        准备先准备好你的页面和图片,我们使用这张图片:

        我们简单的将HTML写成这样:

    <div id="container">
     <img id="logo" src="logo.png" alt="Lee Munroe"  />
    </div>

        CSS样式可能会是这个样子的:

    body{background:#999;}
     
    #container{
     width:960px;
     background:#fff;
     margin:20px auto;
     padding:10px;
    }

        下面是一个效果预览:

        设置为相对定位,当我们定位logo的时候,我们希望它的位置是相对于容器的,因此使用相对定位:

    #container{
    width:960px;
    background:#fff;
    margin:20px auto;
    padding:10px;
    position:relative;
    }

        将它定位到盒子的外面现在你需要做的就仅仅是定位logo,将其水平定位,让它从容器中突出出来。
     

    #logo{
    position:absolute;
    left:-15px;
    }

        现在,我们就可以看到,logo已经显示在盒子之外了。


    评论 {{userinfo.comments}}

    {{money}}

    {{question.question}}

    A {{question.A}}
    B {{question.B}}
    C {{question.C}}
    D {{question.D}}
    提交

    驱动号 更多