使用CSS代替徽标图像，我该如何......？

alt text http://i37.tinypic.com/a5et6f.png 使用CSS代替徽标图像，我该如何......？

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

这是我的那部分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来完成？

当我试图做到这一点，我结束了一个“块”...不是我想要的。顶部仍然是白色的。我希望它更像是说，如果有意义的话，有人从纸上剪下一块（黑色的地方）。

来源

2010-08-05 MW2000

您可以发布您的CSS为体，包装，分配器和H1 inline-block的？否则，我们都只是猜测。 – Emily 2010-08-06 19:51:46

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

body { padding: 0; }

这将确保您的内容去一路到窗口的最顶部。

来源

2010-08-05 05:00:55

我会进一步扩展它，并说开始你的代码：* {margin：0;填充：0; }。当你没有使用默认的填充和边距时，我总是发现设计更容易。 – riwalk 2010-08-05 05:04:16

如果没有填充，则类似... h1.logo background-color：＃000000; } 应该工作吗？ – MW2000 2010-08-05 05:05:59

@ MW2000：正确。 @ Stargazer712：我不会做'* {margin：0;填充：0; }'，我会使用“正确的”[CSS重置]（http://meyerweb.com/eric/tools/css/reset/）文件，因为“*”解决方案可能会搞乱表单控件等。 – 2010-08-05 05:14:49

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

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

来源

2010-08-05 05:03:16

你的意思是背景颜色属性？我不想使用图像。 – MW2000 2010-08-05 05:08:27

@ MW2000，那么这是另一种方法。 h1.logo {background-color：＃000000;颜色：#ffffff}将会诀窍。 – 2010-08-05 05:31:06

有一个全球性的空白复位：

* { 
    margin: 0; 
    padding: 0; 
}

默认边距和补被删除，你有没有多余的空白。唯一需要注意的是：您必须对网站上的每个空白点进行样式设置（例如列表，标题，...）。

来源

2010-08-05 05:12:53 alopix

而不是使用<h1>LOGO</h1>为您的标志，有关使用<span class="logo">LOGO</span>

，并把这个在你的CSS文件如何？

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

您可以添加宽度，高度和显示器：太多，如果你要调整的标志箱尺寸

来源

2010-08-06 19:37:15 KMW

哎。对不起，并不意味着冒犯了任何人 – KMW 2010-08-06 20:41:30

使用CSS代替徽标图像，我该如何......？

回答

相关问题