如何将一段文字放在另一篇文章之上? (使用div)

时间:2015-08-09 15:05:19

标签: html

我正在创建一个网站,但网站顶部的名称和您所在的页面距离太远。 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>

1 个答案:

答案 0 :(得分:2)

h2h4删除保证金:

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>