Question

我正在写一些html和css来创建一个网页。页面左侧是导航部分。在顶部是一个标题，下面是一个主要的＆＃39;包含各个部分中的文本的部分，以及下面的页脚。我已设法使页眉和页脚保持固定，并在主页和页脚之间滚动。导航中的链接应该让用户根据需要跳转到主要部分。但是，当点击介绍时，介绍部分位于页面的最顶部（隐藏在标题下），我希望它跳到标题下方的位置。我尝试过设置顶部和位置的各种组合：绝对主要但没有成功。有人可以帮忙吗？ html和css如下：

的index.html：

 <!DOCTYPE html>
<html lang="en" >
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title>John Doe</title>
<link type="text/css" rel="stylesheet" href="homepage.css">

<style type="text/css">
</style>

</head>
<body>
<header id="top">
    <h1>
        <dl>
            <dt>
                John Doe
            </dt>
            <dd>
                <img src="logo.jpg" alt="Logo" >
            </dd>
        </dl>
    </h1>
</header>

<nav class="navlist">
    <ul class="menuitem">
        <li><a href="#introduction">Introduction</a></li>
        <li><a href="#prevExp">Previous Experience</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#courses_taken">Courses Taken</a></li>
        <li><a href="#courses_being_taken">Courses Being Taken</a></li>
        <li><a href="#useful_links">Useful Links</a></li>
        <li><a href="#contact">Contact</a></li>
        <img src="selfie.jpg" alt="Selfie" >
    </ul>
</nav>

<div id="main">
<h2><a id="introduction">Introduction</a></h2>
<p>Welcome to my home page! This page tells you a little bit about myself.</p>

<p>Blah blah blah</p>

<h2><a id="prevExp">Previous Experience</a></h2>
<p>I have worked at 
    <a href="http://www.prodrive.com/" target="_BLANK">Prodrive</a>, 
    <a href="http://www.lotuscars.com/engineering"> Lotus Engineering </a>and 
    <a href="http://www.ricardo.com/">Ricardo</a>.
</p>

<p>At Prodrive I did some stuff.</p>

<p>At Lotus I did some stuff.</p>

<p>At Ricardo I did some stuff.</p>

<h2><a id="skills">Skills</a></h2>
<ol>
    <li>Awesomeness</li>
    <li>Mathematics</li>
    <li>Problem Solving</li>
    <li>CSS?</li>
</ol>

<h2><a id="courses_taken">Courses taken</a></h2>
<ul>
    <li>BEng Degree</li>
    <li>Games Programming</li>
    <li>Java</li>
    <li>Android Programming</li>
</ul>

<!-- Created nested list to show current course and its modules -->
<h2><a id="courses_being_taken">Courses being taken</a></h2>
<ul>
<li>MSc Degree
    <ul>
        <li><h3>Modules</h3></li>
        <li>Apps</li>
        <li>Research</li>
        <li>Databases</li>
        <li>Internet</li>
    </ul>
</li>
</ul>

<h2><a id="useful_links">Useful Links</a></h2>
<ul>
    <li>
        <a href="http://www.w3schools.com/html/html5_intro.asp" >HTML5 Introduction from w3schools</a>
    </li>
</ul>
<h2><a id="contact">Contact</a></h2>
<ul>
    <li>Address: xxxx</li>
    <li>Telephone: xxxx</li>
    <li>Email: <a href="mailto:xxxx@uea.ac.uk" >xxxx</a></li>
</ul>
</div>
<footer>
    <!-- Horizontal rule and update comment -->
    <hr />
    <p>Page last updated 30/09/2016 by Stephen Whiddett</p>
</footer>
</body>
</html>

homepage.css：

body {margin:0; padding:0;}

header {border: 0px solid white;}
nav {border: 2px ;}
footer {border: 2px ;}
div#main {border: 2px ;}

h1 {font-family:Helvetica,Arial,sans-serif; 
    font-size:x-large; 
    color:blue;
    font-style: italic;}

h2 {font-family:Helvetica,Arial,sans-serif; 
    font-size:medium; 
    color:#0088FF;
    font-style: italic;}

header{ width: 100%;
        height: 12vh;
        position: fixed;
        top: 0;
        background: #AAAAAA;
}

#main {
    left:6em;
    width: 80%;
    margin: 13vh 0 6vh 6em;
}

footer{ position: fixed;
        width:100%;
        height:6vh;
        bottom:0;
        text-align:center;
        background: white;}


p { font-family:Helvetica,Arial; 
    font-size:x-small;}

a {background-color:yellow}

header a {background-color:inherit}

nav img {max-width:100%;}

ul.menuitem {font-size:small; 
            margin:0;
            padding:1em;}

nav.navlist {width:6em;
            position: fixed;
            top:12%;
            bottom:94%;}

header dt {float:left;}
header dd {float:right;}
header dl {padding:1%;}

header dt {
    position: absolute;
    top: 6vh;
    transform: translateY(-50%);
}

您可能需要缩小浏览器的窗口大小，以便查看我所描述的问题，以确保主屏幕无法同时显示在屏幕上。

CSS问题与href链接到main中的文本部分 - 跳转到页面上的错误位置

0 个答案: