Question

我开始制作一个网站，并希望制作一个独特的形状，使其位于徽标和导航栏的后面。为此，我在CSS中使用了剪切路径代码，这对我来说是新手，也是我第一次尝试这种方式。我无法使它正常工作，因为如果使用相对定位，导航栏和页面上的文本之间可能会有很大的间隙，否则，如果它们全部塞在顶部，并且彼此叠放在一起，我使用绝对定位。
我无法弄清楚如何获得想要的效果。我现在将其定位为相对位置，因为它是我可以获得的最接近的位置。任何帮助将不胜感激。

body {
  z-index: 1;
  display: block;
  min-width: 44em;
  max-width: 60em;
  margin: 0 auto;
  font-family: 'Times New Roman', Times, serif Arial, Helvetica, sans-serif;
  background-color: rgb(76, 119, 175);
}


/*my logos code */

#logo {
  z-index: 1;
  position: relative;
  margin-top: 20px;
  margin-left: 10px;
}


/*the purple shapes code */

#purpleL {
  z-index: 0;
  position: relative;
  width: 961px;
  height: 80px;
  background-size: cover;
  background-color: rgba(64, 19, 85, 0.952);
  clip-path: polygon(100% 0, 100% 27%, 41% 28%, 0 47%, 0 0);
}

h2 {
  text-align: center;
}

.navbar {
  z-index: 1;
  color: rgb(119, 206, 201);
  text-align: left;
  padding: 0.25em;
  padding-left: 1em;
  float: left;
  width: 7em;
  top: 0px;
}

.navbar ul {
  margin: 0;
  padding: 0;
  position: relative;
  top: 2em;
}

.navbar li {
  list-style-type: none;
  padding: 0.25em;
  margin: 0.25em 0;
  position: relative;
  background-color: darkcyan;
}

#name {
  text-align: center;
}

.nav a {
  text-decoration: none;
}

nav a:link {
  color: black;
}

nav a:visited {
  color: purple;
}

nav a:hover {
  color: white;
}

nav a:active {
  color: blue;
}


/*my solid grey background to go behind everything */

#solid {
  z-index: -1;
  background-color: grey;
}

<div id="solid">
  <!--my logo-->
  <img src="images/cm designs.png" width="940" height="180" alt="cm designs" id="logo" />
  <div id="purpleL">
    <!--the div I used to mark where my purple shape is to go.-->
  </div>
  <nav>
    <ul class="navbar">
      <li><a href="index.html"> Home</a></li>
      <li><a href="calander.html"> acnh calander </a></li>
      <li><a href="about.html"> about me </a></li>
      <li><a href="art.html"> art portfolio </a></li>
      <li><a href="contact.html"> contact </a></li>
    </ul>
  </nav>
  <h2> Home </h2>
  <p> Hello! My name is Christie Mattern and I am the creator of this website. I jsut wanted to start by saying thank you for checking out my website! I coded everything myself as well as created all the art for it. On here I have included an about me page
    for anyone looking to hire me, a contact page incase someone needs to get ahold of me. This could be becuase there is an issue with the website, about a job offer or because something changed with animal crossing and the calander needs adjusted.
  </p>
  <p>I also included a page for my art portfolio, I am a freelance artist and my art can be found there. I also designed a calander for the bigs and fish in the new Animal Crossing New Horizons game. I didn't like a lot of the apps and the wikis were not
    great. I am wanting to turn this into a full app and am in the process of doing so. For the time being though it is available here and may or may not stay here after the app is done.
  </p>
  <p> Again, thank you for checking out my website and I hope you like what you see!</p>
  <p id="footer">Christie Mattern &homtht; Fort Wayne, Indiana &homtht; isfsf</p>
</div>

如何使网站的剪切路径形状不影响网站的其余部分？

0 个答案: