时间戳

首页 > 解决方案 > 为什么我的部分没有低于 HTML 和 CSS 的标题？

html - 为什么我的部分没有低于 HTML 和 CSS 的标题？

问题描述

您好，我是 HTML 和 CSS 的新手。

我有一个关于我的代码的快速问题。

客观的：

我的目标是为我的页面实现以下布局。

Navigation bar,

Title (h1),

Title (h2),

Button,

Section (About me)

代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html,
body {
  background-color: #fff;
  font-family: 'Lato', 'Arial', 'sans-serif';
  font-weight: 300;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}


.row {
  max-width: 1140px;
  margin: 0 auto;
}

section {
  padding: 80px 0;
}


.title-text-box {
  position: absolute;
  width: 100%;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  letter-spacing: 2px;
  color: white;
}

.title-text-box h1, .title-text-box h2{
  text-shadow: 0px 0px 6px rgba(50,25,55,0.5);
}


.header-img {
  background-image: linear-gradient(to right,#ff7e5f, #feb47b);
  padding: 40px;
}


.title-text-box h1 {
  font-size: 280%;
  margin-bottom: 10px;
}

.main-nav {
  float: right;
  list-style: none;
  margin-top: 60px;
}

.main-nav li {
  display: inline-block;
  margin-left: 40px;
}

.main-nav li:last-child {
  margin-right: 20px;
}


.main-nav li a:link,
.main-nav li a:visited {
  padding: 7px 0;
  color: #5b86e5;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 100%;
}

.main-nav li a:after {
  display:block;
  content: '';
  border-bottom: solid 3px #ff5e62;
  border-radius: 25px;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}

.main-nav li a:hover:after {
  transform: scaleX(1);
}


.btn:link,
.btn:visited {
  display: inline-block;
  padding: 20px 30px;
  margin-top: 90px;
  text-decoration: none;
  background-color: #fff;
  border-radius: 10px;
  color: #ff5e62;
  transition: all .2s;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <link rel="stylesheet" href="style/style.css">
  <body>

  <header>
    <nav>
      <div class="row">
      <ul class="main-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About me</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      </div>
    </nav>
    <div class="title-text-box header-img">
      <h1>Header1</h1>
      <h2>Header2.</h2>
      <a class="btn" href="#">Discover</a>
    </div>
  </header>

<section class="section-about-me">
  <div class="row">
    <h3>About me</h2>
  </div>

</section>

  </body>
</html>

关于我当前代码的问题：

我真的很困惑，为什么该about me部分在 的下方nav-bar和上方header？而html它在标题下方？

此外，代码片段仅适用于全屏。我怎样才能把它放在下面的示例屏幕上？

谢谢

标签： htmlcss

解决方案

about me 部分位于导航栏和标题下方，因为您在标题上使用了绝对定位：

.title-text-box {
  position: absolute;
  width: 100%;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  letter-spacing: 2px;
  color: white;
}

因此，.title-text-box将是顶部的 40% 和剩余的 50%。无论此容器中的其他（相对）元素位于何处。

关于第二个问题，我建议深入研究响应式布局设计。您可以从中学习很多有用的模板和框架。

我建议使用 CSS 或任何现有的 CSS 库（例如Bootstrap ）进行HTML 布局和flex 布局。

在我看来，学习模板和布局的现有模板很不错 startbootstrap。但这只是个人喜好。

推荐阅读