html - 如何在不被覆盖的情况下将文本/图像添加到我的页面

Question

为它的类建立一个站点，只是想向我的页面添加文本和图像，但它没有显示，只显示了一些。我希望它位于标题页下方(宽度为 100% 的图像)，但我认为它要么被标题页覆盖，要么被导航栏覆盖。

我真的不介意它的外观，只要我知道如何在不被覆盖的情况下放置尽可能多的文本即可。

如果页面最小化，则覆盖的文本较少(因此它就像移动格式)，但在覆盖其余部分之前我可以放置的文本量仍然有限。

我试过使用 div 标签，我主要是冲这个网站并复制了一些代码。 (就像导航栏一样，我只是编辑了颜色并使 navbar 文本以水平对齐方式位于页面中央，而不是之前我一直采用的垂直对齐方式。)

https://jsfiddle.net/Theo1290/vz5Lwmb8/3/

body {
  background-color: rgb(22, 21, 21);
  color: #FFFFFF;
}

.titlepage {
  position: relative;
  top: 0;
  left: 0;
}

.leftarrow {
  position: absolute;
  bottom: 60px;
  left: 80px;
}

.rightarrow {
  position: absolute;
  bottom: 60px;
  right: 80px;
}

.navbar {
  background-color: rgb(22, 21, 21);
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
  display: inline-block;
  text-align: center;
}

.navbar a {
  color: #FFFFFF;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 30px;
}

.navbar a:hover {
  background: #f1f1f1;
  color: black;
}

.active {
  background-color: #4CAF50;
}

<div style="position: relative; right: 0; top: 0;">
  <img src="contact.jpg" class="titlepage" style="width:100%" />
  <a href="aboutpage.htm">
    <img src="leftarrow.gif" class="leftarrow" style="width:157.5px;height:91.5px" />
  </a>
  <a href="homepage.htm">
    <img src="rightarrow.gif" class="rightarrow" style="width:157.5px;height:91.5px" />
  </a>
</div>
<div>
  <p> something
  </p>
</div>
<div class="navbar">
  <a href="homepage.htm">Home</a>
  <a href="primarydatapage.htm">Primary Data</a>
  <a href="secondarydatapage.htm">Secondary Data</a>
  <a href="aboutpage.htm">About</a>
  <a class="active" href="contactpage.htm">Contact</a>

Answer 1

您可以使用此代码

body {
            background-color: rgb(22, 21, 21);
            color: #FFFFFF;
            margin: 0;
        }        
        .titlepage {
            position: relative;
            top: 0;
            left: 0;
        }        
        .leftarrow {
            position: absolute;
            bottom: 60px;
            left: 80px;
        }        
        .rightarrow {
            position: absolute;
            bottom: 60px;
            right: 80px;
        }        
        .navbar {
            background-color: rgb(22, 21, 21);
            overflow: hidden;
            position: fixed;
            bottom: 0;
            width: 100%;
            display: inline-block;
            text-align: center;
        }        
        .navbar a {
            color: #FFFFFF;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 30px;
        }        
        .navbar a:hover {
            background: #f1f1f1;
            color: black;
        }        
        .active {
            background-color: #4CAF50;
        }

    <div style="position: relative; right: 0; top: 0;">
        <img src="https://images.taboola.com/taboola/image/fetch/f_jpg%2Cq_auto%2Ch_300%2Cw_600%2Cc_fill%2Cg_faces:auto%2Ce_sharpen/http%3A//www.relocationtarget.com/wp-content/uploads/2019/05/Hyundai_Atos_front_20080328.jpg" class="titlepage" style="width:100%" />
        <a href="aboutpage.htm">
            <img src="https://img.icons8.com/flat_round/64/000000/wide-long-left-arrow.png" class="leftarrow" style="width: auto; height: auto;" />
        </a>
        <a href="homepage.htm">
            <img src="https://img.icons8.com/flat_round/64/000000/wide-long-right-arrow.png" class="rightarrow" style="width: auto; height: auto;" />
        </a>
    </div>
    <div>
        <p>something</p>
    </div>
    <div class="navbar">
        <a href="homepage.htm">Home</a>
        <a href="primarydatapage.htm">Primary Data</a>
        <a href="secondarydatapage.htm">Secondary Data</a>
        <a href="aboutpage.htm">About</a>
        <a class="active" href="contactpage.htm">Contact</a>
    </div>