文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
返回腾讯云官网
社区首页 >问答首页 >如何修复报头？

问如何修复报头？
EN

Stack Overflow用户
提问于 2019-06-07 03:12:28
回答 4查看 74关注 0票数 1

我已经更改了标题，我对结果非常满意，但我的h1不在标题的顶部，而是在标题的正下方。

我已经改变了z-index，top，etc. top，padding等，但它仍然不在页眉的顶部，而是在它的正下方。

​

代码语言：javascript
代码运行次数：0
运行
复制
#banner {
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    width: 100%;
    height: 70px;
    z-index: 99999;
    position: fixed;
    top: 0;
    left: 0;
}
header {
    position: relative;
    width: 100%;
    height: 70px;
    margin: 0 auto;
}
header hgroup {
    position: absolute;
    display: block;
    top: 5px;
    left: 20px;
}
header hgroup h1 {
	  font-size: 50px;
    display: block;
    height: 100px;
    width: 610px;
}
nav {
	float: right;
}
nav ul li:hover > ul {
	display: block;
}
nav ul {
	margin-top: 10px;
	padding: 0 20px;  
	list-style: none;
	position: relative;
	display: inline-table;

}
nav ul:after {
	content: ""; 
	clear: both; 
	display: block;
}
nav ul li {
	float: left;
}

nav ul li a {
	display: block; 
	padding: 15px 15px;		
  font-family: 'Crimson Text', sans-serif;
	text-decoration: none;
}

body {
  background: #dcdcdc;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  margin: 0px;
}

p, h1 {
	font-family: 'Crimson Text', Serif;
}

ul, li {
  list-style-type: none;
}

ul li {
  display: inline-block;
  box-sizing: border-box;
  text-align: left;
}

.main-button {
  display: inline-block;
  width: 79px;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
}

.main-button:hover {
  background: rgba(255, 255, 255, 0.1);
  transition: 1s;
  cursor: pointer;
}

h3 {
  text-align: center;
  font-size: 44px;
}

.container {
  box-sizing: border-box;
  margin: auto;
  max-width: 70%;
  padding: 20px;
}

.button {
  display: inline-block;
  width: 130px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  background: rgb(0, 105, 242);
  transition: 0.25s;
  color: white;
  cursor: pointer;
}

a {
  text-decoration: none;
}

a:hover {
  color: white;
  transition: 0.5s;
}

.content1 {
  background: rgba(255, 255, 255, 0.15);
}

.content2 {
  background: rgba(255, 255, 255, 0.1);
}

