我正在尝试为自己的网页设计公司建立网站。考虑到我在问一个基本问题,我这样做很讽刺。另一方面,我只是建立基础站点以获取经验。我的问题是我正在尝试消除标题和导航栏之间的间隙。我试图将它们都设置在固定位置,然后设置“顶部”值,但是当调整浏览器窗口的大小时,所有内容都不合适。它需要响应并在移动和桌面设备上查看。

<!DOCTYPE html>

<html>
    <head>
        <title>Picasso</title>
        <link rel="stylesheet" href="styling.css">
    </head>
    <body>
        <header>
            <img src="img/pwd_logo_05.png" alt="logo" id="logo">
            <h2>For Desktop &amp; Mobile </h2>
        </header>
        <nav>
            <ul>
                <li>Donate</li>
                <li>Request</li>
                <li>Contact</li>
                <li>Home</li>
            </ul>
        </nav>
    </body>
    <footer>

    </footer>
</html>


的CSS

header {
    background-color: whitesmoke;
}

#logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1.5em;
    width: 30%;
    height: 30%;
}

h2 {
    padding-bottom: 1em;
    text-align: center;
    font-family: sans-serif;
}

nav {
    width: 100%;
    background-color: black;
}

ul {
    list-style-type: none;
    overflow: hidden;

}

li {
    text-decoration: none;
    text-align: center;
    float: right;
    padding: .875em 1em;
    color: whitesmoke;
    font-family: sans-serif;
}

body {
    background-image:url(img/background.png);
}

最佳答案

这是因为为标题H2设置了边距。
尝试将其“ margin-bottom”设置为0。

UL元素的“页边距”也是一样。

关于javascript - 删除页眉和导航之间的间距,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36254064/

10-09 23:37