HTML

Question

我在尝试获得理想的结果方面遇到了很多麻烦。我的网页顶部有一个导航栏div，下面有正文文本div。每个都有一些box-shadow，导航栏只显示在它下面，正文文本div就在两侧。我希望正文div准确地从导航栏div结束的位置开始，并显示在导航栏box-shadow的{{1}}下。

JSFiddle似乎没有正确复制该问题，因此我将在下面包含图片和代码（代码格式可能很糟糕）。

HTML

div

CSS

<div class="navbar">
    <ul>
        <li><a href="Index.html" style="background-color:#C6CFD6;">Home</a></li>
        <li><a href="Education.html">Education</a></li>
        <li><a href="Experience.html">Experience</a></li>
        <li><a href="Mywork.html">My Work</a></li>
        <li><a href="Contact.html">Contact Me</a></li>
    </ul>
</div>
<div class="body">
    <div class="bodytext">
        <h1>test text</h1>
        <p>test text</p>
        <p>test text</p>
        <br>
        <br>
        <br>
        <h1>test text</h1>
    </div>
</div>

图片

Imgur

这篇文章可能不是最明确的措辞或格式 - 我尝试制作一个JSFiddle，但它并没有反映我网页上发生的事情;我会尝试澄清任何不清楚的事情。关于我能做些什么来获得我想要的结果的任何想法？

Answer 1

请告诉我这是否对您有帮助。

<强> HTML：

<div class="navbar">
    <ul>
        <li><a href="Index.html" style="background-color:#C6CFD6;">Home</a></li>
        <li><a href="Education.html">Education</a></li>
        <li><a href="Experience.html">Experience</a></li>
        <li><a href="Mywork.html">My Work</a></li>
        <li><a href="Contact.html">Contact Me</a></li>
    </ul>
</div>
<div class="body">
    <div class="bodytext">
        <h1>test text</h1>
        <p>test text</p>
        <p>test text</p>
        <br>
        <br>
        <br>
        <h1>test text</h1>
    </div>
</div>

<强> CSS：

html, body {
    height: 100%;
}

h1 {
  margin: 0;
}

.body {
  position: relative;
  z-index: -1;
  background: green;
  box-shadow: 0px 0px 10px 0px black;
}

.navbar {
    width: 100%;
    text-align: center;
    box-shadow: 0px 0px 10px 0px black;
    padding: 0;
    margin: 0;
}

.navbar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: #E7E7EF;
    padding: 10px;
    width: 100%;
}

.navbar ul li {
    display: inline;
    text-align: center;
    padding: 10px;
    margin: 0;
    padding: 0;
    position: relative;
}

.navbar ul li a {
    padding: 10px;
    background: #E7E7EF;
    text-decoration: none;
    color: #CE0000;
}

My Fiddle

如何在另一个div的顶部获得1 div的box-shadow而不重叠两个div？

HTML

CSS

图片

1 个答案: