html - 如何修复主页网站上的主要部分？将附上链接-6ren

html - 如何修复主页网站上的主要部分？将附上链接

转载作者：行者123 更新时间：2023-11-28 12:17:53

我在投资组合网站上工作。我想弄清楚为什么我主页上的主要部分向下延伸了这么远，但在其他页面上却停在了内容的正下方。这是代码。

所有页面的 CSS:

body {
    background-color:#A6FFFF;
    width:100%;
}
#header, #main, #footer {
    display:block;
    position:relative;
    float:left;
}
#header, #footer {
    width:100%;
    height:15%;
}
#header {
    margin-bottom:2px;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#footer {
    margin-top:2px;
    text-align:right;
    border:2px;
}
#main {
    position:relative;
    width:70%;
    height:100%;
    margin:0 auto;
    background-color:#FFF;
    float:center;
}
#nav {
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
#nav li {
    display:inline;
}
#nav a {
    display:inline-block;
    padding:10px;
}

主页 HTML:

<body>
<div class="auto-style1">
    <div id="header">Header
        <h1>Creative Minds Inc.</h1>
    </div>
    <div id="nav">Navigation
        <ul>
            <li><a href="homepage.html">Homepage</a></li>
            <li><a href="tipsandtricks.html">Tips and Tricks</a></li>
            <li><a href="aboutme.html">About me</a></li>
            <li><a href="getintouch.html">Get in Touch</a></li>
        </ul>
    </div>
    <div id="main">Main
        <h2>A passion for design and a creative mind.</h2>
        <h3>Design, Develop, Dream</h3>
    </div>
    <div id="footer">Footer
        <h3>Creative Minds Inc.  Jon Mo</h3>
    </div>
</div>
</body>

其他页面 HTML:

<body>
<body>
<div id="header">Header
    <h1>Creative Minds Inc.</h1>
</div>
<div id="nav">Navigation
    <ul>
        <li><a href="homepage.html">Homepage</a></li>
        <li><a href="tipsandtricks.html">Tips and Tricks</a></li>
        <li><a href="aboutme.html">About me</a></li>
        <li><a href="getintouch.html">Get in Touch</a></li>
    </ul>
</div>
<div id="main">Main
    <h1>Tips-and-Tricks</h1>

    <h2>Keyboard Shortcuts</h2>

    <h2>Cut, Copy, Paste shortcuts</h2>

    <p>The keyboard is not used as often as it could or should be. Sure it is used for typing documents or searches on the internet and such.
    <br>But do you really know how to use the keyboard to the best of your abilities? This is where I will show you the cut, copy, and paste shortcuts.
    <br>Now these are ways to make using the keyboard simplier instead of just using the mouse. So you yourself as a computer user can possibly be
    <br>more advanced and efficent. Now the keyboard functions are not hard to use. Below I will list the cut, copy, and paste keyboard shortcuts.
    <br>The keyboard shortcuts require you to hold down two different keys at the same time.</p>
    <p>First you will select the text or the image that you would like to cut or copy. When you do that it will look highlighted.</p>
    <p>Second you will press the control key. The control key is shown as <strong>ctrl</strong> on the keyboard next to the shift button.</p>
    <p>Third and finally, while you will continue holding down the <strong>ctrl</strong> key you will press either the x, c or v key for the desired function</p>

    <h2>CUT</h2>

    <p>The cut command or shortcut is used simply to remove texts or images from a screen that you are currently working on.
    <br>The cut shortcut moves the information to a place where it is stored and is readily available unless it is overwritten by the next cut or copy command.</p>
    <br>
    <p>Below you will see the keys that are used to do the cut shortcut function</p>
    <img src="images/keyboardshortcutcut.png" alt="Cut Shortcut Key" />

    <h2>COPY</h2>

    <p>The copy command is used as stated. It copies the text or images from the screen that you have selected and strores it.
    <br>Also until it is overwritten by the next cut or copy command.</p>
    <br>
    <p>In the image below you will see the keys that are used to do the copy shortcut function.</p>
    <img src="images/keyboardshortcutcopy.png" alt="Copy Shortcut Key" />

    <h2>PASTE</h2>

    <p>The paste command is used to place the information whether it be an image or text that you have stored on your
    <br>virtual clipboard in the location that you have placed your cursor mouse.</p>
    <p>Below in the image you will see the third and final funtction shortcut key which is used to do the paste shortcut function</p>
    <img src="images/keyboardshortcutpaste.png" alt="Paste Shortcut Key" />
</div>
<div id="footer">Footer
    <h3>Creative Minds Inc.  Jon Mo<h3>
</div>
</body>

最佳答案

我不确定您是否在谈论添加的 h3 元素默认边距，但如果是这种情况，只需将 id 添加到 h3 元素并将以下规则添加到 css。

<h3 id="remove-default-margin">Design, Develop, Dream</h3>

<style>
    #remove-default-margin{
        margin-bottom: 0;
    }
</style>

fiddle

关于html - 如何修复主页网站上的主要部分？将附上链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19062683/

文章推荐： css - 使用 parent 的属性(property)作为SASS的变量

文章推荐： html - 如何使绝对定位容器中的 UL LI 正确悬停？

文章推荐： php - 自定义 Wordpress 导航栏

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

html - 如何修复主页网站上的主要部分？将附上链接