2022第十三届蓝桥杯web组题解

01水果拼盘

题目

解答

• 用flex布局

/* TODO：待补充代码 */
#pond {
    display: flex;
    flex-direction: column; //主轴为y轴 水果都在y轴上
    flex-wrap: wrap; //允许换行
}

02展开你的扇子

题目

解答

• 用到了css动画知识 , transform: rotate(deg) deg是单位

/*TODO：请补充 CSS 代码*/

#box:hover #item7 {
    transform: rotate(10deg);
}

#box:hover #item8 {
    transform: rotate(20deg);
}

#box:hover #item9 {
    transform: rotate(30deg);
}

#box:hover #item10 {
    transform: rotate(40deg);
}

#box:hover #item11 {
    transform: rotate(50deg);
}

#box:hover #item12 {
    transform: rotate(60deg);
}

#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和手机相处的时光

题目

解答

• 原代码xAxis的type值和yAxis的type值颠倒了 , 下面是改正过来的

var option = {
        title: {
            text: "一周的手机使用时长",
        },
        xAxis: {
            type: "category",
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
            type: "value",
        },
        series: [{
            data: [2.5, 2, 2.6, 3.2, 4, 6, 5],
            type: "line",
        }, ],
    };

04灯的颜色变化

题目

解答

• 用到了计时函数

// TODO：完善此函数 显示红色颜色的灯
function red() {
    const defaultlight = document.querySelector('#defaultlight')
    const redlight = document.querySelector('#redlight')
    clearTimeout(redTime)
    var redTime = setTimeout(() => {
        defaultlight.style.display = 'none'
        redlight.style.display = 'inline-block' //注意这里是inlin-block 根据原文件的css值写的
    }, 3000);
}

// TODO：完善此函数  显示绿色颜色的灯
function green() {
    const redlight = document.querySelector('#redlight')
    const greenlight = document.querySelector('#greenlight')
    clearTimeout(greenTime)
    var greenTime = setTimeout(() => {
        redlight.style.display = 'none'
        greenlight.style.display = 'inline-block'
    }, 6000);
}

// TODO：完善此函数
function trafficlights() {
    red()
    green()
}

trafficlights();

05冬奥大抽奖

题目

解答

• 观察html可知 , 需要变黄的div按着顺序写了class , 那么让相应类名依次添加.active类同时其他移除.active类即可

// TODO：请完善此函数
function rolling() {
    time++; // 转动次数加1
    clearTimeout(rollTime);
    rollTime = setTimeout(() => {
        let className = `.li${time % 8}`
        if (time % 8 === 0) {
            className = `.li8`
        }
        $(`${className}`).addClass("active").siblings().removeClass("active")
        window.requestAnimationFrame(rolling); // 进行递归动画
    }, speed);

06蓝桥知识网

题目

解答

• 考察html和css , 按照要求写就行了

html代码

<!--TODO：请补充代码-->
    <div class="canter">
        <div class="header">
            <div class="nav">
                <span>蓝桥知识网</span>
                <div class="nav_c">
                    <span>首页</span>
                    <span>热门技术</span>
                    <span>使用手册</span>
                    <span>知识库</span>
                    <span>练习题</span>
                    <span>联系我们</span>
                    <span>更多</span>
                </div>
            </div>
            <div class="header_text">
                <p class="title_header">蓝桥云课</p>
                <p class="title_p">随时随地丰富你的技术栈！</p>
                <div class="join">
                    加入我们
                </div>
            </div>
        </div>

    </div>
    <div class="conter">
        <div class="item">
            <span>人工智能</span>
            <p>人工智能亦称智械、机器智能，指由人制造出来的机器所表现出来的智能。通常人工智能是指通过普通计算机程序来呈现人类智能的技术。</p>
        </div>
        <div class="item">
            <span>前端开发</span>
            <p>前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。</p>
        </div>
        <div class="item">
            <span>后端开发</span>
            <p>后端开发是实现页面的交互逻辑，通过使用后端语言来实现页面的操作功能，例如登录、注册等。</p>
        </div>
        <div class="item">
            <span>信息安全</span>
            <p>ISO（国际标准化组织）的定义为：为数据处理系统建立和采用的技术、管理上的安全保护，为的是保护计算机硬件、软件、数据不因偶然和恶意的原因而遭到破坏、更改和泄露。</p>
        </div>
    </div>
    <div class="footer">
        <div class="footer_text">
            <span>© 蓝桥云课 2022</span>
            <p>京公网安备 11010102005690 号 | 京 ICP 备 2021029920 号</p>
        </div>

    </div>

css代码

 TODO：请补充代码
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.canter {
    background-color: #a6b1e1;
}

.header {
    width: 1024px;
    margin: 0 auto;
    height: 440px;
    padding-top: 13px;
}

.nav {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    height: 46px;
    padding: 0 10px;
}

.nav>span {
    font-size: 18px;
    color: white;
    margin-right: 365px;
    font-weight: 600;
}

.nav_c span {
    font-size: 16px;
    color: white;
    margin-right: 28px;
    font-weight: 600;
}

.nav_c span:nth-child(7) {
    margin-right: 0px;
}

.header_text {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 30px;
}

.title_header {
    font-size: 45px;
    color: black;
    margin-bottom: 62px;
}

.title_p {
    font-size: 21px;
    font-weight: 200;
    color: white;
    margin-bottom: 36px;
}

.join {
    color: #efbfbf;
    border-radius: 2px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-shadow: inset 0 0 0 2px #efbfbf;
}

.conter {
    width: 1024px;
    margin: 74px auto 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: 302px;
}

.conter .item {
    height: 144px;
    width: 502px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.conter .item span {
    font-size: 30px;
    font-weight: 200;
    color: black;
}

.conter .item p {
    font-size: 18px;
    color: #aaa;
    line-height: 1.4em;
}

.footer {
    width: 100%;
    height: 80px;
    border-top: 2px solid #aaa;
}

.footer_text {
    width: 1024px;
    margin: 0 auto;
    text-align: center;
    font-size: 14px;
    color: #aaa;
    padding-top: 30px;
}

.footer_text p {
    margin-top: 10px;
}

07布局切换

题目

解答

08 购物车

题目

09 寻找小狼人

题目

解答

10 课程列表

题目

解答