个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我似乎无法摆脱标题和主要内容之间存在的空间。您将在背景图像上方和导航下方看到黑色背景。任何帮助都会很棒。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Awesome Landing Page</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
<header>
<div id="header-container">
<div class="col-3">
<img class="logo" src="Images/logo-dark.png" height="18" width="143">
</div>
<div class="col-3">
<nav>
<ul class="menu">
<li>Home</li>
<li>Features</li>
<li>About</li>
<li>Signup</li>
</ul>
</nav>
</div>
<div class="col-3">
<a href="#" class="getStartedBTN">Get Started</a>
</div>
</div><!-- Header-Container Ends Here -->
</header>
<main>
<section>
<div id="top-section-main">
<div id="top-section-content">
<h1>Awesome looks so good</h1>
<p>Awesome is the landing page you wish you had when you started.</p>
</div>
</div>
</section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</main>
<footer></footer>
</body>
</html>
CSS
html {
font-family: "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
body {
background-color: black;
margin: 0;
}
header {
height: 80px;
background-color: #ffffff;
}
#header-container {
width: 75%;
margin: auto;
}
.col-3 {
width: 33%;
float: left;
}
.logo {
padding-top: 30px;
}
.menu {
margin-top: 32px;
}
.menu li {
list-style-type: none;
display: inline;
font-size: .85em;
color: #8e8e8e;
padding-right: 30px;
}
.getStartedBTN {
background-color: #6dc77a;
border-radius: 28px;
-moz-border-radius:28px;
-webkit-border-radius:28px;
text-decoration: none;
color: #ffffff;
padding: 10px 26px;
margin-top: 20px;
display: inline-block;
font-size: 17px;
float: right;
}
#top-section-main {
height: 740px;
background-image: url(../Images/friends.jpg);
}
最佳答案
这是由您的 <h1> 的上边距引起的位于<div id="top-section-content"> .这很容易在下面的代码片段中重现。
body {
background:gray;
}
header {
height:50px;
background:orange;
}
section {
background:red;
}
#fixed-1 section {
padding-top:1px;
}
#fixed-2 h1 {
margin-top:0;
padding-top:16px;
}<div>
<header></header>
<section>
<h1>hello i'm broken</h1>
</section>
</div>
<div id = "fixed-1">
<header></header>
<section>
<h1>hello i'm fixed by a padding on the container!</h1>
</section>
</div>
<div id = "fixed-2">
<header></header>
<section>
<h1>hello i'm fixed by replacing the margin with a padding!</h1>
</section>
</div>您可以通过将上边距替换为顶部内边距来解决此问题，或者您可以向其容器添加 1 像素的顶部内边距。
关于html - <header> 和 <main> 之间无法解释的差距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30536794/
25
4
0
前言： 一直是想知道一条SQL语句是怎么被执行的，它执行的顺序是怎样的，然后查看总结各方资料，就有了下面这一篇博文了。 本文将从MySQL总体架构--->查询执行流程--->语句执
哪个更好用或者更方便: ... 或 ... 最佳答案 你真的需要类型属性吗？如果您使用的是 HTML5，则不会。否则，是的。 HTML 4.01 和 XHTML 1.0 指定了 type属性是必需的，
哪个更好用或者更方便: ... 或 ... 最佳答案 你真的需要类型属性吗？如果您使用的是 HTML5，则不会。否则，是的。 HTML 4.01 和 XHTML 1.0 指定了 type属性是必需的，
我在 unix shell 脚本中遇到了一个问题。让我用一个非常简单的例子来问你。 假设，我正在获取用户输入并比较两个数字。 echo "Enter the first number" read a
是否可以在中制作文本？上标？如果是，怎么办？ Meraki Baked Goods (Post 7: Dad's 50th) 最佳答案 以下似乎对我有用: Dad's 50ᵗʰ
我有一个转发器控件，其中 部分没有出现。 “Display”存储的代码设置如下: item.Display = " AudioPlayer.embed('ffcedea7-4822-465f-
在许多 .resx 文件中，我遇到了这样的事情: OurLabel 我的问题是:为什么属性name在许多情况下 - 但并非总是如此 - 从 >> 开始? 最佳答案 您在 Winfo
我正在尝试将代码添加到脚本中，但它不起作用 var script= document.createElement('script'); script.type= 'text/javas
我想编写正则表达式来读取 block 内的数据在 HTML 中。作为脚本，我认为空白具有灵 active 。为了使我的正则表达式模式健壮，我必须预测不同数量的空白。也许有比在我的模式中放置许多空白匹
基本上，我讨厌必须更改标题代码以及位于 中的页面标题。 header 中的标签....我可以使用 JavaScript 或 HTML 来自动设置某个 标题中的内容是否等于页面标题？ 最佳答案 是的，
我可以使用以下代码提取所有标签。但是，我不知道如何在 之间查看内部。和标签。特别是，假设我只想要这一部分(中间还有更多内容，但我对此不感兴趣): var quoteData
有什么方法可以覆盖无法直接编辑的页面标题，只能在页眉中添加 Javascript？ 我不能直接编辑的行是: Title of the page 我能想到的解决这个问题的唯一方法是在我可以通过我的门户后
我正在尝试在 fancybox 的内容方法中加载 javascript 内容。 $('#streaminput').on("click", function() { $('#streaminpu
我试图在 2 小时内解决这个问题，但运气不佳，也许这不是那么技术性，但我需要帮助! 我有一个 AJAX 脚本，需要将 GET 请求发送到同一页面上的 php 脚本。PHP 脚本这样终止 i
如何创建表单来删除标签并删除标签之间的内容或脚本。请任何人为我制作一份表格(我已经问过这个问题，但没有找到任何有用的答案。) 像这样的形式:(此形式仅删除标签，不删除text标签之间的脚本) //
我现在已经为此苦苦挣扎太久了。 我想做的只是简单地堆叠后续内容，就像您将一张 1 列 3 行的表格一样。我试图放弃旧的 HTML 和 CSS 方法，转而采用首选的 HTML5 页面结构方法。 像这样.
我正在尝试为 my chat box 创建通知，当有人向您发送新消息时，会在“谈话”标题旁边看到。我尝试过多种方法，但从来没有成功过。 a busy cat http://goawaymom.com/
我最初并不期望需要调用除 Iframe 之外的任何内容，但显然我错了。这是我的代码，您可以看到为什么它破坏了脚本中的脚本-/脚本有什么方法可以解决这个问题？ $ad_blocks = arra
我希望能够在正在播放的视频之上使用全屏文本区域。我以为 position: fixed;顶部:0；可能有效，但没有。 HTML CSS * { box-sizing: border-box;
我找到了how to load external JS file into moodle?但这并不能解决我的问题。 我必须加载一个外部 JS 文件，因为它是 VOD 服务的播放器。 必须在 中调用它
我是一名优秀的程序员,十分优秀！