萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS:CSS樣式如何實現Logo立體盒子效果

CSS:CSS樣式如何實現Logo立體盒子效果

讓我們看一下該如何實現立體盒子的效果吧,然後,我們將會給大家展示一些很好的例子。
    准備先准備好你的頁面和圖片,我們使用這張圖片:

    我們簡單的將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已經顯示在盒子之外了。

 

copyright © 萬盛學電腦網 all rights reserved