发表于： 2019-11-07 23:27:38
1 881
今日完成：
把任务七剩下的两个页面做了
<!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" type="text/css" href="../css/vote.css">
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<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">
<script src="../js/demo.js"></script>
<title>vote</title>
</head>
<body>
<header>
<div class="outer">
<div class="one">
<div class="three"></div>
</div>
<p>投票</p>
<div class="x">
<div class="x1"></div>
<div class="x2"></div>
<div class="x3"></div>
<div class="x4"></div>
</div>
</div>
</header>
<div class="voice">
<span>发言讨论结束,大家请投票</span>
<div class="Audio">
<audio id="audioTag" src="../mp3/11.mp3"></audio>
<div class="pgs">
<div class="pgs-play" id="progress" style="width: 20%;"></div>
</div>
<div class="controls">
<button class="play-pause" id="playPause">
<span class="icon-btn icon-play"></span>
</button>
</div>
</div>
</div>
<div class="container-outer">
<img src="../img/13_03.png">
<span class="text">点击得票最多人的头像</span>
<div class="container">
<div class="row">
<div class="col">
<div class="user-outer">
<div class="user">
<span>水民</span>
<div class="user-bottom">2号</div>
</div>
<div class="icon">
<span class="icon1-vote"></span>
<span class="icon2-vote"></span>
<span class="icon3-vote"></span>
<span class="icon4-vote"></span></div>
</div>
</div>
<div class="col">
<div class="user-outer">
<div class="user">
<span>水民</span>
<div class="user-bottom">2号</div>
</div>
<div class="icon">
<span class="icon1-vote"></span>
<span class="icon2-vote"></span>
<span class="icon3-vote"></span>
<span class="icon4-vote"></span></div>
</div>
</div>
<div class="col">
<div class="user-outer">
<div class="user">
<span>水民</span>
<div class="user-bottom">2号</div>
</div>
<div class="icon">
<span class="icon1-vote"></span>
<span class="icon2-vote"></span>
<span class="icon3-vote"></span>
<span class="icon4-vote"></span></div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="user-outer">
<div class="user">
<span>水民</span>
<div class="user-bottom">2号</div>
</div>
<div class="icon">
<span class="icon1-vote"></span>
<span class="icon2-vote"></span>
<span class="icon3-vote"></span>
<span class="icon4-vote"></span></div>
</div>
</div>
<div class="col">
<div class="user-outer">
<div class="user">
<span>水民</span>
<div class="user-bottom">2号</div>
</div>
<div class="icon">
<span class="icon1-vote"></span>
<span class="icon2-vote"></span>
<span class="icon3-vote"></span>
<span class="icon4-vote"></span></div>
</div>
</div>
<div class="col">
<div class="user-outer">
<div class="user">
<span>水民</span>
<div class="user-bottom">2号</div>
</div>
<div class="icon">
<span class="icon1-vote"></span>
<span class="icon2-vote"></span>
<span class="icon3-vote"></span>
<span class="icon4-vote"></span></div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="user-outer">
<div class="user">
<span>水民</span>
<div class="user-bottom">2号</div>
</div>
<div class="icon">
<span class="icon1-vote"></span>
<span class="icon2-vote"></span>
<span class="icon3-vote"></span>
<span class="icon4-vote"></span></div>
</div>
</div>
<div class="col">
<div class="user-outer">
<div class="user">
<span>水民</span>
<div class="user-bottom">2号</div>
</div>
<div class="icon">
<span class="icon1-vote"></span>
<span class="icon2-vote"></span>
<span class="icon3-vote"></span>
<span class="icon4-vote"></span></div>
</div>
</div>
<div class="col">
<div class="user-outer">
<div class="user">
<span>水民</span>
<div class="user-bottom">2号</div>
</div>
<div class="icon">
<span class="icon1-vote"></span>
<span class="icon2-vote"></span>
<span class="icon3-vote"></span>
<span class="icon4-vote"></span></div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="user-outer">
<div class="user">
<span>水民</span>
<div class="user-bottom">2号</div>
</div>
<div class="icon">
<span class="icon1-vote"></span>
<span class="icon2-vote"></span>
<span class="icon3-vote"></span>
<span class="icon4-vote"></span></div>
</div>
</div>
<div class="col">
<div class="user-outer">
<div class="user">
<span>水民</span>
<div class="user-bottom">2号</div>
</div>
<div class="icon">
<span class="icon1-vote"></span>
<span class="icon2-vote"></span>
<span class="icon3-vote"></span>
<span class="icon4-vote"></span></div>
</div>
</div>
<div class="col">
<div class="user-outer">
<div class="user">
<span>水民</span>
<div class="user-bottom">2号</div>
</div>
<div class="icon">
<span class="icon1-vote"></span>
<span class="icon2-vote"></span>
<span class="icon3-vote"></span>
<span class="icon4-vote"></span></div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="death">
投死
</div>
</footer>
</body>
</html>
/*@media screen and (max-width: 1400px) {*/
/* body{*/
/* width: 1400px;*/
/* }*/
/*}*/
* {
padding: 0;
margin: 0;
}
:root {
font-size: 20px;
}
/*html {*/
/* font-size : 20px;*/
/*}*/
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
html body {
background-color: rgb(41,189,224);
}
header {
/*display: inline-block;*/
height: 8vh;
width: 100%;
background-color: rgb(41,189,224);
position: relative;
padding: 3%;
}
div.outer {
/*margin-top: 3%;*/
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
div.three{
width: 29px;
height: 3px;
border-top: 3px solid white;
border-bottom: 3px solid white;
padding-top: 8px;
background: white;
padding-bottom: 8px;
background-clip: content-box;
box-sizing: content-box;
position: relative;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
/*margin-left: 30px;*/
}
div.one{
width: 39px;
height: 40px;
border: 3px solid white;
position: relative;
left: 23px;
box-sizing: content-box;
/*display: inline-block;*/
/*margin-top: 30px;*/
/*margin-left: 23px;*/
}
/**/
header p{
/*margin-right: 10px;*/
display: inline-block;
font-size: 0.85rem;
color: white;
margin-bottom: 0;
}
.x div {
box-sizing: border-box;
}
.x {
/*margin: 100px auto;*/
width: 36px;
height: 36px;
transform: rotate(45deg);
position: relative;
right: 23px;
}
.x1 {
float: left;
width: 50%;
height: 50%;
border-bottom: 2px solid white;
border-right: 2px solid white;
}
.x2 {
float: left;
width: 50%;
height: 50%;
border-bottom: 2px solid white;
border-left: 2px solid white;
}
.x3 {
float: left;
width: 50%;
height: 50%;
border-top: 2px solid white ;
border-right: 2px solid white;
}
.x4{
float: left;
width: 50%;
height: 50%;
border-top: 2px solid white ;
border-left: 2px solid white;
}
.voice {
width: 100%;
height: 8vh;
background-color: rgb(185,233,245);
display: flex ;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.controls {
width: 40px;
height: 40px;
padding: 0;
margin-right: 20px;
}
.play-pause {
border: 0;
outline: 0;
background: none;
vertical-align: middle;
}
.icon-play {
width: 50px;
height: 50px;
background: url(../img/play.png) no-repeat;
background-size: 50px;
display: block;
color: #478f59;
}
.icon-pause {
width: 50px;
height: 50px;
background: url(../img/pruse.png) no-repeat;
background-size: 50px;
display: block;
color: #478f59;
}
div.voice > span {
/*margin-left: 40px;*/
/*position: relative;*/
/*right: 40px;*/
/*left: 30px;*/
font-size: 0.65rem;
margin-left: 20px;
}
footer{
font-size: 1rem;
width: 100%;
height: 17vh;
background-color: rgb(41,189,224);
position: absolute;
bottom: 0;
}
.death {
height: 87px;
width: 77%;
background-color: rgb(251,180,53);
margin: 0 auto;
position: relative;
top :50%;
transform: translate(0,-50%);
font-size: 0.65rem;
text-align: center;
line-height: 87px;
color: rgb(255,255,255);
}
.container-outer{
height: 67vh;
overflow: auto;
padding-top: 90px;
}
.text {
font-size: 0.6rem;
color: white;
position: absolute;
top:18vh;
left: 11vw;
z-index: 100;
}
.container{
/*margin-top: 90px;*/
/*overflow: auto;*/
padding: 0;
width: 1170px;
max-width: none !important;
background-color: rgb(41,189,224);
}
/*.row {*/
/* height: 200px;*/
/* background-color: yellow;*/
/* border: 1px solid orange;*/
/*}*/
.col {
height: 30vw;
display: flex;
flex-direction: column;
justify-content: center;
}
.user{
width: 100%;
/*padding-top: 100%;*/
background-color: rgb(245,201,123);
border: 5px solid white;
/*margin-bottom: 15%;*/
overflow: hidden;
}
.user span {
font-size: 0.75rem;
display: block;
margin-top: calc((100% - 1.6rem)/2);
margin-bottom: calc((100% - 1.6rem)/2) ;
position: relative;
text-align: center;
}
.user-bottom {
font-size: 0.569rem;
height: 55%;
width: 100%;
background-color: rgb(131,176,154);
text-align: center;
color: white;
}
.user-outer{
width: 70%;
height: 100%;
margin: 0 auto;
}
.user:hover ~ .icon {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between ;
}
img {
position: absolute;
top:16vh;
left: 11vw;
}
.icon {
z-index: 10;
height: 25%;
width: 100%;
display: none;
}
.icon span {
z-index: 10;
display: inline-block;
background: url("../img/css7_sprites.png") no-repeat;
}
span.icon1-vote{
background-position: -10px -10px;
width: 30px;
height: 30px;
max-width: 100%;
max-height: 100%;
}
span.icon2-vote{
background-position: -60px -10px;
width: 30px;
height: 30px;
}
span.icon3-vote{
background-position: -10px -60px;
width: 30px;
height: 30px;
}
span.icon4-vote{
background-position: -60px -60px;
width: 30px;
height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>over</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scale=1" >
<link rel="stylesheet" type="text/css" href="../css/over.css">
</head>
<body>
<header>
<img src="../img/over2.png">
游戏结果
<img src="../img/over1.png">
</header>
<div class="container">
<div class="show">
<img src="../img/victory.png">
<strong> 太棒了！你知道么？在做鬼游戏中只有20%的卧底取得游戏最终的胜利哦！</strong>
</div>
<div class="data">
<P> 本次游戏共计用时0小时25分钟<br>
杀 手0人  警 察1人  平 民6人<br>
狙击手0人  医 生1人<br>
卧底词汇：爱新觉罗<br>
水手词汇：努尔哈赤
</P>
</div>
</div>
<div class="record">
<div class="one-day">
<div class="time">
<span class="when-day">第1天</span>
<span class="when-time">0小时07分</span>
</div>
<div>
<p>
晚上：5号被杀手杀死，5号是水民<br>
白天：8号被全民投票投死了，8号是杀手
</p>
</div>
</div>
<div class="one-day">
<div class="time">
<span class="when-day">第1天</span>
<span class="when-time">0小时07分</span>
</div>
<div>
<p>
晚上：5号被杀手杀死，5号是水民<br>
白天：8号被全民投票投死了，8号是杀手
</p>
</div>
</div>
<div class="one-day">
<div class="time">
<span class="when-day">第1天</span>
<span class="when-time">0小时07分</span>
</div>
<div>
<p>
晚上：5号被杀手杀死，5号是水民<br>
白天：8号被全民投票投死了，8号是杀手
</p>
</div>
</div>
<div class="one-day">
<div class="time">
<span class="when-day">第1天</span>
<span class="when-time">0小时07分</span>
</div>
<div>
<p>
晚上：5号被杀手杀死，5号是水民<br>
白天：8号被全民投票投死了，8号是杀手
</p>
</div>
</div>
</div>
<footer>
<button class="again">再来一局</button>
<button class="uploading">上传并分享</button>
</footer>
</body>
</html>
*{
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 8.5% ;
width: 100%;
color: #ffffff;
background-color: #29bde0;
}
header img {
margin: 0 30px;
}
div.container{
width: 100%;
height: 56.6%;
background-color: #29bde0;
}
div.show {
width: 100%;
height: 60%;
padding-top: 30px;
}
div.data {
width: 100%;
height: 40%;
font-size: 0.65rem;
color: #ffffff;
}
.show img {
display: block;
margin: 0 auto;
}
strong {
display: block;
font-size: 0.825rem;
color: #ffc865;
margin: 0.25rem 2.5rem;
}
.data p {
margin: 0.75rem 2.5rem;
}
footer {
display: flex;
align-items: center;
justify-content: space-around;
height: 11.8%;
width: 100%;
background-color: rgba(153,223,240,0.5);
position: absolute;
bottom: 0;
}
button {
width: 42.3%;
height: 86px;
border: none;
border-radius: 5%;
color: #ffffff;
font-size: 40px;
}
button.again {
background-color: #f66f6f;
}
button.uploading{
background-color: #fbb435;
}
button:hover {
outline: none;
}
.record {
height: 34%;
overflow: hidden;
}
.one-day {
height: 164px;
width: auto;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
}
.time {
display: flex;
justify-content: space-between;
height: 30%;
width: 460px;
margin: 4px auto;
}
.when-day{
font-size: 0.75rem;
color: black;
}
.when-time{
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #c7c7c7;
}
.one-day p {
width: 460px;
font-size: 0.6rem;
color: #a6a6a6;
margin: 0 auto;
}
遇到的问题：
一直对单位的使用有点不太清楚。
哪种情景下该用哪种单位，做出来的页面适配性比较好呢？这个还在摸索中。
还有代码规范这块得补起来。
收获：
没啥好说的，熟能生巧吧
明日计划：
修改一些细节就提交任务了。
返回列表
评论