Question

我目前正在学习HTML和CSS，我尝试制作我的第一个网页但是当我意识到我的h2没有出现在页面的任何地方时卡住了。对不起，我是一个菜鸟，不知道我做错了什么。请帮忙！谢谢！

＆＃13;

*{
    margin: 0;
    padding: 0;
    border: 0;
}
header{
    position: fixed;
    background-color: black;
    width: 100%;
}
ul{
    float: right;
    padding-right: 15px;
    text-align: center;
}
ul li{
    list-style: none;
    display: inline-block;
    padding: 15px;
    padding-bottom: 20px;
}
ul li a{
    text-decoration: none;
    color:white
}

a:hover{
    font-size: 20px;
    color: green;
}

header h1{
    color: red;
    text-align: center;
    padding-top: 20px;
}
body{
    background-color: red;
}
nav{
    margin-right: 38%;
}
h2{
    color: blue;
    background-color: white;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <title>TryOne</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <header>
        <h1>My Portfolio</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <div>
        <h2>Hello!</h2>
    </div>
</body>

</html>

＆＃13;

Answer 1

您的标题已修复...您需要使用保证金移动您的div .. FIDDLE

<header>
    <h1>My Portfolio</h1>

    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Testimonials</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

<div id="DIV">
    <h2>Hello!</h2>
</div>

-

*{
    margin: 0;
    padding: 0;
    border: 0;
}
header{
    position: fixed;
    background-color: black;
    width: 100%;

}
ul{
    float: right;
    padding-right: 15px;
    text-align: center;
}
ul li{
    list-style: none;
    display: inline-block;
    padding: 15px;
    padding-bottom: 20px;
}
ul li a{
    text-decoration: none;
    color:white
}

a:hover{
    font-size: 20px;
    color: green;
}

header h1{
    color: red;
    text-align: center;
    padding-top: 20px;
}
body{
    background-color: red;
}
nav{
    margin-right: 38%;
}
h2{
    color: blue;
    background-color: white;
}
#DIV{
  position:absolute;
margin-top: 125px;
}

Answer 2

此处的问题与您使用固定标头有关。

看看这个： http://codepen.io/anon/pen/XXpggN

我所做的只是在div的顶部加上一些填充物，其中有h2，它从标题下方带出来。为了将来参考，固定位置标题将浮动在其余内容之上，因此您添加的下一个元素将开始出现在正文的最顶部，因为顶部浮动的标题div不占用任何空间在主体页面上。

如果你想以这种方式组织你的div，你只需要指定div的z-index值。但在这种情况下，您只需将第一个元素（h2 div）向下推一点。

position:inherit; padding-top:110px;

Answer 3

你的标题会覆盖其他标记。

＆＃13;

*{
    margin: 0;
    padding: 0;
    border: 0;
}
header{
    position: relative;
    padding-bottom: 50px;
    background-color: black;
    width: 100%;
}
ul{
    float: right;
    padding-right: 15px;
    text-align: center;
}
ul li{
    list-style: none;
    display: inline-block;
    padding: 15px;
    padding-bottom: 20px;
}
ul li a{
    text-decoration: none;
    color:white
}

a:hover{
    font-size: 20px;
    color: green;
}

header h1{
    color: red;
    text-align: center;
    padding-top: 20px;
}
body{
    background-color: back;
}
nav{
    margin-right: 38%;
}
h2{
    color: blue;
    background-color: white;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <title>TryOne</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <header>
        <h1>My Portfolio</h1>

        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <div>
        <h2>Hello!</h2>
    </div>

</body>

</html>

＆＃13;

Answer 4

CSS：

h2 {
color: blue;
background-color: white;
text-align: center;
}

header {
    background-color: black;
    width: 100%;
    height: 100px;
}

希望这项工作:)

为什么hn不会出现在页面的任何位置？

4 个答案: