代码实现
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>
实现效果
标签：flex,欣赏,nbsp,background,名曲,font,margin,页面 From： https://www.cnblogs.com/HelloFrost/p/17848731.html