Question

我对HTML / CSS完全陌生，并尝试设计一个网站，如下所示。如您在下面的照片中看到的，主标题被压缩到导航栏中。

在这种情况下重新定位标题的最佳实践是什么？我以为可以使用position: relative稍微下移它，但是我想知道是否有更优化的方法来解决此问题。如果需要，我已将HTML和CSS代码发布在图片下方。

HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <title>SuperMegaAwesome Landing Page | Matt Bell</title>
        <link rel="stylesheet" type="text/css" href="./Stylesheets/CSS/main.css">
        <link rel="stylesheet" type="text/css" href="./Stylesheets/CSS/normalize.css">
    </head>

    <body>
        <section id="banner">
            <div class="wrapper">
                <header>
                    <p id="logo">Super<span>Mega</span>Awesome</p>

                    <nav>
                        <a href="#">Home</a>
                        <a href="#">Portfolio</a>
                        <a href="#">Services</a>
                        <a href="#">Get in touch</a>
                    </nav>
                </header>

                <div id="content">
                    <h1 class="title">We create beautiful products</h1>
                    <h2 class="sub_title">Truffaut DIY keffiyeh, twee messenger bag venmo locavore organic master cleanse marfa gochujang selvage</h2>
                    <div class="button_wrapper">
                        <a href="#" class="button button_highlight">Learn More</a>
                        <a href="#" class="button button_secondary">Play Video</a>
                    </div>
                </div>

            </div>
        </section>
    </body>
</html>

CSS代码：

body {
  font-family: "Brandon Grotesque", Helvetica, sans-serif;
}

.wrapper {
  width: 1440px;
  max-width: 90%;
  margin: 0 auto;
}

#banner {
  background-image: url(../../images/banner_background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
#banner header {
  padding: 2rem, 0;
}
#banner #logo {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1.35rem;
  float: left;
  clear: right;
}
#banner #logo span {
  font-weight: 400;
}
#banner nav {
  float: right;
}
#banner nav a {
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: none;
  margin-left: 2rem;
}
#banner .wrapper {
  padding: 2rem 0 6rem 0;
}
#banner .wrapper .title, #banner .wrapper .sub_title {
  color: #FFFFFF;
  text-align: center;
}
#banner .wrapper .title {
  font-size: 3.5rem;
  margin: 0;
}

/*# sourceMappingURL=main.css.map */

标题标题卡在导航栏中

0 个答案: