我认为通过添加我在这里尝试做的图像将是最好的。
我需要的是有一条线(对用户来说只是一个视觉上的东西)来分隔标题 div 和内容 div,但同时徽标应该就在这条线上。
当我添加border-bottom: 5px solid #ff0000;
时,header_wrap
显然该线在透明徽标中变得可见,因此看起来徽标被划线了!这是我唯一遇到的问题。
有什么方法可以做我需要的吗?
徽标的背景必须是透明的,因为标题和页面正文将以图像作为背景。
提前致谢
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
*
{
margin:0px;
padding:0px;
}
/*** HEADER *************************************************************/
#header_wrap
{
float: left;
width: 100%;
height: 115px;
position:fixed;
top:0;
z-index:1;
border-bottom: 8px solid #e61923;
}
#header_centered_content
{
width: 850px;
height: 115px;
margin: 0 auto 0;
position: relative;
}
#logo
{
width: 229px;
height: 49px;
position: absolute;
left: 0px;
top: 76px;
background-image:url(images/logo-top.png);
}
/*** BODY *************************************************************/
#body_wrap
{
float:left;
width:100%;
height:355px;
margin-top:150px;
}
#body_centered_content
{
width: 850px;
margin: 0 auto 0;
position: relative;
}
</style>
</head>
<body>
<div id="header_wrap">
<div id="header_centered_content">
<div id="logo"></div>
</div>
</div>
<div id="body_wrap">
<div id="body_centered_content">
A lot of TEXT !!!
</div>
</div>
</body>
</html>