主页
CSS
CSS 布局 浮动实例
trycss_layout_cols
运行 ❯
×
更改方向
保存代码
更改主题
<!DOCTYPE html> <html> <head> <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>干尼亚</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>您将在后面的章节中了解有关网页布局和响应式网页的更多信息。</p> </div> </div> <div class="footer"> <p>页脚文本</p> </div> </body> </html>