@keyframes example {
    0%   {color: #e91e63;}
    14%  {color: #e74c3c;}
    28%  {color: #f1c40f;}
    42% {color: #2ecc71;}
    56% {color: #3498db;}
    72% {color: #71368a;}
    86% {color: #9b59b6;}
    100%   {color: #91e63;}
}

body, a {
    color: red;
    animation-name: example;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.menu-list {
  list-style-type: disc;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

.menu-list .li {
  margin: auto;
  display: flex;
  width: 60%;
  /* 'justify-content: space-between;' does the trick of
  separating the two items in the li */
  justify-content: space-between;
  border-bottom: 1px dotted;
}

.menu-list .li .title,
.menu-list .li .price {
  display: flex;
}

.menu-list .li .title {
  font-size: 18px;
  align-self: flex-end;
}

.menu-list .li .price {
  font-size: 30px;
}
代码语言：javascript
代码运行次数：0
运行
复制
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="website.css">
  <link href="https://fonts.googleapis.com/css?family=Crimson+Text|Montserrat" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  </head>
  <body>
<div id="banner">
    <header>
        <hgroup>
            <h1>Silver · Spoon</h1>
        </hgroup>
        <nav>
	        <ul>
		        <li class="main-button home-button"><a class='page-button' data-page_num='1' href='javascript:voide(0)'>Home</a></li>
		        <li class="main-button menu1-button"><a class='page-button' data-page_num='2' href='javascript:voide(0)'>Drinks</a></li>
			    <li class="main-button menu2-button"><a class='page-button' data-page_num='3' href='javascript:voide(0)'>Snacks</a></li>
		        <li class="main-button about-button"><a class='page-button' data-page_num='4' href='javascript:voide(0)'>About</a></li>
            </ul>
       </nav>
    </header>
    </div>
    <div class="page">
  <div id="Home">
  <div class="content1">
  <div class="container">
  <a class='page-button' data-page_num='2' href='javascript:voide(0)'>
      	<h3>Drinks Menu</h3>
    </a>
    <h4>Buy one, get 50% off.</h4>
    <p>Silver Spoon has high-quality drinks that will quench your thirst at an affordable price. Find out more on the drinks menu.</p>
  </div>
  </div>
    <div class="content2">
      <div class="container">
      <a class='page-button' data-page_num='3' href='javascript:voide(0)'>
      	<h3>Snacks Menu</h3>
      </a>
        <h4>Now introducing edible food.</h4>
        <p>Silver Spoon has a high-quality snacks menu with affordable prices. Find out more on the food menu page.</p>
      </div>
      <div class="content1">
        <div class="container">
          <h3>About</h3>
          <p>Read more about Silver Spoon on our about page.</p>
        </div>
      </div>
    </div>
  </div>
  </div>
  <div class="page">
    <div id="Drinks">
    <ul class="menu-list">
  <li class="li"><span class="title">Cafe Americano</span><span class="price">3<sup>99</sup></span></li>
  <li class="li"><span class="title">Iced Latte</span><span class="price">4<sup>99</sup></span></li>
  <li class="li"><span class="title">Caramel Macchiato</span><span class="price">5<sup>50</sup></span></li>
      <li class="li"><span class="title">Espresso</span><span class="price">4<sup>50</sup></span></li>
      <li class="li"><span class="title">Blonde Roast</span><span class="price">3<sup>00</sup></span></li>
      <li class="li"><span class="title">Iced Coffee w/ Milk</span><span class="price">4<sup>00</sup></span></li>
      <li class="li"><span class="title">Cold Brew w/ Foam</span><span class="price">4<sup>50</sup></span></li>
      <li class="li"><span class="title">Dark Roast</span><span class="price">3<sup>00</sup></span></li>
      <li class="li"><span class="title">Hot Chocolate</span><span class="price">4<sup>00</sup></span></li>
    </div>
  </div>
  </div>
  <div class="page">
    <div id="About">
      <div class="content1">
        <div class="container">
          <h3>About Us</h3>
          <p>Silver Spoon is dedicated to producing affordable but exquisite food that will satisfy our customers. </p>
        </div>
      </div>
    </div>
</div>    
</body>
</html>

​

我希望h1在标题的顶部，而不是它的下面。

html
css
EN

回答 4

Stack Overflow用户

发布于 2019-06-07 03:24:11

在你的代码中添加margin: 0，为了看起来更漂亮，我将你的字体大小减少了10px

​

代码语言：javascript
代码运行次数：0
运行
复制
#banner {
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    width: 100%;
    height: 70px;
    z-index: 99999;
    position: fixed;
    top: 0;
    left: 0;
}
header {
    position: relative;
    width: 100%;
    height: 70px;
    margin: 0 auto;
}
header hgroup {
    position: absolute;
    display: block;
    top: 5px;
    left: 20px;
}
header hgroup h1 {
    margin: 0;
	  font-size: 40px;
    display: block;
    height: 100px;
    width: 610px;
}
nav {
	float: right;
}
nav ul li:hover > ul {
	display: block;
}
nav ul {
	margin-top: 10px;
	padding: 0 20px;  
	list-style: none;
	position: relative;
	display: inline-table;

}
nav ul:after {
	content: ""; 
	clear: both; 
	display: block;
}
nav ul li {
	float: left;
}

nav ul li a {
	display: block; 
	padding: 15px 15px;		
  font-family: 'Crimson Text', sans-serif;
	text-decoration: none;
}

body {
  background: #dcdcdc;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  margin: 0px;
}

p, h1 {
	font-family: 'Crimson Text', Serif;
}

ul, li {
  list-style-type: none;
}

ul li {
  display: inline-block;
  box-sizing: border-box;
  text-align: left;
}

.main-button {
  display: inline-block;
  width: 79px;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
}

.main-button:hover {
  background: rgba(255, 255, 255, 0.1);
  transition: 1s;
  cursor: pointer;
}

h3 {
  text-align: center;
  font-size: 44px;
}

.container {
  box-sizing: border-box;
  margin: auto;
  max-width: 70%;
  padding: 20px;
}

.button {
  display: inline-block;
  width: 130px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  background: rgb(0, 105, 242);
  transition: 0.25s;
  color: white;
  cursor: pointer;
}

a {
  text-decoration: none;
}

a:hover {
  color: white;
  transition: 0.5s;
}

.content1 {
  background: rgba(255, 255, 255, 0.15);
}

.content2 {
  background: rgba(255, 255, 255, 0.1);
}

@keyframes example {
    0%   {color: #e91e63;}
    14%  {color: #e74c3c;}
    28%  {color: #f1c40f;}
    42% {color: #2ecc71;}
    56% {color: #3498db;}
    72% {color: #71368a;}
    86% {color: #9b59b6;}
    100%   {color: #91e63;}
}

body, a {
    color: red;
    animation-name: example;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.menu-list {
  list-style-type: disc;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

.menu-list .li {
  margin: auto;
  display: flex;
  width: 60%;
  /* 'justify-content: space-between;' does the trick of
  separating the two items in the li */
  justify-content: space-between;
  border-bottom: 1px dotted;
}

.menu-list .li .title,
.menu-list .li .price {
  display: flex;
}

.menu-list .li .title {
  font-size: 18px;
  align-self: flex-end;
}

.menu-list .li .price {
  font-size: 30px;
}
代码语言：javascript
代码运行次数：0
运行
复制
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="website.css">
  <link href="https://fonts.googleapis.com/css?family=Crimson+Text|Montserrat" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  </head>
  <body>
<div id="banner">
    <header>
        <hgroup>
            <h1>Silver · Spoon</h1>
        </hgroup>
        <nav>
	        <ul>
		        <li class="main-button home-button"><a class='page-button' data-page_num='1' href='javascript:voide(0)'>Home</a></li>
		        <li class="main-button menu1-button"><a class='page-button' data-page_num='2' href='javascript:voide(0)'>Drinks</a></li>
			    <li class="main-button menu2-button"><a class='page-button' data-page_num='3' href='javascript:voide(0)'>Snacks</a></li>
		        <li class="main-button about-button"><a class='page-button' data-page_num='4' href='javascript:voide(0)'>About</a></li>
            </ul>
       </nav>
    </header>
    </div>
    <div class="page">
  <div id="Home">
  <div class="content1">
  <div class="container">
  <a class='page-button' data-page_num='2' href='javascript:voide(0)'>
      	<h3>Drinks Menu</h3>
    </a>
    <h4>Buy one, get 50% off.</h4>
    <p>Silver Spoon has high-quality drinks that will quench your thirst at an affordable price. Find out more on the drinks menu.</p>
  </div>
  </div>
    <div class="content2">
      <div class="container">
      <a class='page-button' data-page_num='3' href='javascript:voide(0)'>
      	<h3>Snacks Menu</h3>
      </a>
        <h4>Now introducing edible food.</h4>
        <p>Silver Spoon has a high-quality snacks menu with affordable prices. Find out more on the food menu page.</p>
      </div>
      <div class="content1">
        <div class="container">
          <h3>About</h3>
          <p>Read more about Silver Spoon on our about page.</p>
        </div>
      </div>
    </div>
  </div>
  </div>
  <div class="page">
    <div id="Drinks">
    <ul class="menu-list">
  <li class="li"><span class="title">Cafe Americano</span><span class="price">3<sup>99</sup></span></li>
  <li class="li"><span class="title">Iced Latte</span><span class="price">4<sup>99</sup></span></li>
  <li class="li"><span class="title">Caramel Macchiato</span><span class="price">5<sup>50</sup></span></li>
      <li class="li"><span class="title">Espresso</span><span class="price">4<sup>50</sup></span></li>
      <li class="li"><span class="title">Blonde Roast</span><span class="price">3<sup>00</sup></span></li>
      <li class="li"><span class="title">Iced Coffee w/ Milk</span><span class="price">4<sup>00</sup></span></li>
      <li class="li"><span class="title">Cold Brew w/ Foam</span><span class="price">4<sup>50</sup></span></li>
      <li class="li"><span class="title">Dark Roast</span><span class="price">3<sup>00</sup></span></li>
      <li class="li"><span class="title">Hot Chocolate</span><span class="price">4<sup>00</sup></span></li>
    </div>
  </div>
  </div>
  <div class="page">
    <div id="About">
      <div class="content1">
        <div class="container">
          <h3>About Us</h3>
          <p>Silver Spoon is dedicated to producing affordable but exquisite food that will satisfy our customers. </p>
        </div>
      </div>
    </div>
</div>    
</body>
</html>

​

票数 3
EN

Stack Overflow用户

发布于 2019-06-07 03:29:01

向header hgroup h1添加margin:0;

​

代码语言：javascript
代码运行次数：0
运行
复制
#banner {
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    width: 100%;
    height: 70px;
    z-index: 99999;
    position: fixed;
    top: 0;
    left: 0;
}
header {
    position: relative;
    width: 100%;
    height: 70px;
    margin: 0 auto;
}
header hgroup {
    position: absolute;
    display: block;
    top: 5px;
    left: 20px;
}
header hgroup h1 {
    margin: 0;
	  font-size: 40px;
    display: block;
    height: 100px;
    width: 610px;
}
nav {
	float: right;
}
nav ul li:hover > ul {
	display: block;
}
nav ul {
	margin-top: 10px;
	padding: 0 20px;  
	list-style: none;
	position: relative;
	display: inline-table;

}
nav ul:after {
	content: ""; 
	clear: both; 
	display: block;
}
nav ul li {
	float: left;
}

nav ul li a {
	display: block; 
	padding: 15px 15px;		
  font-family: 'Crimson Text', sans-serif;
	text-decoration: none;
}

body {
  background: #dcdcdc;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  margin: 0px;
}

p, h1 {
	font-family: 'Crimson Text', Serif;
}

ul, li {
  list-style-type: none;
}

ul li {
  display: inline-block;
  box-sizing: border-box;
  text-align: left;
}

.main-button {
  display: inline-block;
  width: 79px;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
}

.main-button:hover {
  background: rgba(255, 255, 255, 0.1);
  transition: 1s;
  cursor: pointer;
}

h3 {
  text-align: center;
  font-size: 44px;
}

.container {
  box-sizing: border-box;
  margin: auto;
  max-width: 70%;
  padding: 20px;
}

.button {
  display: inline-block;
  width: 130px;
  margin: 10px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  background: rgb(0, 105, 242);
  transition: 0.25s;
  color: white;
  cursor: pointer;
}

a {
  text-decoration: none;
}

a:hover {
  color: white;
  transition: 0.5s;
}

.content1 {
  background: rgba(255, 255, 255, 0.15);
}

.content2 {
  background: rgba(255, 255, 255, 0.1);
}

@keyframes example {
    0%   {color: #e91e63;}
    14%  {color: #e74c3c;}
    28%  {color: #f1c40f;}
    42% {color: #2ecc71;}
    56% {color: #3498db;}
    72% {color: #71368a;}
    86% {color: #9b59b6;}
    100%   {color: #91e63;}
}

body, a {
    color: red;
    animation-name: example;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

.menu-list {
  list-style-type: disc;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

.menu-list .li {
  margin: auto;
  display: flex;
  width: 60%;
  /* 'justify-content: space-between;' does the trick of
  separating the two items in the li */
  justify-content: space-between;
  border-bottom: 1px dotted;
}

.menu-list .li .title,
.menu-list .li .price {
  display: flex;
}

.menu-list .li .title {
  font-size: 18px;
  align-self: flex-end;
}

.menu-list .li .price {
  font-size: 30px;
}
代码语言：javascript
代码运行次数：0
运行
复制
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="website.css">
  <link href="https://fonts.googleapis.com/css?family=Crimson+Text|Montserrat" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  </head>
  <body>
<div id="banner">
    <header>
        <hgroup>
            <h1>Silver · Spoon</h1>
        </hgroup>
        <nav>
            <ul>
                <li class="main-button home-button"><a class='page-button' data-page_num='1' href='javascript:voide(0)'>Home</a></li>
                <li class="main-button menu1-button"><a class='page-button' data-page_num='2' href='javascript:voide(0)'>Drinks</a></li>
                <li class="main-button menu2-button"><a class='page-button' data-page_num='3' href='javascript:voide(0)'>Snacks</a></li>
                <li class="main-button about-button"><a class='page-button' data-page_num='4' href='javascript:voide(0)'>About</a></li>
            </ul>
       </nav>
    </header>
    </div>
    <div class="page">
  <div id="Home">
  <div class="content1">
  <div class="container">
  <a class='page-button' data-page_num='2' href='javascript:voide(0)'>
        <h3>Drinks Menu</h3>
    </a>
    <h4>Buy one, get 50% off.</h4>
    <p>Silver Spoon has high-quality drinks that will quench your thirst at an affordable price. Find out more on the drinks menu.</p>
  </div>
  </div>
    <div class="content2">
      <div class="container">
      <a class='page-button' data-page_num='3' href='javascript:voide(0)'>
        <h3>Snacks Menu</h3>
      </a>
        <h4>Now introducing edible food.</h4>
        <p>Silver Spoon has a high-quality snacks menu with affordable prices. Find out more on the food menu page.</p>
      </div>
      <div class="content1">
        <div class="container">
          <h3>About</h3>
          <p>Read more about Silver Spoon on our about page.</p>
        </div>
      </div>
    </div>
  </div>
  </div>
  <div class="page">
    <div id="Drinks">
    <ul class="menu-list">
  <li class="li"><span class="title">Cafe Americano</span><span class="price">3<sup>99</sup></span></li>
  <li class="li"><span class="title">Iced Latte</span><span class="price">4<sup>99</sup></span></li>
  <li class="li"><span class="title">Caramel Macchiato</span><span class="price">5<sup>50</sup></span></li>
      <li class="li"><span class="title">Espresso</span><span class="price">4<sup>50</sup></span></li>
      <li class="li"><span class="title">Blonde Roast</span><span class="price">3<sup>00</sup></span></li>
      <li class="li"><span class="title">Iced Coffee w/ Milk</span><span class="price">4<sup>00</sup></span></li>
      <li class="li"><span class="title">Cold Brew w/ Foam</span><span class="price">4<sup>50</sup></span></li>
      <li class="li"><span class="title">Dark Roast</span><span class="price">3<sup>00</sup></span></li>
      <li class="li"><span class="title">Hot Chocolate</span><span class="price">4<sup>00</sup></span></li>
    </div>
  </div>
  </div>
  <div class="page">
    <div id="About">
      <div class="content1">
        <div class="container">
          <h3>About Us</h3>
          <p>Silver Spoon is dedicated to producing affordable but exquisite food that will satisfy our customers. </p>
        </div>
      </div>
    </div>
</body>
</div>
</body>
</html>

​

票数 2
EN

Stack Overflow用户

发布于 2019-06-07 03:22:42

使用margin-top: 0px; margin-bottom: 0px属性在css中添加一个类，并将其应用于h1标记。例如)

CSS:

代码语言：javascript
代码运行次数：0
运行
复制
.header-fix {
    margin-top: 0px;
    margin-bottom: 0px;
}

然后在您的html中

代码语言：javascript
代码运行次数：0
运行
复制
<h1 class="header-fix">Silver · Spoon</h1>

我能够通过使用元素检查器(大多数浏览器中为F12)并应用一些样式来快速找到它，从而达到了预期的效果。在这种情况下，帮助快速确定样式问题的修复。

plunker在这里：https://plnkr.co/edit/sCN7ZO5Ndn3Cm2HG0LNd?p=preview

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/56483732

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档