第一天
1.用css实现单行文本溢出省略以及多行文本溢出省略
2.用css实现一个音乐抖动条
css实现扇形可以用伪类矩形旋转一个角度,来遮挡父容器的圆形,父容器溢出隐藏
第二天
1. 写出3种js数组去重的方法,并求出效率最高的一种(10万条数据下的测试结果）
2.用css实现单行文本溢出省略以及多行文本溢出省略
第三天
第四天
1. js实现数组中的最大差值
2. 为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？
当我们设置某个元素的属性float为left或者right时，会出现浮动，浮动元素不在文档流，所以文档流的物理位置表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
浮动带来的问题：
1.父元素的高度无法被撑开，影响与父元素同级的元素
2.与浮动元素同级的非浮动元素（ 内联元素） 会跟随其后
3.若非第一个元素浮动， 则该元素之前的元素也需要浮动， 否则会影响页面显示的结构。
清除浮动的方式：
1.父级div 定义height
2.最后一个浮动元素后加空div 标签并添加样式clear:both
3.包含浮动元素的父标签添加样式overflow 为hidden 或auto
4.父级div 定义zoom
5.伪对象clear 或者display:table + clear
第五天
第一题
使用CSS3实现一个3D立方体轮播图
<!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>
.container {
position: relative;
width: 500px;
height: 500px;
margin: 120px auto;
transform-style: preserve-3d;
transform: rotateX(-5deg) rotateY(45deg);
transform-origin: 250px 250px 250px;
animation: rotate 6s infinite;
}
.container .page {
position: absolute;
width: 500px;
height: 500px;
text-align: center;
line-height: 500px;
color: #fff;
background-size: cover;
}
.container .page:first-child {
background-image: url(./01.png);
background-color: rgba(0,0,0,.2);
}
.container .page:nth-child(2) {
transform: rotateX(90deg);
transform-origin: 0 0;
transition: transform 10s;
background-color: rgba(179, 15, 64, 0.6);
background-image: url(./02.png);
}
.container .page:nth-child(3) {
transform: translateZ(500px);
background-color: rgba(22, 160, 137, 0.7);
background-image: url(./03.png);
}
.container .page:nth-child(4) {
transform: rotateX(-90deg);
transform-origin: -500px 500px;
background-color: rgba(210, 212, 56, 0.2);
background-image: url(./04.png);
}
.container .page:nth-child(5) {
transform: rotateY(-90deg);
transform-origin: 0 0;
background-color: rgba(201, 23, 23, 0.6);
background-image: url(./02.png);
}
.container .page:nth-child(6) {
transform: rotateY(-90deg) translateZ(-500px);
transform-origin: 0 300px;
background-color: rgba(16, 149, 182, 0.2);
background-image: url(./04.png);
}
@keyframes rotate {
0%, 20% {
transform: rotateX(-5deg) rotateY(45deg);
}
30%, 45% {
transform: rotateX(-5deg) rotateY(105deg);
}
55%, 70% {
transform: rotateX(-5deg) rotateY(195deg);
}
85%, 100% {
transform: rotateX(-5deg) rotateY(285deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="page">A</div>
<div class="page">B</div>
<div class="page">C</div>
<div class="page">D</div>
<div class="page">E</div>
<div class="page">F</div>
</div>
</body>
</html>第二题
使用JS实现一个获取浏览器URL中指定参数值的方法
第三题
从级联数据中，写一个通用公式，获取最低层级的路径
原文链接：https://mp.weixin.qq.com/s/laFHVohGQrx2klh8zZP5Dw
作者：趣谈前端