1、一列固定宽度且居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .nav,.banner,.main,.footer { width: 960px; height: 50px; border: 1px dashed rgb(22, 14, 14); margin: 0 auto; } .banner{ height: 250px; margin: 10px auto; } .main { height: 300px; margin: 10px auto; } </style> </head> <body> <div class="nav"></div> <div class="banner"></div> <div class="main"></div> <div class="footer"></div> </body> </html>
2、两列左窄右宽
<body> <div class="nav"></div> <div class="banner"></div> <div class="main"> <div class="main-left"></div> <div class="main-right"></div> </div> <div class="footer"></div> </body>
<style> .nav, .banner, .main, .footer { width: 960px; height: 50px; border: 1px dashed #000; margin: 0 auto; } .banner { height: 100px; margin: 10px auto; } .main { height: 300px; margin-bottom: 10px; } .main-left { width:240px; height: 300px; background: rgb(153, 27, 27); float: left; } .main-right { width: 720px; height: 300px; background: rgb(30, 32, 155); float: right; } </style>
3、通栏平均分布
<body> <div class="w"> <div class="nav"></div> </div> <div class="main"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </div> <div class="w"> <div class="footer"></div> </div> </body>
<style> *{ padding: 0; margin: 0; } .w { height: 100px; background: rgb(231, 221, 221); } .nav{ width: 960px; height: 100px; background: rgb(163, 138, 138); margin: 0 auto; } .main{ width: 960px; height: 300px; background: rgb(122, 62, 62); margin: 10px auto; } .box1, .box2, .box3, .box4 { width: 232px; height: 300px; float: left; background: rgb(32, 24, 148); } .box2{ background: rgb(173, 84, 84); margin: 0 10px; } .box3{ background: rgb(49, 5, 5); margin-right: 10px; } .box4{ float: right; background: rgb(42, 185, 23); } .footer{ width: 960px; height: 100px; background: rgb(224, 126, 126); margin: 0 auto; } </style>
