中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

這是一個(gè)正在逐漸流行的創(chuàng)意的趨勢。事實(shí)上它非常容易實(shí)現(xiàn)，只需要增加了一個(gè)額外的元素和獨(dú)特的設(shè)計(jì)。

讓我們看一下該如何實(shí)現(xiàn)立體盒子的效果吧，然后，我們將會(huì)給大家展示一些很好的例子。

準(zhǔn)備

先準(zhǔ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è)置為相對定位

當(dāng)我們定位logo的時(shí)候，我們希望它的位置是相對于容器的，因此使用相對定位：

#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)顯示在盒子之外了。

出處：前端觀察
責(zé)任編輯：bluehearts

上一頁 下一頁 網(wǎng)站設(shè)計(jì)趨勢:立體盒子 [2]