960栅格系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* 定义容器 */ .container_12{ margin-left: auto; margin-right: auto; width: 960px; } /* 栅格的全局变量 */ .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8, .grid_9,.grid_10,.grid_11,.grid_12{ display: inline; float: left; margin-left: 10px; margin-right: 10px; text-align: center; background-color: pink; margin-top: 15px; } /* 分别设置栅格宽度 */ .container_12 .grid_1{ width: 60px; } .container_12 .grid_2{ width: 140px; } .container_12 .grid_3{ width: 220px; } .container_12 .grid_4{ width: 300px; } .container_12 .grid_5{ width: 380px; } .container_12 .grid_6{ width: 460px; } .container_12 .grid_7{ width: 540px; } .container_12 .grid_8{ width: 620px; } .container_12 .grid_9{ width: 700px; } .container_12 .grid_10{ width: 780px; } .container_12 .grid_11{ width: 860px; } .container_12 .grid_12{ width: 940px; } </style> </head> <body> <div class="container_12"> <div class="grid_12">940</div> <div class="grid_1">60</div> <div class="grid_11">860</div> <div class="grid_2">140</div> <div class="grid_10">780</div> <div class="grid_3">220</div> <div class="grid_9">700</div> <div class="grid_4">300</div> <div class="grid_8">620</div> <div class="grid_5">380</div> <div class="grid_7">700</div> <div class="grid_6">460</div> <div class="grid_6">460</div> </div> </body> </html>