用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>显示效果：
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>显示效果：
9346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
