Question

alt text http://i37.tinypic.com/a5et6f.png

好的，上面是我想要做的几乎所有的图像。你会看到徽标后面有一个坚实的背景，到达页面的顶部（所以顶部没有白色）......这就是我想要做的。

这是我对该部分的html：

<body>
<div id="wrapper">
  <div id="divider">
  <h1>NAME / SLOGAN</h1>
  <ul class="underlinemenu">
    <li><a href="#">HOME</a></li> 
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">SUBSCRIBE</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">CONTACT</a></li>
    <li><a href="#">LOGIN</a></li>
  </ul>
  </div> <!-- end divider -->

我很确定我可以添加一个图像并将其放置在那里用于包装器，因此我的<h1>徽标将会覆盖它，但我认为这样效率会非常低。

我的意思是只有两种纯色，黑色和白色......所以不能用CSS做到这一点？

当我尝试这样做时，我最终得到了一个“块”......不是我想要的。最顶端还有白色。我想要更多的是，比方说，如果有意义的话，有人会从纸上剪下一块（黑色的地方）。

Answer 1

你需要确保身体没有任何填充物：

body { padding: 0; }

这将确保您的内容一直到最顶层。

Answer 2

首先，检查h1，＃diviv，＃wrap或body是否有边距或填充。如果是这样，请将其设置为0px。

可以使用具有设置宽度/高度和背景图像属性的div来完成徽标。

Answer 3

有一个全局空白重置：

* {
    margin: 0;
    padding: 0;
}

删除默认边距和填充，您没有不必要的间隙。唯一需要注意的事项是：您必须设置网站上的每个空白（例如列表，标题等）。

Answer 4

使用<h1>LOGO</h1>

，而不是使用<span class="logo">LOGO</span>作为徽标

并将其放入CSS文件中？

.logo {
margin:0;
padding:0;
background:black;
color:white;
font-size:2em; }

如果要调整徽标框大小，也可以添加宽度，高度和显示：内联块

使用CSS而不是图像作为徽标，我该如何...？

4 个答案: