Question

我正在创建一个网站，到目前为止我已经包含了标题内容和页脚。现在我被要求在现有背景图像的顶部添加侧边菜单。我试过用

      <%@ include file="sidemenu.jsp"%>

但它并没有增加现有的＆lt; DIV＆GT; 组件。而是它将div推下，使其超出背景图像。

你能告诉我如何实现这个目标吗？

Answer 1

基本上如果你想把一些东西放在另一个上面，你可以使用位置相对/绝对，如下例所示：

<div id="bg">
    <div class="sidebar">side menu goes here</div>
</div>

#bg{
    position:relative;
}
.sidebar{
    position:absolute;
    top:0;
    left:0; /* assign the element to the left */
}

Answer 2

让我们看一个例子： Example

<强> HTML ：

<div id="mainDiv">
    <div id="header">This is my header</div>
    <div id="menu">
            <li>My first option</li>
            <li>My second option</li>
    </div>
    <div id="footer">My footer</div>
</div>

<强> CSS ：

mainDiv {
    width: 1024px;
    height: auto;
    background: #ccc;
}

#header {
    width: 100%;
    height: 20px;
    background: yellow;
}

#menu {
    width: 200px;
    height: 50px;
    background: red;
}

#footer {
    width: 100%;
    height: 20px;
    background: black;
    color: white;
}

正如您在该示例中所看到的，我添加了一个灰色背景的主DIV。我知道在你的情况下，DIV会包含IMAGE。

红色方块是您的菜单，您可以使用include标签修改该DIV。

黄色表示标题，黑色表示页脚。

我不知道这是否可以帮助你实现你想要的目标。

如何在现有背景图像上添加侧边菜单

2 个答案: