CSS:CSS样式如何实现Logo立体盒子效果
CSS:CSS样式如何实现Logo立体盒子效果
发布时间:2015-05-12 来源:查字典编辑
摘要:让我们看一下该如何实现立体盒子的效果吧,然后,我们将会给大家展示一些很好的例子。准备先准备好你的页面和图片,我们使用这张图片:我们简单的将H...

让我们看一下该如何实现立体盒子的效果吧,然后,我们将会给大家展示一些很好的例子。
    准备先准备好你的页面和图片,我们使用这张图片:

    我们简单的将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已经显示在盒子之外了。

 

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类