Question

我想要这样的布局。请看一下图像

enter image description here

正如你所看到的，我有顶栏和页脚栏。由于页脚栏是实心栏，我可以使用div并填充纯色。

但对于顶部栏，我必须使用图像作为div内的背景。这是顶栏的形象。

enter image description here

我想要做的是，黑色方框（标识）应该固定在右角，并且条形应该根据屏幕的宽度重复。

请向我提供顶级酒吧的css。谢谢。

编辑：抱歉我的粗心。这是我的代码。

<html>
<head>
</head>
<body style="margin:0px">
<div style="width:100%; height:100%">
<div style="position:absolute; top:10px; background:url(bglogo.png); width:100%; height:100px"></div>
<div style="position:absolute; bottom:0px; width:100%; height:20px; background:#000"></div>
</div>
</body>
</html>

Answer 1

不要将图像用于整个顶栏。处理方式与底栏完全相同，但添加了一些。

你应该按照我的建议去做，因为徽标应该是一个可点击的链接。

HTML应与此类似：

<div id="topBar">
    <a id="logo" href="/"><img src="logo.png" alt="whatever" /></a>
</div>

使用这个CSS：

#topBar {
    position: relative;
}
#logo {
    position: absolute;
    top: -10px;
    right: 0
}

Answer 2

要放置黑色方框，您可以在相对位置标记内使用绝对位置。放置精确的像素位置并设置z-index来决定前面的什么。

你也可以使用带有负边距的盒子来放置ligne。

CSS图像背景位置

2 个答案: