技术资讯
网站设计趋势:立体盒子
2009-04-14 11:20:00
这是一个正在逐渐流行的创意的趋势。事实上它非常容易实现，只需要增加了一个额外的元素和独特的设计。
让我们看一下该如何实现立体盒子的效果吧，然后，我们将会给大家展示一些很好的例子。
准备
先准备好你的页面和图片，我们使用这张图片：
我们简单的将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已经显示在盒子之外了。
15使用立体盒子的创意网站欣赏
Change in Command
Icon Designer
Yoast
Twiistup
The Design Superhero
Eric Ryan Anderson
Rock Werchter
Freelance Suite
Hipsterist
CreamScoop
上一篇：关于上传的那点破事
下一篇：tab(标签)在使用时的禁忌
近期更新
- [2023-07-26 14:17:28] 为品牌赋能，海外官网品牌数字化
- [2023-05-06 10:32:26] 青岛网站建设公司,品牌网站定制,一站式网站服务——力图数字科技
- [2023-04-27 13:47:54] 品牌定制网站建设——从满足预期到走向超预期
- [2023-04-11 09:17:49] H5页面设计开发——移动端传播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力图数字科技配套网站服务支持
- [2021-05-18 10:14:11] 青岛网站建设的流程
- [2021-04-29 10:14:38] 企业定制化官网建设项目
- [2021-03-05 10:34:45] 移动互联时代房地产行业的微信小程序解决方案
- [2021-01-22 17:29:38] 微信小程序有哪些优势？为什么要开发微信小程序？
- [2021-01-08 17:28:04] 网站建设最容易忽略的人性化设计
- [2020-12-16 16:55:32] 建设一个常规的公司网站建设成本大概是多少？
延伸阅读
- [2011-11-05 23:02:49] 让网站外链在你睡着的时候也能自动增加的方法
- [2011-12-02 22:28:30] 如何做网站外链
- [2011-11-01 22:44:18] 修改网站内页TITLE对网站排名的影响
- [2020-12-16 16:55:32] 建设一个常规的公司网站建设成本大概是多少？
- [2016-02-29 13:33:31] 织梦读取服务器年份日期
- [2011-11-10 00:07:02] 谷歌搜索引擎算法升级 预计将影响35%的搜索结果
- [2019-05-30 13:04:11] 青岛品牌定制网站价格
- [2011-12-15 01:24:38] 网页设计与平面设计的差异
- [2015-01-23 11:01:03] 关于网站排名的基本原则
- [2015-03-25 09:36:57] 三种链接方式的介绍及应用？
- [2012-02-27 14:25:24] 网页的视觉设计要点
- [2014-03-24 18:05:18] 网站设计制作的流程控制与管理
