代码效果演示图:
代码实现:
<!DOCTYPE html> <html lang="en"> <style> *{ padding: 0; margin: 0; } .div_center{ margin: 0 auto; } .top{ width: 700px; height: 100px; background-color: red; } .center{ width: 700px; height: 500px; background-color: cyan; } .center .left{ width: 550px; height: 500px; float: left; background-color: black; } .center .left .nav{ width: 150px; height: 500px; float: left; background-color: skyblue; } .center .left .article{ width: 400px; height: 500px; float: right; background-color: darkorange; } .center .right{ width: 150px; height: 500px; float: right; background-color: pink; } .bottom{ width: 700px; height: 100px; background-color: blueviolet; } </style> <head> <meta charset="UTF-8"> <title>两栏布局—宗波尘客www.zbck123.com</title> </head> <body> <div class="top div_center"></div> <div class="center div_center"> <div class="left"> <div class="nav"></div> <div class="article"></div> </div> <div class="right"></div> </div> <div class="bottom div_center"></div> </body> </html>
用到的代码标签见 div布局练习
大家直接直接复制使用