我正在创建一个网站,但网站顶部的名称和您所在的页面距离太远。 ATM看起来像这样;
Website Name
Page you're on
但我希望不存在之间的空间。我尝试过使用div标签来定位它,但无论我做什么,它们都不会移动。
我的代码是
<!DOCTYPE html>
<html>
<title>Website name -Home</title>
<style>
body {
background-color: #3399FF;
}
h2 {
text-align: center;
font-family: 'Arial Narrow', Arial, sans-serif;
}
h4 {
text-align: center;
font-family: 'Arial Narrow', Arial, sans-serif;
}
p{
font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans- serif;
}
hr {
width: 100%
}
#pageTop {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #8AC007;
}
#titleDivide{
position: relative;
}
</style>
<body>
<div #id="pageTop">
<h2>Website Name</h2>
<h4>Home</h4>
</div>
<div #id="titleDivide">
<hr />
</div>
</body>
</html>
答案 0 :(得分:2)
从h2
和h4
删除保证金:
h2, h4
{
margin: 0;
}
演示:
body
{
background-color: #3399FF;
}
h2, h4
{
text-align: center;
font-family: 'Arial Narrow', Arial, sans-serif;
margin: 0;
}
p
{
font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
}
hr
{
width: 100%
}
#pageTop
{
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #8AC007;
}
#titleDivide
{
position: relative;
}
<!DOCTYPE html>
<html>
<title>Website name -Home</title>
<body>
<div #id="pageTop">
<h2>Website Name</h2>
<h4>Home</h4>
</div>
<div #id="titleDivide">
<hr />
</div>
</body>
</html>