用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>
显示效果:
原文地址:https://blog.csdn.net/tangxiujiang
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。