这篇文章上次修改于 537 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

一个课本里面的简单 HTML 页面

由于是作业，而且加上有点无聊就顺手写了一个垃圾页面出来，大佬们勿喷！

代码实现

<!DOCTYPE html>
<html>
  <head>
    <title>名曲欣赏</title>
    <meta charset="UTF-8" />
    <style>
      .container {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
      }
      .left {
        flex-basis: 20%;
        background-color: #87ceeb;
        opacity: 0.8;
      }
      .middle {
        flex-basis: 60%;
        margin: 0 20px;
        background-color: blanchedalmond;
        opacity: 0.8;
      }
      .right {
        flex-basis: 20%;
        background-color: #87ceeb;
        opacity: 0.8;
        text-align: center;
      }
      .list {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .list li {
        margin-bottom: 10px;
        font-size: 16px;
      }
      .title {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
        text-decoration: underline;
      }
      .image {
        max-width: 100%;
        height: auto;
      }
    </style>
  </head>
  <body style="background-color: beige">
    <div class="container">
      <div class="left">
        <nav style="font-size: 18px">
          <ul>
            <li>
              <a style="color: #dc143c">首页</a>
            </li>
            <li>
              <a style="color: ffd700">精华区</a>
            </li>
            <li>
              <a style="color: #00ff7f">收藏区</a>
            </li>
          </ul>
        </nav>
        <p> </p>
        <h2 class="title">
          <a href="https://www.baidu.com">名曲欣赏</a>
        </h2>
        <ul class="list">
          <li>《广陵散》</li>

          <li>《阳关三弄》</li>

          <li>《平沙落雁》</li>

          <li>《醉渔晚唱》</li>

          <li>《酒狂》</li>
          <p> </p>
          <p> </p>
          <p> </p>
          <p> </p>
          <p> </p>
          <p> </p>
          <p> </p>
          <p> </p>
        </ul>
      </div>
      <div class="middle">
        <p> </p>
        <h2 class="title">元问好《摸鱼儿·问莲根、有丝多少》</h2>
        <p>
          泰和中，大名民家小儿女，有以私情不如意赴水者，官为踪迹之，无见也。其后踏藕者得二尸水中，衣服仍可验，其事乃白。是岁此陂荷花开，无不并蒂者。沁水梁国用，时为录事判官，为李用章内翰言如此。此曲以乐府《双蕖怨》命篇。“咀五色之灵芝，香生九窍；咽三危之瑞露，春动七情”，韩偓《香奁集》中自序语。
        </p>
        <p>问莲根、有丝多少，莲心知为谁苦？</p>
        <p>双花脉脉娇相向，只是旧家儿女。</p>
        <p>天已许。</p>
        <p>甚不教、白头生死鸳鸯浦？</p>
        <p>夕阳无语。</p>
        <p>算谢客烟中，湘妃江上，未是断肠处。</p>
        <p>香奁梦，好在灵芝瑞露。</p>
        <p>人间俯仰今古。</p>
        <p>海枯石烂情缘在，幽恨不埋黄土。</p>
        <p>相思树，流年度，无端又被西风误。</p>
        <p>兰舟少住。怕载酒重来，红衣半落，狼藉卧风雨。</p>
        <p> </p>
      </div>
      <div class="right">
        <img class="image" src="images/09.jpg" alt="" />
        <p>春江花月夜</p>
/*图片路径改为自己的*/
        <img class="image" src="images/02.jpg" alt="" />
        <p>花问梦事</p>

        <img class="image" src="images/01.jpg" alt="" />
        <p>昆曲</p>
        <p> </p>
      </div>
    </div>
    <footer style="text-align: center; background-color: #87cefa">
      <p>By XiaMuqingyuan 版权所有 &copy 2023-10-21</p>
    </footer>
  </body>
</html>

实现效果

pic_80da87fd.png