至今头条

制作名曲欣赏页面

2023-11-22 12:22 由 XiaMuqingyuan 发表于 #前端开发

 

代码实现

 

  1 <!DOCTYPE html>
  2 <html>
  3   <head>
  4     <title>名曲欣赏</title>
  5     <meta charset="UTF-8" />
  6     <style>
  7       .container {
  8         display: flex;
  9         flex-direction: row;
 10         align-items: flex-start;
 11         justify-content: space-between;
 12         max-width: 1200px;
 13         margin: 0 auto;
 14         padding: 20px;
 15       }
 16       .left {
 17         flex-basis: 20%;
 18         background-color: #87ceeb;
 19         opacity: 0.8;
 20       }
 21       .middle {
 22         flex-basis: 60%;
 23         margin: 0 20px;
 24         background-color: blanchedalmond;
 25         opacity: 0.8;
 26       }
 27       .right {
 28         flex-basis: 20%;
 29         background-color: #87ceeb;
 30         opacity: 0.8;
 31         text-align: center;
 32       }
 33       .list {
 34         margin: 0;
 35         padding: 0;
 36         list-style: none;
 37       }
 38       .list li {
 39         margin-bottom: 10px;
 40         font-size: 16px;
 41       }
 42       .title {
 43         font-size: 24px;
 44         font-weight: bold;
 45         margin-bottom: 10px;
 46         text-decoration: underline;
 47       }
 48       .image {
 49         max-width: 100%;
 50         height: auto;
 51       }
 52     </style>
 53   </head>
 54   <body style="background-color: beige">
 55     <div class="container">
 56       <div class="left">
 57         <nav style="font-size: 18px">
 58           <ul>
 59             <li>
 60               <a style="color: #dc143c">首页</a>
 61             </li>
 62             <li>
 63               <a style="color: ffd700">精华区</a>
 64             </li>
 65             <li>
 66               <a style="color: #00ff7f">收藏区</a>
 67             </li>
 68           </ul>
 69         </nav>
 70         <p>&nbsp;</p>
 71         <h2 class="title">
 72           <a href="https://www.baidu.com">名曲欣赏</a>
 73         </h2>
 74         <ul class="list">
 75           <li>《广陵散》</li>
 76 
 77           <li>《阳关三弄》</li>
 78 
 79           <li>《平沙落雁》</li>
 80 
 81           <li>《醉渔晚唱》</li>
 82 
 83           <li>《酒狂》</li>
 84           <p>&nbsp;</p>
 85           <p>&nbsp;</p>
 86           <p>&nbsp;</p>
 87           <p>&nbsp;</p>
 88           <p>&nbsp;</p>
 89           <p>&nbsp;</p>
 90           <p>&nbsp;</p>
 91           <p>&nbsp;</p>
 92         </ul>
 93       </div>
 94       <div class="middle">
 95         <p>&nbsp;</p>
 96         <h2 class="title">元问好《摸鱼儿·问莲根、有丝多少》</h2>
 97         <p>
 98           泰和中，大名民家小儿女，有以私情不如意赴水者，官为踪迹之，无见也。其后踏藕者得二尸水中，衣服仍可验，其事乃白。是岁此陂荷花开，无不并蒂者。沁水梁国用，时为录事判官，为李用章内翰言如此。此曲以乐府《双蕖怨》命篇。“咀五色之灵芝，香生九窍；咽三危之瑞露，春动七情”，韩偓《香奁集》中自序语。
 99         </p>
100         <p>问莲根、有丝多少，莲心知为谁苦？</p>
101         <p>双花脉脉娇相向，只是旧家儿女。</p>
102         <p>天已许。</p>
103         <p>甚不教、白头生死鸳鸯浦？</p>
104         <p>夕阳无语。</p>
105         <p>算谢客烟中，湘妃江上，未是断肠处。</p>
106         <p>香奁梦，好在灵芝瑞露。</p>
107         <p>人间俯仰今古。</p>
108         <p>海枯石烂情缘在，幽恨不埋黄土。</p>
109         <p>相思树，流年度，无端又被西风误。</p>
110         <p>兰舟少住。怕载酒重来，红衣半落，狼藉卧风雨。</p>
111         <p>&nbsp;</p>
112       </div>
113       <div class="right">
114         <img class="image" src="images/09.jpg" alt="" />
115         <p>春江花月夜</p>
116 /*图片路径改为自己的*/
117         <img class="image" src="images/02.jpg" alt="" />
118         <p>花问梦事</p>
119 
120         <img class="image" src="images/01.jpg" alt="" />
121         <p>昆曲</p>
122         <p>&nbsp;</p>
123       </div>
124     </div>
125     <footer style="text-align: center; background-color: #87cefa">
126       <p>By XiaMuqingyuan 版权所有 &copy 2023-10-21</p>
127     </footer>
128   </body>
129 </html>

 

实现效果

 

热门相关：重生复仇：腹黑千金不好惹   觅仙道   觅仙道   青莲剑说   全天下都知道太子爱她