图片. png
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- html{
- background: #6a8db1;
- }
- .aside{
- background-color:rgba(244,251,251,0.47);
- border: 1px solid #FFFFFF;
- width: 200px;
- text-align: center;
- color: #FFFFFF;
- }
- .aside div{
- height: 55px;
- border-bottom: 1px solid #FFFFFF;
- line-height: 55px;
- }
- .aside div font{
- font-weight: 800;
- }
- .aside div span{
- font-weight: 800;
- margin-left:18px;
- }
- </style>
- </head>
- <body>
- <div class="aside">
- <div>
- <font > 留置室 1 </font>
- <span>10 人 </span>
- </div>
- <div>
- <font > 留置室 1 </font>
- <span>4 人 </span>
- </div>
- <div>
- <font > 留置室 1 </font>
- <span>12 人 </span>
- </div>
- <div>
- <font > 留置室 1 </font>
- <span>6 人 </span>
- </div>
- <div>
- <font > 留置室 1 </font>
- <span>8 人 </span>
- </div>
- </div>
- </body>
- </html>
颜色可根据调色板自行调色
图片. png
来源: http://www.jianshu.com/p/540cb34436b8