- A+
所属分类：Web前端
代码实现
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> </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> </p> 85 <p> </p> 86 <p> </p> 87 <p> </p> 88 <p> </p> 89 <p> </p> 90 <p> </p> 91 <p> </p> 92 </ul> 93 </div> 94 <div class="middle"> 95 <p> </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> </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> </p> 123 </div> 124 </div> 125 <footer style="text-align: center; background-color: #87cefa"> 126 <p>By XiaMuqingyuan 版权所有 © 2023-10-21</p> 127 </footer> 128 </body> 129 </html>
实现效果
