Question

第一个问题是“关于我自己”（home_about_box），做了一些不允许我把它放在图像上的东西。我认为这与保证金有关，但我还没有找到解决方案。

第二个问题是，投资组合部分（portfolio_home）中的图像不会相互接触，它会在图片之间留下空白。

最后一个问题是我的页面底部有一个水平滚动条。我已经搜索了一个解决方案，但没找到任何解决方案。

如果您有任何解决方案，我将非常感谢您发布代码和解释，因为我对此很新！

干杯！任何建设性的反馈都非常感谢！

HTML

let sumProdHigherOrder lst = 
    List.foldBack (fun x (acc,acc') -> (acc + x, acc' * x)) lst (0,1)

CSS

   <section class="home.about">
     <div class="about.bg"> 
        <div class="home_about_box">
            <h1>About Myself</h1>
            <p>Lorem ipsum...</p>
            <p>Lorem ipsum...</p>
        </div>
    </div>
  </section>


<section class="portfolio_home" id="portfolio">
    <h1>Some of my work</h1>
    <figure class="port-item">
        <!-- Portfolio 1 -->
    <img src="https://i.imgur.com/eBRYWII.png" alt="portfolio item"/> 
        <figcaption class="port-desc">
            <p>Geofilters</p>
        </figcaption>
    </figure>
        <!-- Portfolio 2 -->
    <figure class="port-item">
    <img src="https://i.imgur.com/gAfgliA.png" alt="portfolio item"/> 
            <figcaption class="port-desc">
            <p>Quixz eSports</p>
        </figcaption>
    </figure>
        <!-- Portfolio 3 -->
    <figure class="port-item">
    <img src="https://i.imgur.com/IjoGmUT.png" alt="portfolio item"/> 
            <figcaption class="port-desc">
            <p>3D Renders</p>
        </figcaption>
    </figure>
        <!-- Portfolio 4 -->
    <figure class="port-item">
    <img src="https://i.imgur.com/4zymXa8.png" alt="portfolio item"/>
            <figcaption class="port-desc">
            <p>Backgrounds</p>
        </figcaption>
    </figure>
</section>

<section class="cta">
    <div class="container">
      <h1 class="title title-cta">Want to see more?
        <span>Then what are you waiting for?</span>
      </h1>
      <a href="#portfolio" class="button_dark">See More</a>
    </div>
</section>

Answer 1

首先，您需要尽量减少codepen，因为您不需要其中的所有内容。

第一个问题： - 对于第一个问题，请确保您的z-index大于在您的情况下重叠它的元素.port-desc给出z-index为100，因此您需要超过100的内容。

.home_about_box {
  background-color: #232323;
  font-size: 0.8em;
  padding: 4em;
  outline: 2px solid #174fc1;
  outline-offset: -3em;
  color: #fff;
  z-index: 101;
}

第二个问题： - 你需要删除左右两边的填充，我认为当你说他们没有碰到你的意思时。

img {
  max-width: 100%;
  height: auto;
  padding: 1em 0.5em 0;
  background-size: cover;
}

第三个问题： - 滚动条的宽度为100wh，您可以将宽度更新为100％。

@media (min-height: 30rem) {
  .home-hero {
    width: 100%;
    height: 100vh;
  }
}

图像，部分和滚动条的问题

1 个答案: