css实现条形图

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9     body {
10         margin:0 10px;
11         padding:0;
12     }
13     #box {
14         height: 300px;
15         width: 300px;
16         border-left: 1px solid #333;
17         border-bottom: 1px solid #ccc;
18     }
19     .rect1,.rect2,.rect3,.rect4,.rect5 {
20         float: left;
21         width: 40px;
22         margin-left: 15px;
23     }
24     .rect1 {
25         height: 30%;
26         margin-top: 70%; 
27         background-color: #f00;
28     }
29     .rect2 {
30         height: 80%;
31         margin-top: 20%; 
32         background-color: #ddd;
33     }
34     .rect3 {
35         height: 70%;
36         margin-top: 30%; 
37         background-color: #0fd;
38     }
39     .rect4 {
40         height: 60%;
41         margin-top: 40%; 
42         background-color: #ff0;
43     }
44     .rect5 {
45         height: 90%;
46         margin-top: 10%; 
47         background-color: #234;
48     }
49     </style>
50 </head>
51 <body>
52     <div id="box"> 
53         <div class="rect1"></div>
54         <div class="rect2"></div>
55         <div class="rect3"></div>
56         <div class="rect4"></div>
57         <div class="rect5"></div>
58     </div>
59 </body>
60 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style>
 9     body {
10         margin:0 10px;
11         padding:0;
12     }
13     #box {
14         justify-content: space-evenly;
15         display: flex;
16         align-items: flex-end; 
17         height: 300px;
18         width: 300px;
19         border-left: 1px solid #333;
20         border-bottom: 1px solid #ccc;
21     }
22     .item {
23         width:14%;
24     }
25     .rect1 {
26         height: 30%;
27         background:  #f00;
28     }
29     .rect2 {
30         height: 80%;
31         background: #ddd;
32     }
33     .rect3 {
34         height: 70%;
35         background: #0fd;
36     }
37     .rect4 {
38         height: 60%;
39         background: #ff0;
40     }
41     .rect5{
42         height: 90%;
43         background: #234;
44     }
45     </style>
46 </head>
47 <body>
48     <div id="box">
49         <span class="item rect1"></span>
50         <span class="item rect2"></span>
51         <span class="item rect3"></span>
52         <span class="item rect4"></span>
53         <span class="item rect5"></span>
54     </div>
55 </body>
56 </html>

猜你喜欢