[真传弟子]JS-赵立鼐|2019年11月05日的日报-技能树.IT修真院

发表于： 2019-11-05 20:38:51

1 1095

今日完成：

这个页面没用到bootstrap,感觉投票那个可以用框架来布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scale=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="../css/change.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <title>change_version</title>
</head>
<body>
<header>

    <div class="menu">
        <div class="three"></div>
        <div class="three"></div>
        <div class="three"></div>
    </div>
</header>

<div class="last_game">
    上次游戏：捉鬼猜词版
    <div class="triangle"></div>
</div>

<div class="content">

    <div class="game_name">
        捉鬼游戏
    </div>

        <div class="version">
            <div class="version_title">
               <p class="title">简化版</p>
            </div>
          <p class="text">  有1332个用户正在玩此款游戏</p>
        </div>
        <div class="version">
            <div class="version_title">
                <p class="title">猜词版</p>
            </div>
            <p class="text">  有1332个用户正在玩此款游戏</p>
        </div>
    <img src="../img/duobian-1.png">
    <div class="version">
            <div class="version_title">
                <p class="title">白痴版</p>
            </div>
            <p class="text">  有1332个用户正在玩此款游戏</p>
    </div>
    <div class="circles" >
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    </div>

</div>
</body>


</html>


* {
    padding: 0;
    margin: 0;
}
html,body {
    width: 100%;
    height: 100%;
}


body{
    background-color: rgb(240,240,240);

}

header {
    height:8vh;
    background-color: rgb(41,189,224);

}
.menu {
    height: 100%;
    width: 5.31vw;
    padding-top: 20px;
    margin-left: 10px;
}

.three {
    width: 5.31vw;
    height: 0.625vw;
    background-color: white;
    margin-bottom: 1.25vw;
    /*margin-left: 10px;*/
}
.last_game{
    font-size: 30px;
    width: 90vw;
    height: 10vh;
    color: rgb(180,180,180);
    border: 1px solid rgb(232,232,232);
    margin: 2.46vh  auto 0 auto;
    background-color: white;
    line-height: 10vh;
    text-align: center;
    position: relative;

}

.content{
    width: 90vw;
    height: 70%;
    margin: 2.46vh auto 0 auto;
    border: 1px solid rgb(233,233,233);
    background-color: white;

}

div.game_name{
    font-size: 38px;
    width: 100%;
    height: 8.2vh;
    border-bottom: 2px solid rgb(254,232,192);
    color: rgb(254,220,163);
    text-align:center;
    line-height: 8.2vh;
}
div.version{
    height: 23%;
    width: 72vw;
    margin: 3.7% auto;
    text-align: center;
    position: relative;
    padding: 0 auto;
}

div.version_title{
    font-size: 32px;
    color: white;
    width: 100%;
    height: 72.3%;
    background-color: rgb(105,209,233);
    position: relative;

}

p.text{
    width: 100%;
     color: rgb(170,170,170);
    font-size: 25px;
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    left: 50%;
    transform: translate(-50%,0);
    /*padding: 0;*/
    /*left: 50%;*/
}

p.title {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

div.triangle{
    display: inline-block;

    width: 30px;
    height: 30px;
    border-top: 5px solid rgb(231,231,231);
    border-right: 5px solid rgb(231,231,231);
    transform: rotate(45deg);
     position: absolute;
    right: 10%;
    top: 40%;
    /*transform: translate(0,-50%);*/
}

img {
    position: absolute;
    top: 55%;
    right: 8%;
}
div.circle {
     display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: rgb(240,240,240);
    margin-left: 10px;

}
div.circles{
    position: absolute;
    bottom: 100px;
    left: 50%;
    height: 20px;
    width: 150px;
    transform: translate(-50%,0);

}
div.circle:hover{
    background-color: rgb(105,209,233);
}