Question

我想让头杆碰到jumbotron，但不知道如何。还有一个问题。头条应该被称为导航栏还是没有区别？这是我的HTML：

Status

我的Css：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CherryPlaysRoblox1</title>
        <link rel="stylesheet" type="text/css" href="basic.css">
        <link href="https://fonts.googleapis.com/css?family=Happy+Monkey" rel="stylesheet">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
        <div class="headbar"> <p>CherryPlaysRoblox</p></div>
        <div class="jumbotron">
            <h1>Welcome!</h1>
            <p>Hey there! Welcome to my webpage! My name is Cherry and this website is `enter code here`99.999% <br> made by me! (If you're wondering, that 0.001% is bootstrap. Hmm, is        that advertising???)</p>
        </div>
        <h2 id="Firsth2">About me</h2>
    </body>
</html>

Answer 1

从margin-bottom: 30px;移除.headbar并在margin:0中设置.headbar p：

p {
color: black;
}

.jumbotron {
background-color: Sandybrown !important;
  

}

.jumbotron, p + h1 {
color: black !important;
   
}

.headbar p {
color: black !important;
font-family: 'Happy Monkey', cursive;
font-size: 20px;
   margin:0;
}

.headbar {
background-color: hotpink !important;
}
#Firsth2 {
color: black;
}

body {
background-color: Peachpuff !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <body>
    <div class="headbar"> <p>CherryPlaysRoblox</p></div>
    <div class="jumbotron">
    <h1>Welcome!</h1>
    <p>Hey there! Welcome to my webpage! My name is Cherry and this website is `enter code here`99.999% <br> made by me! (If you're wondering, that 0.001% is bootstrap. Hmm, is        that advertising???)</p>
</div>
    <h2 id="Firsth2">About me</h2>
    </body>

Answer 2

您的p使用.headbar，margin-bottom。不要使用p或删除margin-bottom。

<强> HTML：

<div class="headbar">CherryPlaysRoblox</div>

请参阅：https://jsfiddle.net/y1tytq8u/

如何在顶部和底部触摸一个div

2 个答案: