<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> li{ list-style:none; } *{ margin:0; padding:0; } .top{ background-color: #55585a; height:50px; width:1200px; margin: 0 auto; } .mid1{ width:830px; height:50px; background-color: #55585a; margin:10px auto; } .box{ width:830px; height:300px; background-color: #ff6700; margin:0px auto; } .box li{ float:left; width:200px; height:300px; margin-right:10px; background-color: #55585a; } .box .last{ margin-right:0; } .footer{ width:1200px; height:60px; margin:10px auto 0; background-color: #55585a; } </style> <body> <div class="top">top</div> <div class="mid1">mid1</div> <div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li class="last">4</li> </ul> </div> <div class="footer">footer</div> </body> </html>