大家好我在CSS中有点菜鸟,刚刚开始设计一个网站。我正在尝试将标识div放在我的标题div上,背景颜色为蓝色。一切都很好但是当我设置子div(logo div)的位置时,蓝色消失。
的style.css
@CHARSET "ISO-8859-1";
#header {
background-color: blue;
position: relative;
}
#logo {
position: absolute;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Insert title here</title>
</head>
<body>
<div id="header" >
<div id="logo">
<img src="images/logo.jpg">
</div>
</div>
</body>
</html>
答案 0 :(得分:4)
当您将图片位置更改为absolute
时,它跳出标题,然后您的div
区域变为零。所以现在你需要为它设置一个大小。
body{
width:100%;
height:100%;
margin: 0px;
}
#header {
background:skyblue;
position: relative;
width:100%;
height:190px;
text-align:center;
}
#logo {
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Insert title here</title>
</head>
<body>
<div id="header">
<div id="logo">
<img src="http://i.imgur.com/Goy7oBy.gif" style="max-height:190px">
</div>
<h2 style="font-family:arial,sans-serif;color:white;line-height:190px;margin:0px">TITLE</h2>
</div>
</body>
</html>
答案 1 :(得分:1)
您需要设置标题的高度。这是因为绝对div有点&#34;外面&#34;标题因此标题的高度变为0。
答案 2 :(得分:0)
问题是你没有提到标题div的任何高度,当我通过删除徽标div尝试你的代码时,我还没有看到任何蓝色,然后我意识到没有提到高度。
Prelude> :load "ExhaustivePattern2.hs"
[1 of 1] Compiling ExhaustivePattern2 ( ExhaustivePattern2.hs, interpreted )
ExhaustivePattern2.hs:6:1: Warning:
Pattern match(es) are non-exhaustive
In an equation for ‘heathrow’:
Patterns not matched:
[_]
[_, _]
答案 3 :(得分:0)
设置#header
的宽度和高度<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1"><title>Insert title here</title>
<style type = "text/css">
#header {
background-color: blue;
position: relative;
width: 400px;
height: 500px;
}
#logo {
text-align: center;
}
</style>
</head>
<body>
<div id="header" >
<div id="logo">
<img src="me.png">
</div>
</div>
</body>
</html>