前端笔试题整理(牛客网)

Author Avatar
FanShen 3月 20, 2018
  1. 请使用两种不同的CSS方法(要求dom结构不同)实现下图所示的条形图。从左到右的条形分别记为A,B,C,D,E。A的高度为30%,颜色为#f00;B的高度为50%,颜色为#ddd;C的高度为70%,颜色为#0fd;D的高度为50%,颜色为#ff0;E的高度为30%,颜色为#234,每个条形之间的距离可以任意设置(可以考虑使用CSS3新属性来实现)。
  • 用margin方法来对齐底部
<div class="container">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
    <div class="item item5"></div>
</div>
<style>
.container {
    height: 100px;
    width:200px;
    position: relative;
}
.item {
    width: 10px;
    position: absolute;
}
.item1 {
    height: 30%;
    top: 70%;
    background-color: #f00;
    left: 10px;
}
.item2 {
    height: 50%;
    top: 50%;
    background-color: #ddd;
    left: 30px;
}
.item3 {
    height: 70%;
    top: 30%;
    background-color: #0fd;
    left: 50px;
}
.item4 {
    height: 50%;
    top: 50%;
    background-color: #ff0;
    left: 70px;
}
.item5 {
    height: 30%;
    top: 70%;
    background-color: #234;
    left: 90px;
}
</style>
  • 弹性盒子
<div class="container">
    <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>
<style>
.container {
    width: 200px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}
.flex-box {
    width: 10px;
}
.flex-box:nth-child(1) {
    height: 30%;
    background-color: #f00;
}
.flex-box:nth-child(2) {
    height: 50%;
    background-color: #ddd;
}
.flex-box:nth-child(3) {
    height: 70%;
    background-color: #0fd;
}
.flex-box:nth-child(4) {
    height: 50%;
    background-color: #ff0;
}
.flex-box:nth-child(5) {
    height: 30%;
    background-color: #234;
}
</style>