核心提示：用css实现柱状图，要求DOM、CSS不一样1、DOM结构全部都用p，给父p设置宽高，给子p设置同样的margin width display:inline-block，然后在分别给每一个子p设置he...
用css实现柱状图，要求DOM、CSS不一样
1、DOM结构全部都用p，给父p设置宽高，给子p设置同样的margin width display:inline-block，然后在分别给每一个子p设置height background-color
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.parent {
width: 600px;
height: 300px;
}
p [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>
<p class="parent">
<p class="child1"></p>
<p class="child2"></p>
<p class="child3"></p>
<p class="child4"></p>
<p class="child5"></p>
</p>
</body>
</html>
显示效果：
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>
显示效果：
