@ustack/uskin
Version:
A graceful framework which provides developers another chance to build an amazing site.
35 lines • 2.17 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Layout Sample</title>
<link href="../../dist/css/uskin.css" rel="stylesheet">
<style type="text/css">
.container {
background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%, transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%, transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
}
.w-960 {width: 960px;margin:20px auto;}
.tra-row .col {padding: 40px 0;}
.tra-row .col:nth-child(2n) {background-color: rgba(24, 115, 216, 0.5);}
.tra-row .col:nth-child(2n+1) {background-color: rgba(24, 115, 216, 0.7);}
</style>
</head>
<body>
<div class="container">
<div class="tra-row">
<div class="row-col-8 col t-center">33.3%</div>
<div class="row-col-8 col t-center">33.3%</div>
<div class="row-col-8 col t-center">33.3%</div>
</div>
</div>
<div class="container w-960">
<div class="tra-row">
<div class="row-col-2 col t-center">8.33%</div>
<div class="row-col-4 col t-center">16.67%</div>
<div class="row-col-6 col t-center">25%</div>
<div class="row-col-12 col t-center">50%</div>
</div>
</div>
</body>
</html>