<html><head> <meta charset="utf-8"> <title>蝴蝶教程（cainiaoya.com）</title> <style> * { box-sizing: border-box; } .header, .footer { background-color: grey; color: white; padding: 15px; } .column { float: left; padding: 15px; } .clearfix::after { content: ""; clear: both; display: table; } .menu { width: 25%; } .content { width: 75%; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 8px; background-color: #33b5e5; color: #ffffff; } .menu li:hover { background-color: #0099cc; } </style></head><body><div class="header"> <h1>Chania</h1></div><div class="clearfix"> <div class="column menu"> <ul> <li>航班</li> <li>城市</li> <li>岛屿</li> <li>美食</li> </ul> </div> <div class="column content"> <h1>城市</h1> <p>哈尼亚是克里特岛上干尼亚地区的首府。这座城市可分为旧城区和现代城市两部分。</p> <p>您将在后面的章节中了解有关Web布局和响应式网页的更多信息。</p> </div></div><div class="footer"> <p>页脚文本</p></div></body></html>