第十三届蓝桥杯(Web 应用开发)线上模拟赛 第四题flex布局之筛子

在这里插入图片描述

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>骰子布局title>
    <style>
        body {
            margin: 10px 0 0 0;
            display: flex;
            justify-content: space-around;
        }
        
        body>div {
            display: flex;
            width: 100px;
            height: 100px;
            border-radius: 4px;
            border: 2px solid red;
            box-sizing: border-box;
        }
        
        p {
            width: 15px;
            height: 15px;
            background-color: black;
            border-radius: 50%;
            margin: 2px;
        }
        
        .div1 {
            justify-content: center;
            align-items: center;
        }
        .div2{
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

        .div3{
            justify-content: space-around;
            align-items: center;
        }
        .div3>p:nth-child(1){
            align-self: flex-start;
        }

        .div3>p:nth-child(3){
            align-self: flex-end;
        }
        .div4{
            justify-content: space-around;
        }
        .div4>div{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .div5{
            justify-content: space-around;
        }
        .div5>div{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .div6{
            flex-direction: column;
            justify-content: space-around;
        }
        .div6>div{
            display: flex;
            justify-content: space-around;
        }
        .div7{
            flex-direction: column;
            justify-content: space-around;
        }
        .div7>div{
            display: flex;
            justify-content: space-around;
        }
        .div8{
            flex-direction: column;
            justify-content: space-between;
        }
        .div8>div{
            display: flex;
            justify-content: space-between;
        }
        .div9{
            flex-direction: column;
            justify-content: space-around;
        }
        .div9>div{
            display: flex;
            justify-content: space-around;
        }

        /*todo:请补全剩余骰子布局代码*/
    style>
head>

<body>
    
    <div class="div1">
        <p>p>
    div>
    
    <div class="div2">
        <p>p>
        <p>p>
    div>
    
    <div class="div3">
        <p>p>
        <p>p>
        <p>p>
    div>
    
    <div class="div4">
        <div>
            <p>p>
            <p>p>
        div>
        <div>
            <p>p>
            <p>p>
        div>
    div>
    
    <div class="div5">
        <div>
            <p>p>
            <p>p>
        div>
        <div>
            <p>p>
        div>
        <div>
            <p>p>
            <p>p>
        div>
    div>
    
    <div class="div6">
        <div>
            <p>p>
            <p>p>
        div>
        <div>
            <p>p>
            <p>p>
        div>
        <div>
            <p>p>
            <p>p>
        div>
    div>
    
    <div class="div7">
        <div>
            <p>p>
            <p>p>
            <p>p>
        div>
        <div>
            <p>p>
        div>
        <div>
            <p>p>
            <p>p>
            <p>p>
        div>
    div>
    
    <div class="div8">
        <div>
            <p>p>
            <p>p>
            <p>p>
        div>
        <div>
            <p>p>
            <p>p>
        div>
        <div>
            <p>p>
            <p>p>
            <p>p>
        div>
    div>
    
    <div class="div9">
        <div>
            <p>p>
            <p>p>
            <p>p>
        div>
        <div>
            <p>p>
            <p>p>
            <p>p>
        div>
        <div>
            <p>p>
            <p>p>
            <p>p>
        div>
    div>
body>

html>

第十三届蓝桥杯(Web 应用开发)线上模拟赛 第四题flex布局之筛子_第1张图片

*{
    padding: 0;
    margin: 0;

}
a{
    text-decoration-line: none;
    color: black;
}
.headerbox{
    height: 78px;
    background-color: white;
    /* width: 90%; */

}
.navbox{
    width: 94%;
    height: 78px;
    margin: 0 auto;
    background: url(../images/logo.png) no-repeat ;
    position:relative;
    background-position-y: center;
}
.navbox h1{
    display: none;
}
.navright{
    position:absolute;
    top:20px;
    right: 0;
    /* display: flex;
    justify-content: flex-end;
    align-content: center; */
}
.navright a{
    display: inline-block;
    width: 120px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    
}
.on{
    color: #0099f2;
    background-color: #f0f9ff;
}
.banner{
    height: 450px;
    background-color: #008bed;
}
.container{
    width: 92%;
    height: 448px;
    margin: 0 auto;
    position: relative;
}
.phoneimg{
    size: inherit;
}
.content{
    position:absolute;
    top:140px;
    left:70%;

}
.content h2{
    font-size: 40px;
    line-height: 40px;
    color: #fdfdfd;

}
.info{
    font-size: 16px;
    line-height: 26px;
    color: #99d1f8;
}
.tabtitle{
    width: 990px;
    height: 100px;
    /* position: relative; */
    margin: 0 auto;
    /* border: 1px solid #000; */

}
.tabtitle h3{
    font-size: 24px;
    color: #000000;
float: left;    
margin-top: 30px;
/* display: block; */

}
.tabtitle h4{
    float: right;
    font-size: 24px;
    color: #cccccc;
    margin: 30px 30px 30px 0;

}
body{
    background-color: #F9F9F9;
}
.list{
    width:990px;
    margin: 0 auto;


}
.list ul{
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    align-content:center;
    align-self: center;
    /* margin:  0 15px; */

}

.list ul li{
    width: 300px;
    height: 374px;
    background-color: white;
    margin: 0 30px 20px 0;
    list-style-type: none;
    
}
.list ul>li img{
    width: 260px;
    height: 260px;
    display: block;
    margin: 20px 20px;
}
.list ul>li p{
    color: #333333;
    font-size: 14px;
    display: block;
    margin: 20px 20px;
}
.more{
    width: 960px;
    background-color: #e8eef2;

    font-size: 20px;
    line-height: 62px;
    text-align: center;
    margin: 10px auto;
    /* width: ; */
}
.more a{
    color: #59ABDF;
}
.footer{
    height: 256px;
    background-color: #e5e5e5;
    margin-top: 30px;
}
.footerL{
    height: 210px;
    width: 710px;
    float: left;
    margin-top: 32px;
    margin-left: 20px;
}
.footerL p{
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 25px;
    
}
.footerR{
    float: right;
    margin: 20px 60px;
}
.footerR img{
    width: 141px;
    height: 152px;
}

第十三届蓝桥杯(Web 应用开发)线上模拟赛 第四题flex布局之筛子_第2张图片


function getweather() {
     //TODO:请补充代码
     $.ajax({
        method:"get",
        url:"js/weather.json",
        success(data){
            console.log(data.result);
            var result=data.result;
            for (let i = 0; i < result.length; i++) {
                $("img:eq("+i+")").attr("src",result[i].weather_icon);
                $(".item-mess:eq("+i+")>div:eq(0)").html(result[i].weather);
                $(".item-mess:eq("+i+")>div:eq(1)").html(result[i].temperature);
                $(".item-mess:eq("+i+")>div:eq(2)").html(result[i].winp);
                $(".item-mess:eq("+i+")>div:eq(3)>span:eq(0)").html(result[i].days);
                $(".item-mess:eq("+i+")>div:eq(3)>span:eq(1)").html(result[i].week);
               
            }
        }
     })
}

getweather();

第十三届蓝桥杯(Web 应用开发)线上模拟赛 第四题flex布局之筛子_第3张图片

 

你可能感兴趣的:(前端,蓝桥杯,css)