<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Grid demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
*{margin:0;box-sizing: border-box}
html, body {font-size: 15px;line-height: 1.5}
.left{float:left}
.right{float:right}
.center{text-align:center}
.container {margin: auto;}
.row{clear: both;display: table;width: 100%;}
.col{float: left;padding: 0 5px;margin-bottom:10px}
.mtop{margin-top:10px}
@media (max-width: 480px){
.container{width: 98%}
.col.s1{width: 8.33333%}
.col.s2{width: 16.6667%}
.col.s3{width: 25%}
.col.s4{width: 33.3333%}
.col.s5{width: 41.6667%}
.col.s6{width: 50%}
.col.s7{width: 58.3333%}
.col.s8{width: 66.6667%}
.col.s9{width: 75%}
.col.s10{width: 83.3333%}
.col.s11{width: 91.6667%}
.col.s12{width: 100%}
}
@media (min-width: 481px){
.container{width: 96%}
.col.m1{width: 8.33333%}
.col.m2{width: 16.6667%}
.col.m3{width: 25%}
.col.m4{width: 33.3333%}
.col.m5{width: 41.6667%}
.col.m6{width: 50%}
.col.m7{width: 58.3333%}
.col.m8{width: 66.6667%}
.col.m9{width: 75%}
.col.m10{width: 83.3333%}
.col.m11{width: 91.6667%}
.col.m12{width: 100%}
}
@media (min-width: 981px){
.container{width: 94%}
.col.l1{width: 8.33333%}
.col.l2{width: 16.6667%}
.col.l3{width: 25%}
.col.l4{width: 33.3333%}
.col.l5{width: 41.6667%}
.col.l6{width: 50%}
.col.l7{width: 58.3333%}
.col.l8{width: 66.6667%}
.col.l9{width: 75%}
.col.l10{width: 83.3333%}
.col.l11{width: 91.6667%}
.col.l12{width: 100%}
}
@media (min-width: 1280px){
.container{width: 1200px}
}
.box{box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.2);padding: 5px 0 15px;}
</style>
</head>
<body>
<div class="container mtop">
<div class="row center">
<div class="col s12 m6 l3">
<div class="box">
<h3>Responsive</h3><br>
<p>Built-in responsiveness</p>
</div>
</div>
<div class="col s12 m6 l3">
<div class="box">
<h3>Standard CSS</h3><br>
<p>Standard CSS only</p>
</div>
</div>
<div class="col s12 m6 l3">
<div class="box">
<h3>Design</h3><br>
<p>Paper like design</p>
</div>
</div>
<div class="col s12 m6 l3">
<div class="box">
<h3>Design</h3><br>
<p>Equal across platforms</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row center">
<div class="col s12 m6 l3">
<div class="box">
<h3>Responsive</h3><br>
<p>Built-in responsiveness</p>
</div>
</div>
<div class="col s12 m6 l3">
<div class="box">
<h3>Standard CSS</h3><br>
<p>Standard CSS only</p>
</div>
</div>
<div class="col s12 m6 l3">
<div class="box">
<h3>Design</h3><br>
<p>Paper like design</p>
</div>
</div
<div class="col s12 m6 l3">
<div class="box">
<h3>Design</h3><br>
<p>Equal across platforms</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row center">
<div class="col s12 m6 l3">
<div class="box">
<h3>Responsive</h3><br>
<p>Built-in responsiveness</p>
</div>
</div>
<div class="col s12 m6 l3">
<div class="box">
<h3>Standard CSS</h3><br>
<p>Standard CSS only</p>
</div>
</div>
<div class="col s12 m6 l3">
<div class="box">
<h3>Design</h3><br>
<p>Paper like design</p>
</div>
</div>
<div class="col s12 m6 l3">
<div class="box">
<h3>Design</h3><br>
<p>Equal across platforms</p>
</div>
</div>
</div>
</div>
<script>$(function(){});</script>
</body>
</html>
Responsive
Built-in responsiveness
Standard CSS
Standard CSS only
Design
Paper like design
Design
Equal across platforms
Responsive
Built-in responsiveness
Standard CSS
Standard CSS only
Design
Paper like design
Design
Equal across platforms
Responsive
Built-in responsiveness
Standard CSS
Standard CSS only
Design
Paper like design
Design
Equal across platforms
No comments:
Post a Comment