用css实现柱状图，要求DOM不一样

曾经终败给现在 2022-05-29 07:13 89阅读 0赞

用css实现柱状图，要求DOM、CSS不一样

1、DOM结构全部都用div，给父div设置宽高，给子div设置同样的margin  width   display:inline-block，然后在分别给每一个子div设置height  background-color

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style>
    			.parent {
    				width: 600px;
    				height: 300px;
    			}
    
    			div [class*="child"] {
    				display: inline-block;
    				margin: 0 10px;
    				width: 50px;
    			}
    
    			.child1 {
    				height: 30%;
    				background-color: #f00;
    			}
    			.child2 {
    				height: 80%;
    				background-color: #ddd;
    			}
    			.child3 {
    				height: 70%;
    				background-color: #0fd;
    			}
    			.child4 {
    				height: 60%;
    				background-color: #ff0;
    			}
    			.child5 {
    				height: 90%;
    				background-color: #234;
    			}
    	</style>
    </head>
    <body>
    	<div class="parent">
    	    <div class="child1"></div>
    	    <div class="child2"></div>
    	    <div class="child3"></div>
    	    <div class="child4"></div>
    	    <div class="child5"></div>
    	</div>
    </body>
    </html>

显示效果：

![Image 1][]

2、DOM用ul  li，给li设置display:inline-block属性

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style>
    		body{
    			margin: 0;
    			padding:0;
    		}
    
    		ul{
    			list-style: none;
    			width: 600px;
    			height: 600px;
    		}
    
    		li{
    			width:60px;
    			display: inline-block;
    			margin:0 20px;
    		}
    
    		.bar1 {
    				height: 30%;
    				background-color: #f00;
    		}
    		.bar2 {
    			height: 80%;
    			background-color: #ddd;
    		}
    		.bar3 {
    			height: 70%;
    			background-color: #0fd;
    		}
    		.bar4 {
    			height: 60%;
    			background-color: #ff0;
    		}
    		.bar5 {
    			height: 90%;
    			background-color: #234;
    		}
    	</style>
    </head>
    <body>
    	<ul>
    		<li class="bar1"></li>
    		<li class="bar2"></li>
    		<li class="bar3"></li>
    		<li class="bar4"></li>
    		<li class="bar5"></li>
    	</ul>
    </body>
    </html>

显示效果：

![Image 1][]

[Image 1]: