请使用两种不同的CSS方法（要求dom结构不同）实现下图所示的条形图。从左到右的条形分别记为A,B,C,D,E。A的高度为30%，颜色为#f00；B的高度为80%，颜色为#ddd；C的高度为70%，颜色为#0fd；D的高度为60%，颜色为#ff0；E的高度为90%，颜色为#234，每个条形之间的距离可以任意设置（可以考虑使用CSS3新属性来实现）。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#box {
width: 400px;
height: 400px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-end;
}
#a,
#b,
#c,
#d,
#e {
width: 50px;
order: 1;
}
#baseline {
height: 100%;
width: 2px;
background-color: #000;
}
#a {
background-color: #f00;
height: 30%;
}
#b {
background-color: #ddd;
height: 80%;
}
#c {
background-color: #0fd;
height: 70%;
}
#d {
background-color: #ff0;
height: 60%;
}
#e {
background-color: #234;
height: 90%;
}
#box2 {
list-style: none;
height: 200px;
position: relative;
}
#box2>li {
width: 50px;
margin-left: 10px;
display: inline-block;
bottom: 0;
}
#box2>#base {
height: 100%;
width: 2px;
background-color: #000;
}
#a2 {
background-color: #f00;
height: 30%;
}
#b2 {
background-color: #ddd;
height: 80%;
}
#c2 {
background-color: #0fd;
height: 70%;
}
#d2 {
background-color: #ff0;
height: 60%;
}
#e2 {
background-color: #234;
height: 90%;
}
</style>
</head>
<body>
<div id="box">
<div id="baseline"></div>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
</div>
<ul id="box2">
<li id="base"></li>
<li id="a2"></li>
<li id="b2"></li>
<li id="c2"></li>
<li id="d2"></li>
<li id="e2"></li>
</ul>
</body>
</html>
<html>
<head>
<title></title>
<style>
#box {
width: 400px;
height: 400px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-end;
}
#a,
#b,
#c,
#d,
#e {
width: 50px;
order: 1;
}
#baseline {
height: 100%;
width: 2px;
background-color: #000;
}
#a {
background-color: #f00;
height: 30%;
}
#b {
background-color: #ddd;
height: 80%;
}
#c {
background-color: #0fd;
height: 70%;
}
#d {
background-color: #ff0;
height: 60%;
}
#e {
background-color: #234;
height: 90%;
}
#box2 {
list-style: none;
height: 200px;
position: relative;
}
#box2>li {
width: 50px;
margin-left: 10px;
display: inline-block;
bottom: 0;
}
#box2>#base {
height: 100%;
width: 2px;
background-color: #000;
}
#a2 {
background-color: #f00;
height: 30%;
}
#b2 {
background-color: #ddd;
height: 80%;
}
#c2 {
background-color: #0fd;
height: 70%;
}
#d2 {
background-color: #ff0;
height: 60%;
}
#e2 {
background-color: #234;
height: 90%;
}
</style>
</head>
<body>
<div id="box">
<div id="baseline"></div>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
</div>
<ul id="box2">
<li id="base"></li>
<li id="a2"></li>
<li id="b2"></li>
<li id="c2"></li>
<li id="d2"></li>
<li id="e2"></li>
</ul>
</body>
</html>
发表于 2019-03-13 11:41:32
回复(0)
<!DOCTYPE html><html leng='en><head><meta charset='utf8'><title>条形图</title><style>.wrap{width: 232px; height: 400px; border: 1px solid #CCC; margin: 100px auto;}.wrap span{display: inline-block; width: 30px; margin: 40px 0 0 10px;}.wrap span:nth-of-type(1){height: 30%; background-color: #f00;}.wrap span:nth-of-type(2){height: 80%; background-color:#DDD}.wrap span:nth-of-type(3){height: 70%; background-color: #0fd;}.wrap span:nth-of-type(4){height: 60%; background-color: #ff0;}.wrap span:nth-of-type(5){height: 90%; background-color: #234;}</style></head><div class='wrap'><span></span><span></span><span></span><span></span><span></span></div><body></body></html>
编辑于 2018-03-13 15:23:53
回复(0)
<div style="height:100px;width:200px;position:relative;border-left: 1px solid #000;">
<div style="height:30%;width:10px;background-color:#f00;position:absolute;top:70%;left:10px;"></div>
<div style="height:80%;width:10px;background-color:#ddd;position:absolute;top:20%;left:30px;"></div>
<div style="height:70%;width:10px;background-color:#0fd;position:absolute;top:30%;left:50px;"></div>
<div style="height:60%;width:10px;background-color:#ff0;position:absolute;top:40%;left:70px;"></div>
<div style="height:90%;width:10px;background-color:#234;position:absolute;top:10%;left:100px;"></div>
</div>
发表于 2017-07-26 19:30:58
回复(2)
DOM结构相同orz：
<div id="container">
<div class="rect rect1"></div>
<div class="rect rect2"></div>
<div class="rect rect3"></div>
<div class="rect rect4"></div>
<div class="rect rect5"></div>
</div>
方法一：笨笨的用margin来对其底部
<style type="text/css">
#container{
width: 320px;
height: 300px;
border-left: 1px solid black;
border-bottom: 1px solid gray;
}
.rect{
float: left;
width: 50px;
margin-left: 10px;
}
.rect1{
height:30%;
margin-top: 70%;
background-color: #f00;
}
.rect2{
height:80%;
margin-top: 20%;
background-color: #ddd;
}
.rect3{
height:70%;
margin-top: 30%;
background-color: #0fd;
}
.rect4{
height:60%;
margin-top: 40%;
background-color: #ff0;
}
.rect5{
height:90%;
margin-top: 10%;
background-color: #234;
}
</style>
方法二：弹性盒模型
#container{
display: flex; /*弹性盒模型容器*/
display: -webkit-flex;
justify-content: space-around; /*剩余空白空间平均分配,环绕子元素*/
align-items: flex-end; /*子元素对齐底部*/
width: 320px;
height: 300px;
border-left: 1px solid black;
border-bottom: 1px solid gray;
}
.rect{
float: left;
width: 50px;
}
.rect1{
height:30%;
background-color: #f00;
}
.rect2{
height:80%;
background-color: #ddd;
}
.rect3{
height:70%;
background-color: #0fd;
}
.rect4{
height:60%;
background-color: #ff0;
}
.rect5{
height:90%;
background-color: #234;
}
</style>
发表于 2017-08-19 21:13:15
回复(8)
方案一：
* {
margin: 0;
padding: 0;
}
#context {
width: 500px;
height: 300px;
margin: 0 auto;
display: flex;
justify-content: space-around;
align-items: flex-end;
}
.flex-box {
width: 15%;
}
.flex-box:nth-child(1) {
height: 30%;
background-color: #f00;
}
.flex-box:nth-child(2) {
height: 80%;
background-color: #ddd;
}
.flex-box:nth-child(3) {
height: 70%;
background-color: #0fd;
}
.flex-box:nth-child(4) {
height: 60%;
background-color: #ff0;
}
.flex-box:nth-child(5) {
height: 90%;
background-color: #234;
} <div id="context"> <div class="flex-box"></div> <div class="flex-box"></div> <div class="flex-box"></div> <div class="flex-box"></div> <div class="flex-box"></div> </div>方案二：
发表于 2017-07-23 16:27:35
回复(2)
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
<div class="child5"></div>
</div>
.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;
}
.parent {
width: 600px;
height: 300px;
overflow: hidden;
}
div [class*="child"] {
display: inline-block;
margin: 0 10px;
width: 50px;
}
.child1 {
height: 100%;
transform: translateY(70%);
background-color: #f00;
}
.child2 {
height: 100%;
transform: translateY(20%);
background-color: #ddd;
}
.child3 {
height: 100%;
transform: translateY(30%);
background-color: #0fd;
}
.child4 {
height: 100%;
transform: translateY(40%);
background-color: #ff0;
}
.child5 {
height: 90%;
transform: translateY(10%);
background-color: #234;
}
发表于 2017-08-21 15:01:14
回复(0)
dom结构要不同
<style>
.box{
background-color:#fff;
position:relative;
left:20px;
border-left:3px solid #234;
border-bottom:3px solid #ccc;
width:200px;
height:200px;
overflow: hidden;
}
.li{
display: inline-block;
position: relative;
margin:0 8px;
width:20px;
height:200px;
}
</style>
1. 横轴纵轴用大盒子的边框表示
<div class="box">
<div class="li" style="background-color: #f00;top:70%"></div>
<div class="li" style="background-color: #ddd;top:20%"></div>
<div class="li" style="background-color: #0fd;top:30%"></div>
<div class="li" style="background-color: #ff0;top:40%"></div>
<div class="li" style="background-color: #234;top:10%"></div>
</div>
2.
<style>
.box{
display: inline-block;
background-color:#fff;
position:relative;
left:20px;
width:200px;
height:200px;
overflow: hidden;
}
.li{
display: inline-block;
position: relative;
margin:0 8px;
width:20px;
height:200px;
}
.line {
display: inline-block;
position: absolute;
width:3px;
height:200px;
background-color: #234;
left:10px;
}
.line- {
position: absolute;
width:250px;
height:3px;
background-color: #ccc;
margin-top: -5px;
}
</style>
2.横轴数轴用两个div表示
<div class="line"></div>
<div class="box">
<li class="li" style="background-color: #f00;top:70%"></li>
<li class="li" style="background-color: #ddd;top:20%"></li>
<li class="li" style="background-color: #0fd;top:30%"></li>
<li class="li" style="background-color: #ff0;top:40%"></li>
<li class="li" style="background-color: #234;top:10%"></li>
</div>
<div class="line-"></div>
发表于 2022-09-20 16:35:11
回复(0)
* {
margin: 0;
padding: 0;
}
li {
margin: 0 10px;
list-style: none;
float: left;
width: 20px;
background-color: pink;
}
.box ul {
transform: rotateX(180deg);
position: relative;
width: 200px;
height: 200px;
}
.A {
height: 30%;
background-color: #f00;
}
.B {
height: 80%;
background-color: #ddd;
}
.C {
height: 70%;
background-color: #0fd;
}
.D {
height: 60%;
background-color: #ff0;
}
.E {
height: 90%;
background-color: #234;
}
<body>
<div class="box">
<ul>
<li class="A"></li>
<li class="B"></li>
<li class="C"></li>
<li class="D"></li>
<li class="E"></li>
</ul>
</div>
</body>
发表于 2022-03-19 19:43:41
回复(0)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0 auto;
}
ul,li {
list-style: none;
}
/* 方法一 */
.container {
width: 480px;
padding-left: 10px;
border-bottom: 5px solid gray;
}
.boxs1 {
width: 480px;
height: 300px;
display: flex;
justify-content: space-around;
align-items: flex-end;
border-left: 1px solid #000;
}
.box {
width: 10%;
}
.box:nth-child(1){
height: 30%;
background-color: #f00;
}
.box:nth-child(2) {
height: 80%;
background-color: #ddd;
}
.box:nth-child(3) {
height: 70%;
background-color: #0fd;
}
.box:nth-child(4) {
height: 60%;
background-color: #ff0;
}
.box:nth-child(5) {
height: 90%;
background-color: #234;
}
.box2 {
width: 480px;
height: 300px;
border-bottom: 5px solid gray;
position: relative;
padding: 10px;
}
.box2-ul {
padding-left: 20px;
position: absolute;
bottom: 0;
border-left: 1px solid #000;
}
.box2-ul>li {
margin-right: 35px;
display: inline-block;
width: 50px;
vertical-align: bottom;
}
.i1 {
height: 90px;
background-color: #f00;
}
.i2 {
height: 240px;
background-color: #ddd;
}
.i3 {
height: 210px;
background-color: #0fd;
}
.i4 {
height: 180px;
background-color: #ff0;
}
.i5 {
height: 270px;
background-color: #234;
}
</style>
</head>
<body>
<div class="container">
<div class="boxs1">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
<div class="box2">
<ul class="box2-ul">
<li class="i1"></li>
<li class="i2"></li>
<li class="i3"></li>
<li class="i4"></li>
<li class="i5"></li>
</ul>
</div>
</body>
</html>
发表于 2021-03-12 16:01:14
回复(0)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html, body { width: 100%; padding: 0; margin: 0; } .wrapper { width: 500px; height: 200px; display: flex; align-items: flex-end; margin: 30px auto; border-left: 1px solid black; } .red { background-color: #f00; width: 20px; height: 30%; } .grey { background-color: #ddd; width: 20px; height: 80%; } .qing { background-color: #0fd; width: 20px; height: 70%; } .yellow { background-color: #ff0; width: 20px; height: 60%; } .darkblue { background-color: #234; width: 20px; height: 90%; } </style> </head> <body> <div class="wrapper"> <div class="red"></div> <div class="grey"></div> <div class="qing"></div> <div class="yellow"></div> <div class="darkblue"></div> </div> </body> </html>
发表于 2019-12-04 20:01:43
回复(0)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>柱形图</title>
</head>
<style>
#display{
width: 250px;
height: 280px;
border-bottom: 1px #EBEBEB solid;
padding: 0 20px;
}
#display ul{
margin: 0;
padding: 0;
list-style-type: none;
height: 100%;
}
#border{
width: 2px;
height: 100%;
background-color: #2E2E2E;
}
li{
float: left;
display: block;
margin: 0 5px;
width: 30px;
}
</style>
<body>
<div id="display">
<ul>
<li id="border"></li>
<li style="background-color: #f00;height:30%"></li>
<li style="background-color: #ddd;height:80%"></li>
<li style="background-color: #0fd;height:70%"></li>
<li style="background-color: #ff0;height:60%"></li>
<li style="background-color: #234;height:90%"></li>
</ul>
</div>
</body>
<script>
var lis = document.getElementsByTagName("li");
for(let i = 0; i < lis.length; i++){
var height = lis[i].style.height;
lis[i].style.marginTop = [100 - parseInt(height)] * 2.8 + "px";
}
</script>
</html>
发表于 2019-09-20 16:59:35
回复(0)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style >
.outer {
display:grid;
grid-template-columns:repeat(5, 30px);
justify-content: space-evenly;
align-items: end;
height: 400px;
width: 500px;
border: 1px solid black;
}
.inner1{
height: 30%;
background: #f00;
}
.inner2{
height: 80%;
background: #ddd;
}
.inner3{
height: 70%;
background: #0fd;
}
.inner4{
height: 60%;
background: #ff0;
}
.inner5{
height: 90%;
background: #234;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1"></div>
<div class="inner inner2"></div>
<div class="inner inner3"></div>
<div class="inner inner4"></div>
<div class="inner inner5"></div>
</div>
</body>
</html> grid布局
发表于 2019-08-10 19:47:03
回复(0)
<!DOCTYPE html>
<html>
<head>
<title>aaaa</title>
<style type="text/css">
.bigBox{
width: 300px;
height: 300px;
border-left: 2px solid black;
border-bottom: 1px solid black;
}
.box{
float: left;
}
.box1{
margin-left: 10px;
width: 30px;
height: 30%;
background-color: #f00;
margin-top: 70%;
}
.box2{
margin-left: 10px;
width: 30px;
height: 80%;
background-color: #ddd;
margin-top: 20%;
}
.box3{
margin-left: 10px;
width: 30px;
height: 70%;
background-color: #0fd;
margin-top: 30%;
}
.box4{
margin-left: 10px;
width: 30px;
height: 60%;
background-color: #ff0;
margin-top: 40%;
}
.box5{
margin-left: 10px;
width: 30px;
height: 90%;
background-color: #234;
margin-top: 10%;
}
</style>
</head>
<body>
<div class="bigBox">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
</div>
</body>
</html>
发表于 2019-03-15 20:50:43
回复(0)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--方法1：最普通的方法--> <style> .box{ list-style: none; margin: 0; padding: 0; width:300px; height:300px; border-left:1px solid black; border-bottom: 1px solid gray; } .box > li{ float:left; width:50px; margin-left:10px; } .box_content1{ height:30%; margin-top:70%; background-color:#f00; } .box_content2{ height:80%; margin-top:20%; background-color:#ddd; } .box_content3{ height:70%; margin-top:30%; background-color:#0fd; } .box_content4{ height:60%; margin-top:40%; background-color:#ff0; } .box_content5{ height:90%; margin-top:10%; background-color:#234; } </style><!--方法2：弹性盒模型--> <style> .box{ list-style: none; margin: 0; padding: 0; width:300px; height:300px; border-left:1px solid black; border-bottom: 1px solid gray; /*弹性盒模型*/ display: flex; display:-webkit-flex; /*剩余空白空间均分*/ justify-content: space-around; /*子元素对齐底部*/ align-items:flex-end; } .box > li{ float:left; width:50px; } .box_content1{ height:30%; background-color:#f00; } .box_content2{ height:80%; background-color:#ddd; } .box_content3{ height:70%; background-color:#0fd; } .box_content4{ height:60%; background-color:#ff0; } .box_content5{ height:90%; background-color:#234; } </style>
<ul class="box"> <li class="box_content1"></li> <li class="box_content2"></li> <li class="box_content3"></li> <li class="box_content4"></li> <li class="box_content5"></li> </ul> </body> </html>
发表于 2019-02-24 16:59:28
回复(0)
问题信息
-
扫描二维码，关注牛客网
- 意见反馈
-
下载牛客APP，随时随地刷题
扫一扫，把题目装进口袋
- 求职之前，先上牛客
-
扫描二维码，进入QQ群
扫描二维码，关注牛客公众号
- 公司地址：北京市朝阳区北苑路北美国际商务中心K1座一层-北京牛客科技有限公司
- 联系方式：010-60728802 投诉举报电话：010-57596212（朝阳人力社保局）
- 牛客科技© All rights reserved admin@nowcoder.com
- 京ICP备14055008号-4 增值电信业务经营许可证 营业执照 人力资源服务许可证
-
京公网安备
11010502036488号
