1.自己制作栅格布局
Posted qianzi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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> .grid{ width:100%; } .grid *{box-sizing: border-box;} .row:before, .row:after{ content:‘‘; display:table; clear: both; } [class*=‘col-‘]{ float:left; min-height:1px; width:16.66%; box-sizing: border-box; } .col-1 { width: 8.33333333%; } .col-2 { width: 16.66666667%; } .col-3 { width: 25%; } .col-4 { width: 33.33333333%; } .col-5 { width: 41.66666667%; } .col-6 { width: 50%; } .col-7 { width: 58.33333333%; } .col-8 { width: 66.66666667%; } .col-9 { width: 75%; } .col-10 { width: 83.33333333%; } .col-11 { width: 91.66666667%; } .col-12 { width: 100%; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } .col-o-1 { margin-left: 8.33333333%; } .col-o-2 { margin-left: 16.66666667%; } .col-o-3 { margin-left: 25%; } /* 网站统一边距规范*/ .pl8{ padding-left: 8px;} .pl10{ padding-left: 10px;} .pl20{ padding-left: 20px;} .pr8{ padding-right: 8px;} .pr10{ padding-right: 10px;} .pr20{ padding-right: 20px;} .pt8{ padding-right: 8px;} .pt10{ padding-right: 10px;} .pt20{ padding-right: 20px;} .pb8{ padding-right: 8px;} .pb10{ padding-right: 10px;} .pb20{ padding-right: 20px;} .ml8{ margin-left: 8px;} .ml10{ margin-left: 10px;} .ml20{ margin-left: 20px;} .mr8{ margin-right: 8px;} .mr10{ margin-right: 10px;} .mr20{ margin-right: 20px;} .mt8{ margin-right: 8px;} .mt10{ margin-right: 10px;} .mt20{ margin-right: 20px;} .mb8{ margin-right: 8px;} .mb10{ margin-right: 10px;} .mb20{ margin-right: 20px;} .text{ width: 500px; height: 600px; border: 1px solid red; } .sidebar{ height: 300px; border: 1px solid blue; } .text1{ border: 1px solid yellow; height: 300px; } .text2{ border: 1px solid red; height: 200px; } </style> </head> <body> <div class="test" style="width:600px;height:600px;"> <div class="row mt20"> <div class="col-6 pt10 pr10 pb10 pl20" style="height:200px;"> <div style="height:30px;line-height: 30px;"> 这是一个标题 </div> <div class="row mt10" style="height:50px;"> <div class="col-10">11</div> <div class="col-2">22</div> </div> </div> <div class="col-6 pt10 pr10 pb10 pl20">bb</div> </div> </div> <div class="mydemo"> <div class="row" height="3000"> text </div> <div class="row"> <div class="col-4" height="300px">side</div> <div class="col-8" height="300px">main</div> </div> </div> <div class="text"> <div class="row"> <div class="col-2 sidebar">sidebar</div> <div class="col-10"> <div class="row"> <div class="col-4 text1"> <div class="text2"></div> </div> <div class="col-4 text1" ><div class="text2"></div></div> <div class="col-4 text1"><div class="text2"></div></div> </div> </div> </div> </div> <div class="grid outline"> <div class="row"> <div class="col-2"><p>col-1</p></div> <div class="col-2"><p>col-1</p></div> <div class="col-2"><p>col-1</p></div> <div class="col-2"><p>col-1</p></div> <div class="col-2"><p>col-1</p></div> <div class="col-2"><p>col-1</p></div> </div> <div class="row"> <div class="col-2"><p>col-2</p></div> <div class="col-2"><p>col-2</p></div> <div class="col-2"><p>col-2</p></div> </div> <div class="row"> <div class="col-3"><p>col-3</p></div> <div class="col-3"><p>col-3</p></div> </div> </div> </body> </html>
以上是关于1.自己制作栅格布局的主要内容，如果未能解决你的问题，请参考以下文章