頁眉和頁腳徽標

如何將我的頁腳徽標像我的頭標誌？我想創建這樣頁眉和頁腳徽標

------------------------- 
|  __________  | 
|______| HeadLogo |____ | 
|  |_________ |  | 
|      | 
|      | 
|      | 
| ______________  | 
|---| FootLogo |----| 
| --------------- | 
|_______________________|

預覽我的網頁 https://db.tt/EsMHtRpF

我的HTML

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Test</title> 
<link rel="stylesheet" type="text/css" href="css.css" /> 
</head> 
<body> 

<div class="all"> 
<div class="middle"> 


</div> 
<div class="top"> 
<img src="images/head.png" class="top-img"></img> 

</div> 

<div class="bottom"> 
<img src="images/foot.png"></img> 
</div> 

</div> 

</body> 
</html>

我的CSS

@charset "UTF-8"; 
@import url("http://fonts.googleapis.com/css?family=Varela+Round"); 

* { 
    padding:0px; 
    margin:0px; 
} 

html, body { 
    background-color:#b3924a; 
    max-height:100%; 
    max-width:100%; 
} 

.all { 
    max-height:100%; 
    height:auto; 
    overflow:hidden; 
    display:inline-block; 
    media:screen; 
} 

.top { 
    background-color:#d7cc75; 
    width:100%; 
    height:9%; 
    position:absolute; 
    top:0px; 
    text-align:center; 
    z-index:1; 
} 

.top-img { 
    position:relative; 
    width:17%; 
    height:auto; 
    z-index:1; 
    top:1em; 
} 



.bottom { 
    background-color:#d7cc75; 
    width:100%; 
    height:7%; 
    position:absolute; 
    bottom:0px; 
    text-align:center; 
    overflow:hidden; 
    z-index:1; 
} 

.bottom img { 
    width:25%; 
    height:auto; 
    z-index:1; 
}

謝謝：d

來源

2014-03-03 kiki.kiko

按照這個的jsfiddle http://jsfiddle.net/4vZAB/，一切看起來都很好，很正常。嘗試添加圖片，看看它的外觀 – anurupr

瑜珈：感謝我的修訂預覽 –

anurupr：對不起，我的意思是身體和底部之間footlogo，但感謝你的幫助 –

http://jsfiddle.net/4vZAB/1/

您設置overflow風格隱藏div.bottom這意味着它會隱藏在其中的內容的任何溢出。

所以「footlogo」作爲div裏面，如果你試圖改變它的位置到body和.bottom元素會被隱藏

PS之間：我註釋掉overflow風格，你可以取消它，看看它是如何工作

來源

2014-03-03 07:47:44 anurupr

哦，我不知道有關溢出造成的麻煩，非常感謝，對不起，我不能給你的聲譽，但感謝我獲得新的知識，從你 –

高興能幫上忙 – anurupr

給CSS作爲

Position:relative

到頁腳標誌，並根據ü全光照頂部，底部調整，左，右

CSS

.bottom { 
background-color:#d7cc75; 
width:100%; 
height:7%; 
position:relative; 
bottom:0px; 
text-align:center; 
overflow:hidden; 
z-index:1; 
}

來源

2014-03-03 07:53:30 harshamullangi

頁眉和頁腳徽標

回答

相關問題