|
|
| 第1行： |
第1行： |
| − | <!DOCTYPE html> | + | <div style="display: flex; justify-content: space-between; padding: 20px;"> |
| − | <html lang="zh">
| + | <!-- 左边频道 --> |
| − | <head>
| + | [[File:left-image.jpg|250px|link=频道1链接]] |
| − | <meta charset="UTF-8">
| + | |
| − | <meta name="viewport" content="width=device-width, initial-scale=1.0">
| + | <!-- 右边频道 --> |
| − | <title>Wiki首页</title>
| + | [[File:right-image.jpg|250px|link=频道2链接]] |
| − | <style>
| + | </div> |
| − | body {
| + | |
| − | font-family: Arial, sans-serif;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | display: flex;
| + | |
| − | flex-direction: column;
| + | |
| − | }
| + | |
| − | /* 中间区域 */
| + | |
| − | .main-content {
| + | |
| − | flex: 1;
| + | |
| − | display: flex;
| + | |
| − | justify-content: center;
| + | |
| − | align-items: center;
| + | |
| − | height: 400px; /* 可根据需要调整 */
| + | |
| − | background-color: #f4f4f4;
| + | |
| − | }
| + | |
| − | /* 左右两边 */
| + | |
| − | .sidebar {
| + | |
| − | display: flex;
| + | |
| − | justify-content: space-between;
| + | |
| − | padding: 20px;
| + | |
| − | }
| + | |
| − | .sidebar img {
| + | |
| − | width: 250px;
| + | |
| − | height: auto;
| + | |
| − | margin: 0 10px;
| + | |
| − | }
| + | |
| − | /* 底部 */
| + | |
| − | .footer {
| + | |
| − | display: flex;
| + | |
| − | justify-content: center;
| + | |
| − | padding: 20px;
| + | |
| − | background-color: #f4f4f4;
| + | |
| − | }
| + | |
| − | .footer img {
| + | |
| − | width: 250px;
| + | |
| − | height: auto;
| + | |
| − | margin: 0 10px;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | </head>
| + | |
| − | <body>
| + | |
| − | <!-- 左右两边 -->
| + | |
| − | <div class="sidebar">
| + | |
| − | <a href="频道1链接"><img src="left-image.jpg" alt="频道1"></a>
| + | |
| − | <a href="频道2链接"><img src="right-image.jpg" alt="频道2"></a>
| + | |
| − | </div>
| + | |
| | | | |
| − | <!-- 中间测试页面 -->
| + | <!-- 中间测试页面 --> |
| − | <div class=" main- content"> | + | <div style="text-align: center; padding: 40px; background-color: #f4f4f4;"> |
| − | <p>测试页面内容</p>
| + | '''测试页面内容''' |
| − | </div>
| + | </div> |
| | | | |
| − | <!-- 底部鸣谢 -->
| + | <!-- 底部鸣谢 --> |
| − | | + | <div style="text-align: center; padding: 20px; background-color: #f4f4f4;"> |
| − | <a href="鸣谢链接"><img src="孙美琪2023WIKIlogo.png" alt="鸣谢"></a>
| + | [[File:footer-image.jpg|250px|link=鸣谢链接]] |
| − | </div>
| + | </div> |
| − | </body>
| + | |
| − | </html>
| + | |
