时间戳

首页 > 解决方案 > 我将如何在标题和导航之间放置空白？

html - 我将如何在标题和导航之间放置空白？

问题描述

所以我希望我的文本有一个纯白色的空白块。我尝试使用 margin-bottom:0 仍然没有。我在这里缺少什么吗？导航栏和图片之间的空间没有显示背景并且是连接的，那么为什么不是我的文字呢？

<!DOCTYPE html>
<link rel="stylesheet" href="Pacific.css">
<title>Pacific Trails Resort</title>
<header><h1>Pacific Trails Resort</h1></header>
<nav>
<a href="index.html">Home</a>&nbsp;
<a href="Yurts.html">Yurts</a>&nbsp;
<a href="Activities.html">Activities</a>&nbsp;
<a href="reservations.html">Reservations</a>&nbsp;
</nav>
<div id="homehero">
</div>
<main>
<h2>Enjoy Nature In Luxury</h2>
<p>Pacific Trails Resort offers a special lodging experience
on the California North Coast with panoramic views of
the Pacific Ocean. Your stay at Pacific Trails Resort includes a sumptuously appointed private yurt and a
cooked-to-order breakfast each morning.</p>
<ul>
<li>Unwind in the heated outdoor pool and whirlpool</li>
<li>Explore the coast on your own or join our guided tours</li>
<li>Relax in our lodge while enjoying complimentary
appetizers and beverages</li>
<li>Savor nightly fine dining with an ocean view</li>
</ul>
</main>
<div>
Pacific Trails Resort<br>
Zephyr, CA 95555<br>
12010 Pacific Trails Road<br>
800-555-5555<br>
</div>
<br>
<footer>
Copyright © 2018 Pacific Trails Resort<br>
<a href="mailto:jekwue6471@gwinnetttech.edu">jekwue6471@gwinnetttech.edu</a>
</footer>

html

Body { background-color: #3399CC;
        color: #666666;
        font-family:Verdana, Arial, serif;
        background-image: linear-gradient(to bottom, #3399CC, #C2E0F0, #3399CC)
}
header {background-color: #000033;
        color: #FFFFFF;
        font-family: Georgia, serif;
}
h1  {line-height: 200%;
    background-image:url(sunset.jpg);
    background-repeat:no-repeat;
    background-position:right;
    padding-left:2em;
    height:72px;
    margin-bottom: 0px;
}
nav {font-weight:bold;
    background-color: #90C7E3;
    padding-bottom:.5em;
        padding-left:2em;
            padding-right:.5em;
                padding-top:.5em;
    text-decoration:none;
    margin-bottom: 0;
}
h2 { color: #3399CC;
        font-family: Georgia, serif;
}
h3  { color:#000033;
    
}
main { padding-left:2em;
            padding-right:2em;
            background-color: #FFFFFF;
            margin-bottom: 0;

}
#homehero {
    height:320px;
    background-image:url(coast.jpg);
    background-size: 100% 100%;
    background-repeat:no-repeat;
}
#yurthero {
    height:320px;
    background-image:url(yurt.jpg);
    background-size: 100% 100%;
    background-repeat:no-repeat;

}
#trailhero {
    height:320px;
    background-image:url(trail.jpg);
    background-size: 100% 100%;
    background-repeat:no-repeat;
}
dt  { color: #000033;
        font-weight: bold;
}
div {
    background-color: #FFFFFF;
    
}
.resort {color:#000033;
        font-size: 1.2em;
}
footer  {font-size: .70em;
        font-weight: italic;
        text-align: center;
        padding:1em;
                    background-color: #FFFFFF;
    margin-bottom: 0;

}
#wrapper { width: 80%;
           margin-right: auto;
           margin-left: auto;
           background-color:#FFFFFF;
           min-width:700px;
           max-width: 1024px;
           box-shadow: 10px 10px; /* Watch this one. */ 
}

Css

这并不是很重要，但是还有一种方法可以让图像看起来更清晰吗？

第一次使用堆栈溢出，所以请多多包涵。

标签： htmlcss

解决方案

<header>您可以在和之间添加以下代码<nav>

<div class="w3-bar w3-border w3-light-white">
  <div class="w3-bar-item">name 1</div>
  <div class="w3-bar-item">name 2</div>
  <div class="w3-bar-item">name 3</div>
</div>

您可以将名称 1 替换为您需要的文本。

推荐阅读