点击这里给我发消息 点击这里给我发消息

网站设计趋势:立体盒子

添加时间:2012-1-17
    相关阅读: 网站设计 设计 页面 HTML CSS 网站

核心提示:这是一个正在逐渐流行的创意的趋势。事实上它非常容易实现,只需要增加了一个额外的元素和独特的设计,让我们看一下该如何实现立体盒子的效果吧,然后,我们将会给大家展示一些很好的例子...

这是一个正在逐渐流行的创意的趋势。事实上它非常容易实现,只需要增加了一个额外的元素和独特的设计。

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

准备

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

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

咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册