技術(shù)資訊
網(wǎng)站設(shè)計(jì)趨勢(shì):立體盒子
2009-04-14 11:20:00
這是一個(gè)正在逐漸流行的創(chuàng)意的趨勢(shì)。事實(shí)上它非常容易實(shí)現(xiàn)，只需要增加了一個(gè)額外的元素和獨(dú)特的設(shè)計(jì)。
讓我們看一下該如何實(shí)現(xiàn)立體盒子的效果吧，然后，我們將會(huì)給大家展示一些很好的例子。
準(zhǔn)備
先準(zhǔn)備好你的頁面和圖片，我們使用這張圖片：
我們簡(jiǎn)單的將HTML寫成這樣:
<div id="container">
<img id="logo" src="logo.png" alt="Lee Munroe" />
</div>
CSS樣式可能會(huì)是這個(gè)樣子的:
body{background:#999;}
#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
}
下面是一個(gè)效果預(yù)覽：
設(shè)置為相對(duì)定位
當(dāng)我們定位logo的時(shí)候，我們希望它的位置是相對(duì)于容器的，因此使用相對(duì)定位：
#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
position:relative;
}
將它定位到盒子的外面
現(xiàn)在你需要做的就僅僅是定位logo，將其水平定位，讓它從容器中突出出來。
#logo{
position:absolute;
left:-15px;
}
現(xiàn)在，我們就可以看到，logo已經(jīng)顯示在盒子之外了。
15使用立體盒子的創(chuàng)意網(wǎng)站欣賞
Change in Command
Icon Designer
Yoast
Twiistup
The Design Superhero
Eric Ryan Anderson
Rock Werchter
Freelance Suite
Hipsterist
CreamScoop
近期更新
- [2023-07-26 14:17:28] 為品牌賦能，海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁面設(shè)計(jì)開發(fā)——移動(dòng)端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項(xiàng)目
- [2021-03-05 10:34:45] 移動(dòng)互聯(lián)時(shí)代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢(shì)？為什么要開發(fā)微信小程序？
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計(jì)
- [2020-12-16 16:55:32] 建設(shè)一個(gè)常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少？
延伸閱讀
- [2011-11-17 12:09:39] 谷歌安卓與蘋果iOS系統(tǒng)用戶界面風(fēng)格比較及技術(shù)分析
- [2015-02-14 11:46:58] 網(wǎng)站結(jié)構(gòu)和網(wǎng)站優(yōu)化的關(guān)系？
- [2013-01-26 00:37:01] 如何復(fù)制圖片中的文字
- [2012-01-18 22:24:24] 網(wǎng)站如何獲取高質(zhì)量的內(nèi)容
- [2008-11-12 11:53:00] 從精簡(jiǎn)導(dǎo)航談小型網(wǎng)站的設(shè)計(jì)
- [2011-11-21 22:44:41] 網(wǎng)站404報(bào)錯(cuò)頁面模板（匯總13個(gè)）
- [2014-11-11 23:15:21] 文件夾刪除不了怎么辦
- [2011-11-07 11:50:46] yahoo網(wǎng)站地圖提交入口
- [2011-12-12 23:02:53] 百度網(wǎng)站提交入口
- [2013-09-13 22:36:28] 網(wǎng)站設(shè)計(jì)中的溝通經(jīng)驗(yàn)分享
- [2012-06-18 14:21:28] 青島網(wǎng)站設(shè)計(jì)如何突出網(wǎng)頁核心內(nèi)容
- [2012-02-14 22:20:17] 網(wǎng)站設(shè)計(jì)趨勢(shì)-互動(dòng)站細(xì)分設(shè)計(jì)
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
青島網(wǎng)站建設(shè)基礎(chǔ)知識(shí) 網(wǎng)站規(guī)劃 網(wǎng)站設(shè)計(jì)趨勢(shì) 空白和簡(jiǎn)潔的設(shè)計(jì) 搜索引擎蜘蛛 GOOGLE 官網(wǎng)網(wǎng)站建設(shè) 頁面設(shè)計(jì) 青島好的網(wǎng)站優(yōu)化公司 網(wǎng)站動(dòng)畫 青島網(wǎng)站建設(shè) css 企業(yè)網(wǎng)站為什么要備案 青島網(wǎng)頁制作 高端輪胎網(wǎng)站設(shè)計(jì) H5 青島抖音小程序開發(fā) 良好的導(dǎo)航 青島網(wǎng)站優(yōu)化 青島網(wǎng)站案例 網(wǎng)站的速度 微信營銷的優(yōu)勢(shì) 英文網(wǎng)站建設(shè) 輪胎網(wǎng)站設(shè)計(jì) 青島網(wǎng)站設(shè)計(jì)哪家好 青島IT資訊 圖形網(wǎng)格 青島網(wǎng)站建設(shè)公司哪家好 網(wǎng)站設(shè)計(jì) 微官網(wǎng)帶來的好處
