（只做了六个题，浅浅发一下叭）
01水果拼盘
目录
01水果拼盘
/* TODO：待补充代码 */
#pond {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}02展开你的扇子
/*TODO：请补充 CSS 代码*/
#box:hover #item12{
transform: rotate(60deg);
}
#box:hover #item11{
transform: rotate(50deg);
}
#box:hover #item10{
transform: rotate(40deg);
}
#box:hover #item9{
transform: rotate(30deg);
}
#box:hover #item8{
transform: rotate(20deg);
}
#box:hover #item7{
transform: rotate(10deg);
}
#box:hover #item6{
transform: rotate(-10deg);
}
#box:hover #item5{
transform: rotate(-20deg);
}
#box:hover #item4{
transform: rotate(-30deg);
}
#box:hover #item3{
transform: rotate(-40deg);
}
#box:hover #item2{
transform: rotate(-50deg);
}
#box:hover #item1{
transform: rotate(-60deg);
}03和手机相处的时光
/*TODO：ECharts 的配置中存在错误，请改正*/
var option = {
title: {
text: "一周的手机使用时长",
},
xAxis: {
// type: "value",
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
},
yAxis: {
type: "value",
data: [0,1,2,3,4,5,6]
},
series: [
{
data: [2.5, 2, 2.6, 3.2, 4, 6, 5],
type: "line",
},
],
};
myChart.setOption(option);04灯的颜色变化
// TODO：完善此函数 显示红色颜色的灯
function red() {
document.getElementById("defaultlight").style.display="none"
document.getElementById("greenlight").style.display="none"
document.getElementById("redlight").style.display="inline-block"
}
// TODO：完善此函数 显示绿色颜色的灯
function green() {
document.getElementById("defaultlight").style.display="none"
document.getElementById("redlight").style.display="none"
document.getElementById("greenlight").style.display="inline-block"
}
// TODO：完善此函数
function trafficlights() {
setTimeout(function(){
red()
},3000)
setTimeout(function(){
green()
},6000)
}
trafficlights();06蓝桥知识网
HTML
<body>
<!--TODO：请补充代码-->
<div class="head">
<div class="banxin">
<div class="nav">
<div class="left">蓝桥知识网</div>
<span class="right">
<span class="content">首页</span>
<span class="content">热门技术</span>
<span class="content">使用手册</span>
<span class="content">知识库</span>
<span class="content">练习题</span>
<span class="content">联系我们</span>
<span class="content">更多</span>
</span>
</div>
<div class="one">蓝桥云课</div>
<div class="two">随时随地丰富你的技术栈！</div>
<div class="three">加入我们</div>
</div>
</div>
<div class="zhongjian">
<div class="banxin">
<div class="five">
<div class="four">
<div class="title">人工智能</div>
<div class="neirong">人工智能亦称智械、机器智能，指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。</div>
</div>
<div class="four">
<div class="title">前端开发</div>
<div class="neirong">前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。</div>
</div>
<div class="four">
<div class="title">后端开发</div>
<div class="neirong">后端开发是实现页面的交互逻辑，通过使用后端语言来实现页面的操作功能，例如登录、注册等。</div>
</div>
<div class="four">
<div class="title">信息安全</div>
<div class="neirong">ISO（国际标准化组织）的定义为：为数据处理系统建立和采用的技术、管理上的安全保护，为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="banxin">
<div class="six">© 蓝桥云课 2022</div>
<div class="seven">京公网安备 11010102005690 号 | 京 ICP 备 2021029920 号</div>
</div>
</div>
</body>CSS
/*
TODO：请补充代码
*/
* {
margin: 0;
padding: 0;
}
.banxin {
width: 1024px;
margin: auto;
}
.left {
font-size: 18px;
color: white;
float: left;
margin-right: 365px;
}
.right {
font-size: 16px;
color: white;
float: right;
}
.right span {
margin-right: 16px;
}
.nav {
padding-top: 13px;
height: 46px;
}
.one {
font-size: 45px;
color: black;
text-align: center;
margin-top: 30px;
}
.two {
margin-top: 62px;
font-size: 21px;
font-weight: 200;
color: white;
text-align: center;
}
.three {
width: 100px;
margin: auto;
font-size: 18px;
color: #efbfbf;
border: 1px solid #efbfbf;
border-radius: 2px;
box-shadow: inset 0 0 0 2px #efbfbf;
text-align: center;
margin-top: 36px;
}
.head {
height: 427px;
background-color: #a6b1e1;
}
.title {
font-size: 30px;
font-weight: 200;
color: black;
}
.neirong {
font-size: 18px;
color: #aaa;
line-height: 1.4em;
}
.five {
display: flex;
height: 302px;
margin-top: 74px;
flex-wrap: wrap;
}
.four {
height: 144px;
width: 502px;
}
.five:nth-child(2n+1) {
margin-right: 20px;
}
.six {
font-size: 14px;
color: #aaa;
text-align: center;
margin-top: 30px;
}
.seven {
font-size: 14px;
color: #aaa;
text-align: center;
margin-top: 10px;
}
.footer {
height: 80px;
border-top: 2px solid #aaa;
}09寻找小狼人
// 返回条件为真的新数组
Array.prototype.myarray = function (cb) {
// TODO：待补充代码
for(var m=this.length-1;m>0;m--) {
!cb(this[m]) && this.splice(m,1)
}
return this
};