如何使用一個div創建頁腳？

Question

我想打一個網站的頁腳是這樣的：

這裏是我到目前爲止有：

<footer><div class="box1"></div><div class="logo"></div><div class="box2"></div></footer> 

和

footer { width:100%; height:auto;background:#CCC;} 
.box1 {width:33%; height:100px; background:#F04; } 
.box2 {width:33%; height:100px; background:#F04;} 
.logo {width:33% height:150px; background:#F03} 

Answer 1

我有爲您演示了一個小提琴，演示您正在尋找的結果。

EXAMPLE

請注意，爲了讓這個正常工作，你需要有一個透明的形象，改變取決於圖像大小的空間。

HTML

<footer> 
    <div class="box1"></div> 
    <div class="logo"> 
     <image src="http://www.clker.com/cliparts/C/m/c/J/g/l/white-round-md.png" /> 
    </div> 
    <div class="box2"></div> 
</footer> 

CSS

footer { 
    margin-top:200px; 
    width:100%; 
    height:110px; 
    background:grey; 
} 
.box1 { 
    width:31%; 
    margin-left:1%; 
    margin-right:1%; 
    margin-top:5px; 
    margin-bottom:5px; 
    height:100px; 
    background-color:#cccccc; 
    float:left; 
} 
.box2 { 
    width:31%; 
    margin-left:1%; 
    margin-right:1%; 
    margin-top:5px; 
    margin-bottom:5px; 
    height:100px; 
    background:#cccccc; 
    float:left; 
} 
.logo { 
    width:auto; 
    margin-left:2%; 
    margin-right:2%; 
    margin-top:5px; 
    margin-bottom:5px; 
    height:100px; 
    float:left; 
} 
.logo img { 
    height:250px; 
    margin-top: -150px; 
}