Question

如何移动我的页脚徽标，就像我的标题徽标一样？我想像这样创建

-------------------------
|       __________      |
|______| 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

Answer 1

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

您将overflow样式设置为隐藏div.bottom，这意味着它会隐藏其中内容的任何溢出。

所以“footlogo”位于div内，如果您尝试将其位置更改为body和.bottom元素，则会隐藏在视图之外

PS：我评论了overflow样式，您可以取消注释并查看其行为

Answer 2

将css作为

Position:relative

到页脚徽标并根据你在顶部，底部，左侧，右侧调整

CSS

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

标题和页脚徽标

2 个答案: