昨天朋友去公司面试了一波，某公司给来了三道机试题，限时15分钟写出这三道布局题（要求务必完成前面两道），朋友拍了个照片发群里，然后我想着帮他来着，没想到一看到题目我一脸懵逼，只能怪自己还是不够努力，还处于小菜鸟阶段，限时写的话我感觉自己确实不能信手拈来，今天抽空把题目做了下，当然肯定有好多种方式实现，精力有限就各总结一种吧。
1.间距50像素，容器自适应
要求实现间距50像素，容器自适应
- HTML部分
<ul class="box">
<li></li>
<li></li>
</ul>
- CSS部分
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
/*用flex布局*/
display: flex;
padding: 0 25px;
}
li{
flex: 1;
background-color: #0ee69c;
margin:50px 25px;
height: 100px;
}
2.两边容器固定130像素 中间容器自适应距离左右容器10像素
要求实现以上效果，有很多种布局方式
- HTML部分
<div class="outer">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
- CSS部分
*{
margin: 0;
padding: 0;
list-style: none;
}
.left,.right{
width: 130px;
height: 200px;
background-color: #b7aa00;
}
.left{
float: left;
margin-right: 15px;
}
.right{
float: right;
margin-left: 15px;
}
.center{
height: 200px;
background-color: #eb6100;
overflow: hidden;
}
3.实现switch开关效果
开关关闭跟打开的效果示例图
- HTML部分
<div class="switch">
<input id="input" class="toggle" type="checkbox">
<label for="input"></label>
</div>
- CSS部分
*{
margin: 0;
padding: 0;
}
.switch{
margin: 100px auto;
width: 400px;
}
.toggle{
position: absolute;
margin-left: -9999px;
}
.toggle + label{
display: block;
position: relative;
cursor: pointer;
}
input.toggle + label{
width: 120px;
height: 60px;
background-color: #ddd;
padding: 2px;
border-radius: 60px;
}
input.toggle + label:before,
input.toggle + label:after{
position: absolute;
display: block;
content: '';
top: 1px;
left: 1px;
bottom: 1px;
right: 0;
}
input.toggle + label:before{
background-color: #f1f1f1;
border-radius: 60px;
transition: background 0.4s;
}
input.toggle + label:after{
width: 60px;
height: 60px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: margin 0.4s;
}
input.toggle:checked + label:before {
background-color: orange;
}
input.toggle:checked + label:after{
margin-left: 64px;
}
