Question

我正在尝试将我设计的布局转换为HTML + CSS中的网页。

布局如下： image

我希望中央黑色div（固定宽度）居中，而菜单应保持在左侧并填满整个屏幕左侧，如上图所示。

问题在于我无法弄清楚如何设置菜单样式以填充整个左侧以获得图像中显示的鼠标悬停效果。

非常感谢。

Answer 1

您可以通过让菜单填充整个宽度，并将黑色徽标元素放在其上来实现。

<div id="menu">
  <div id="centered_wrapper">
    <div id="logo"></div>
  </div>
  <ul>
    <li><a href="#">&gt; home</a>
    <li><a href="#">&gt; azienda</a>
    <li><a href="#">&gt; lavorazioni</a>
    <li><a href="#">&gt; contattaci</a>
  </ul>
</div>

CSS就像这样：

body, html {
  margin: 0; 
  background: #494848;
}
#menu {
  margin-top: 150px;
  height: 250px;
  background: #3a3a3a;
}
#menu ul {
  margin: 0;
  padding: 140px 0 0;
}
#menu li {
  margin: 0;
  list-style: none;
  padding: 5px;
}
#menu li:hover {
  background: #4c4c4c;
}
#menu li a {
  display: block;
  width: 550px;
  margin: 0 auto;
  color: #fff;
  text-decoration: none;
}
#centered_wrapper {
  width: 0;
  margin: 0 auto;
  position: relative;
}
#logo {
  position: absolute;
  height: 250px;
  width: 350px;
  margin-left: -175px; // half of width
  background: #000;
  z-index: 1;
}

您会注意到：菜单项的悬停效果也会显示在右侧。这可以通过应用非重复背景图像来修复，背景图像在水平轴上定位50％。一半的图像透明，一半的图像作为悬停效果。足够长。

#menu li:hover {
    background: url(hover_effect.png) repeat-y 50% 0;
}

使用CSS对中框

1 个答案: