页面左中右下布局HTML

效果如下

在这里插入图片描述

代码如下

<!DOCTYPE html>
<html>

<head>
  <title>名曲欣赏</title>
  <meta charset="UTF-8" />
  <style>
    body {
      padding: 0;
      margin: 0;
      background: linear-gradient(180deg, #d7f5f2 0%, #c4f2ee 100%);
    }

    p {
      margin: 0;
      padding: 0;
      line-height: 32px;
      text-align: justify;
    }

    h2 {
      margin: 0;
      line-height: 60px;
    }

    .container {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
    }

    /* 左边 */
    .left {
      flex-basis: 20%;
      background-color: #3247ff;
      opacity: 0.8;
      min-height: 640px;
      color: #fff;
    }

    .nav-fl {
      margin: 10px auto;
      padding: 0 30px;
    }

    .nav-fl li {
      color: #ffd700;
      line-height: 40px;
      cursor: pointer;
    }

    .nav-fl li:first-child {
      color: #dc143c;
    }

    .nav-fl li:last-child {
      color: #00ff7f;
    }

    .left .title {
      font-size: 24px;
      line-height: 40px;
      font-weight: bold;
      margin: 10px 0;
      padding-left: 10px;
    }

    .nav-list {
      margin: 0;
      padding: 0;
      padding-left: 10px;
      list-style: none;
    }

    .nav-list li {
      font-size: 16px;
      line-height: 40px;
      cursor: pointer;
    }

    .nav-list li:hover {
      color: #000000;
    }

    /* 中间 */
    .middle {
      flex-basis: 60%;
      padding: 0 20px;
      min-height: 640px;
      background-color: #ffe1b4;
      opacity: 0.8;
    }

    .middle .note {
      background-image: linear-gradient(0deg, #6cac36 0%, #a1c74e 100%);
      color: #fff;
      margin-top: 20px;
      line-height: 26px;
      text-align: justify;
      padding: 10px;
      border-radius: 8px;
      font-size: 14px;
    }

    /* 右边 */
    .right {
      flex-basis: 20%;
      background-color: #00ccff;
      opacity: 0.8;
      text-align: center;
      padding: 10px;
      color: #fff;
      /* min-height: 640px; */
    }

    .right p {
      text-align: center;
      margin-bottom: 10px;
    }

    .right .img-content {
      width: 220px;
      height: 120px;
      overflow: hidden;
      border-radius: 4px;
    }

    .right .image {
      max-width: 100%;
      height: auto;
      cursor: pointer;
      border-radius: 4px;
    }

    .right .image:hover {
      transition: .4s;
      transform: scale(1.2);
    }

    .footer {
      text-align: center;
      color: #FFFFFF;
      height: 80px;
      line-height: 80px;
      background: #00b544;
    }
  </style>
</head>

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

      <div class="note">
        泰和年间，大名府民间有对男女青年因痴情相爱却不能如意地在一起而双双投水自杀，官府搜寻他们的踪迹却不能找到。之后，种藕的人在水塘中找到两具尸，衣物可辨，此事才真相大白。这一年，这个水塘中的荷花盛开，而且株株皆开并蒂莲。沁水的梁国用当时担任录事判官，向内翰李用章这样叙述。问莲花的根，有多少根须？莲心是苦的又为谁而苦？并蒂莲的花为什么含情脉脉娇嫩地相互对望，怕是大名府那两个相爱的青年男女的化身，天公这样的不公平：为什么不教相爱的人白头偕老，却让他们死于鸳鸯偶居的水塘中；夕阳西下悄然无声。看来谢灵运经常游览的烟雾霭霭的名山胜水，潇湘妃子殉情的湘江楚水，都不是这对儿女的断肠处。这对恋人相亲相爱，本可以在灵芝仙草与吉祥晨露中，幸福生活长生不老。他们的感情即使海枯石烂情缘仍然长存，但被迫死去的幽恨是黄土无法掩埋的。被害死去的韩凭夫妇所化的相思树，随着时光的流逝，又无缘无故地被秋风所摧残。精美的小船稍稍停一停，让我再看看并蒂莲怕将来我载酒重来时，它们已红瓣飘零，散乱地卧于风雨中了。
      </div>
    </div>
    <div class="right">
      <div class="img-content">
        <img class="image" src="img/1.png" alt="" />
      </div>
      <p>春江花月夜</p>
      <div class="img-content">
        <img class="image" src="img/1.png" alt="" />
      </div>
      <p>花问梦事</p>
      <div class="img-content">
        <img class="image" src="img/1.png" alt="" />
      </div>
      <p>昆曲</p>
    </div>
  </div>
  <footer>
    <p class="footer">DHLSP 版权所有 &copy 2024-01-01</p>
  </footer>
</body>

</html>