之前进行了简易的制作,现在进行增加与改变。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box{
width:116px;
height: 76px;
margin: 2px;
background: rgb(75,174,180);
float: left;
}
.boxs{
width: 480px;
}
.w1{
width: 56px;
}
.w2{
width: 236px;
}
.c-b{
background: rgb(5,80,145);
}
.c-o{
background: rgb(245,175,61);
}
.c-g{
background: rgb(150,179,53);
}
.c-p{
background: rgb(121,24,105);
}
.c-r{
background: rgb(222,84,58);
}
</style>
</head>
<body>
<div class="boxs">
<div class="box">1</div>
<div class="box c-b">2</div>
<div class="box">3</div>
<div class="box c-o">4</div>
<div class="box c-g w1">5</div>
<div class="box c-g w1">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box c-b">9</div>
<div class="box">10</div>
<div class="box c-g w1">11</div>
<div class="box c-g w1">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box c-p w2">15</div>
<div class="box c-r w2">16</div>
</div>
</body>
</html>
效果如下:
该内容并不具备交互效果,请自行添加。