grid布局

直接上代码
index.html:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>grid布局</title>
</head>
<body>
    <div class="container">
        <div class="bg1">
            <h2>16 <span>| 24</span></h2>
            <p>完成目标数</p>
        </div>
        <div class="bg1">
            <h2><i class="fas fa-battery-three-quarters"></i></h2>
            <p>呼吸</p>
        </div>
        <div class="bg2">
            <h2><i class="fas fa-running"></i></h2>
            <p>公里</p>
        </div>
        <div class="bg1">
            <h2>36 &deg;</h2>
            <p>温度</p>
        </div>
        <div class="bg1">
            <h2><i class="fas fa-bed"></i></h2>
            <p>睡眠质量</p>
        </div>
        <div class="bg2">
            <h2>98 <span>bpm</span></h2>
            <p>心率</p>
        </div>
        <div class="bg1">
            <h2>50 <span>kg</span></h2>
            <p>体重</p>
        </div>
        <div class="bg1">
            <h2>20 <span>%</span></h2>
            <p>体脂率</p>
        </div>
        <div class="bg2">
            <h2>108 <span>mgdl</span></h2>
            <p>血糖</p>
        </div>
        <div class="bg2">
            <h2>680 <span>kcal</span></h2>
            <p>平均消耗</p>
        </div>
        <div class="bg2">
            <h2>Training</h2>
            <p>锻炼</p>
        </div>
        <div class="bg2">
            <h2>85 <span>%</span></h2>
            <p>身体含水量</p>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

index.css:

html,body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container{
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
}
.container>div{
    flex-direction: column;
    
    display: flex;
    justify-content: center;
    align-items: center;
    cursor:pointer;
    background-size: cover;
    background-attachment: fixed;

    transition: all 0.5s ease-in;
}
.container>div:hover{
    opacity: 0.8;
    transform:scale(0.98);
}
.container>div:nth-of-type(1){
    grid-column: 1/3;
}
.container>div:nth-of-type(6){
    grid-column: 3/5;
}
.container>div:nth-of-type(8){
    grid-column: 2/4;
}
.container>div:nth-of-type(12){
    grid-column: 3/5;
}
.bg1{
    color: white;
    background-image: url("./img/bg1.jpg");
}
.bg2{
    color:black;
    background-image: url("./img/bg2.jpg");
}

index.js:

!function(){
    let container=document.querySelectorAll('.container div');
    console.log(container);
    //使用let避免使用立即执行函数
    for(let i=0;i<container.length;i++){
        container[i].addEventListener('click',function(){
            console.log(this.className);
            this.className==='bg1'?this.setAttribute("class","bg2"):this.setAttribute("class","bg1");
        })
    }
}();

图片自己随便找两张,效果如下:
在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读