<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>公司技术博客布局例子代码</title> </head> <style type="text/css"> body { padding: 0px; margin: 0px; } .header { width: 100%; height: 100px; background-color: green; } .menu { width: 1200px; margin: 0 auto; height: 100px; background-color: #00aaaa; } .menu ul { padding-top: 50px; } .menu li { float: left; width: 100px; list-style: none; height: 50px; line-height: 50px; text-align: center; background-color: yellow; margin-right: 10px; } .menu li:hover { background-color: #ff2a08; color: white; } .content { width: 1200px; height: auto; margin: 0 auto; background-color: #2c84f5; } .content .left { height: 800px; background-color: red; width: 75%; float: left; } .content .right { width: 25%; height: 800px; float: left; background-color: rebeccapurple; } .footer .left { height: 200px; background-color: #ff8d48; width: 75%; float: left; } .footer .right { width: 25%; height: 200px; float: left; background-color: #609969; } .footer { width: 100%; height: 200px; background-color: orange; } .bottom { width: 100%; height: 50px; background-color: grey; } </style> <body> <div class="header"> <div class="menu"> <ul> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> <li>菜单</li> </ul> </div> </div> <div class="content"> <div class="left"> 文章列表 </div> <div class="right"> 快捷菜单栏 </div> </div> <div style="clear: both;"></div> <div class="footer"> <div class="left"> 底部左 </div> <div class="right"> 底部右 </div> </div> <div class="bottom"></div> </body> </html>