[成都|内门弟子]JS-韦骁|2022年09月21日的日报-技能树.IT修真院

发表于： 2022-09-21 19:47:53

0 399

今天将第三张任务示图编写出来

css代码：


* {
    margin: 0;
    padding: 0;
}

.box {
    height: 100vh;
    margin: 0 auto;
}

.top {
    background-color: #29bde0;
    height: 120px;
    position: relative;

}

.homepage {
    float: left;
    margin: 50px 0 0 18px;

}

.circular {
    float: right;
    margin: 30px 10px 0 0;
    width: 66px;

}


.title {
    font-size: 34px;
    text-align: center;
    color: #ffffff;
    width: 100%;
    padding-top: 50px;
}

.content {
    background-color: #29bde0;
    height: 750px;
    text-align: center;
    position: relative;

}

.layer1 {
    position: absolute;
    top: 10%;
    left: 45%;
    right: 0;
    bottom: 0;

}

.layer2 {
    margin-top: 36px;
    position: relative;

}

.result {
    font-size: 43px;
    color: #ffffff;
    position: absolute;
    top: 22%;
    left: 0;
    right: 0;
    bottom: 0;

}

.notice {
    padding: 0 24%;

}

.notice p {
    font-size: 33px;
    color: #ffc865;
}

.explain {
    padding: 0 24%;

}

.explain p {
    font-size: 26px;
    color: #ffffff;
    margin: 0;
}

.statement {
    background-color: #ffffff;
    height: 400px;

}

.days {
    border-bottom-style:solid;
    border-color: #dddddd;
    height: 165px;

}

.days span {
    font-size: 30px;
    padding: 10px 0 15px 75px;
}

.days p {
    font-size: 26px;
    color: #a6a6a6;
    padding-left: 75px;
    margin: 0;
}

.days h1 {
    float: right;
    font-size: 26px;
    color: #a6a6a6;
    padding: 15px 75px 0 0;
}

.bottom {
    height: 150px;
    background-color: #29bde0;
    opacity: 0.5;
    margin-top: -160px;

}

.button1 {
    float: left;
    font-size: 40px;
    width: 270px;
    height: 85px;
    background-color: #f66f6f;
    color: #fef6f6;
    margin-top: -125px;

}

.button2 {
    float: right;
    font-size: 40px;
    width: 270px;
    height: 85px;
    background-color: #fbb435;
    color: #fef6f6;
    margin-top: -125px;

}

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=640,initial-scale=1">
    <link rel="stylesheet" href="result.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="box">
    <div class="top">
        <img class="homepage" src="tupian/矩形%205%20拷贝%202.png" alt="主页">
        <img class="circular" src="tupian/图5.png">
        <p class="title">游戏结果</p>
    </div>
    <div class="content">
        <img class="layer2" src="tupian/图层%202.png" >
        <img class="layer1" src="tupian/图层%201.png">
        <p class="result">卧底胜利</p>
        <div class="notice">
            <p>太棒了！你知道吗？在捉鬼游戏中只有20%的卧底 取得游戏最终的胜利哦！</p>
        </div>
        <div class="explain">
            <p>本次游戏共计用0小时25分钟</p>
            <p>杀  手0人    警   察1人    平   民6人
                狙击手0人    医   生1人</p>
            <p>卧底词汇: 新爱觉罗</p>
            <p>水民词汇: 努尔哈赤</p>

        </div>
    </div>
    <div class="statement">
        <div class="days">
            <span>第一天</span>
            <h1>0时07分</h1>
            <p>晚上: 5号被杀手杀死，5号是水民</p>
            <p>白天: 8号被全民投票投死，8号是杀手</p>
        </div>
        <div class="days">
            <span>第二天</span>
            <h1>0时07分</h1>
            <p>晚上: 5号被杀手杀死，5号是水民</p>
            <p>白天: 8号被全民投票投死，8号是杀手</p>
        </div>
    </div>
    <div class="bottom">
    </div>
    <button class="button1">再来一局</button>
    <button class="button2">上传并分享</button>

</div>

</body>
</html>