发表于： 2019-12-31 22:15:42
1 1035
- 今天完成的事情：修改了以前的bug，重构了任务七的一部分代码
遇到的问题：改bug花费较长时间导致代码没有重构完
收获：先上重构的效果图
效果没变代码简洁的很多
代码图
body {
margin-bottom: 95px;
background : #29bde0;
}
.header {
.vote {
font-size: 15px;
color : white;
}
background-color: #29bde0;
display : flex;
justify-content : space-between;
height : 34px;
align-items : center;
}
.header2 {
.vote-2 {
white-space: nowrap;
font-size : 12px;
}
.switch {
position: absolute;
right : 0;
}
audio {
transform: rotate(180deg);
opacity : 0;
}
display : flex;
justify-content : space-between;
background-color: #b9e9f5;
height : 41px;
align-items : center;
padding-left : 7vw;
position : relative;
}
.introduction {
.introduction-1 {
line-height : 36px;
padding-left: 10vw;
font-size : 11px;
color : white;
}
.triangle {
width : 0;
height : 0;
border-top : 5px solid #b9e9f5;
border-right: 3px solid transparent;
border-left : 3px solid transparent;
position : absolute;
top : 0;
left : 10vw;
}
height : 36px;
background-color: #29bde0;
position : relative;
}
.container {
.mainpart {
.mainpart-2 {
button {
border : none;
width : 4.6vw;
height : 4.6vw;
background : url(./images/05.png);
background-size: 400% 100%;
}
.o2 {
background-position: 33.3% 0;
}
.o3 {
background-position: 66.6% 0;
}
.o4 {
background-position: 101% 0;
}
height : 4.6vw;
width : 19.7vw;
display : flex;
justify-content: space-between;
margin : 10px auto;
padding : 0;
visibility : hidden;
}
.mainpart-1:hover~.mainpart-2 {
visibility: visible;
}
.mainpart-1 {
.d7 {
height : 21.5%;
display : flex;
justify-content : center;
align-items : center;
font-size : 3.5vw;
background-color: #83b09a;
margin : 0;
color : white;
}
.identity {
height : 78.5%;
display : flex;
justify-content : center;
align-items : center;
background-color: #f5c97b;
font-size : 4.2vw;
margin : 0;
}
border: white solid 2px;
width : 19.6vw;
height: 19.6vw;
margin:0 auto;
}
padding: 0 6vw;
}
background-color: #29bde0;
}
.db {
.db1 {
height : 43px;
background-color: #fbb435;
text-align : center;
line-height : 43px;
color : white;
}
height : 95px;
background: #29bde0;
position : fixed;
bottom : 0;
left : 0;
right : 0;
padding : 21px 11vw 30px 12vw;
}
html代码
<div class="header">
<a href="l.html"><img src="./images/02.png" alt=""></a>
<span class="vote">投票</span>
<a href="l.html"><img src="./images/03.png" alt=""></a>
</div>
<div class="header2">
<span class="vote-2">发言讨论结束，请大家投票</span>
<img src="./images/04.png" alt="" class="switch">
<audio src="./财富自由.mp3" controls=""></audio>
</div>
<div class="introduction">
<span class="introduction-1">点击得票数最多人的头像</span>
<div class="triangle"></div>
</div>
<div class="container">
<div class="col-xs-4 mainpart">
<div class="mainpart-1">
<div class="identity">
水民
</div>
<div class="d7">
1号
</div>
</div>
<div class="mainpart-2">
<button class="o1"></button>
<button class="o2"></button>
<button class="o3"></button>
<button class="o4"></button>
</div>
</div>
<div class="col-xs-4 mainpart">
<div class="mainpart-1">
<div class="identity">
水民
</div>
<div class="d7">
1号
</div>
</div>
<div class="mainpart-2">
<button class="o1"></button>
<button class="o2"></button>
<button class="o3"></button>
<button class="o4"></button>
</div>
</div>
<div class="col-xs-4 mainpart">
<div class="mainpart-1">
<div class="identity">
水民
</div>
<div class="d7">
1号
</div>
</div>
<div class="mainpart-2">
<button class="o1"></button>
<button class="o2"></button>
<button class="o3"></button>
<button class="o4"></button>
</div>
</div>
<div class="col-xs-4 mainpart">
<div class="mainpart-1">
<div class="identity">
水民
</div>
<div class="d7">
1号
</div>
</div>
<div class="mainpart-2">
<button class="o1"></button>
<button class="o2"></button>
<button class="o3"></button>
<button class="o4"></button>
</div>
</div>
<div class="col-xs-4 mainpart">
<div class="mainpart-1">
<div class="identity">
水民
</div>
<div class="d7">
1号
</div>
</div>
<div class="mainpart-2">
<button class="o1"></button>
<button class="o2"></button>
<button class="o3"></button>
<button class="o4"></button>
</div>
</div>
<div class="col-xs-4 mainpart">
<div class="mainpart-1">
<div class="identity">
水民
</div>
<div class="d7">
1号
</div>
</div>
<div class="mainpart-2">
<button class="o1"></button>
<button class="o2"></button>
<button class="o3"></button>
<button class="o4"></button>
</div>
</div>
<div class="col-xs-4 mainpart">
<div class="mainpart-1">
<div class="identity">
水民
</div>
<div class="d7">
1号
</div>
</div>
<div class="mainpart-2">
<button class="o1"></button>
<button class="o2"></button>
<button class="o3"></button>
<button class="o4"></button>
</div>
</div>
<div class="col-xs-4 mainpart">
<div class="mainpart-1">
<div class="identity">
水民
</div>
<div class="d7">
1号
</div>
</div>
<div class="mainpart-2">
<button class="o1"></button>
<button class="o2"></button>
<button class="o3"></button>
<button class="o4"></button>
</div>
</div>
<div class="col-xs-4 mainpart">
<div class="mainpart-1">
<div class="identity">
水民
</div>
<div class="d7">
1号
</div>
</div>
<div class="mainpart-2">
<button class="o1"></button>
<button class="o2"></button>
<button class="o3"></button>
<button class="o4"></button>
</div>
</div>
<div class="col-xs-4 mainpart">
<div class="mainpart-1">
<div class="identity">
水民
</div>
<div class="d7">
1号
</div>
</div>
<div class="mainpart-2">
<button class="o1"></button>
<button class="o2"></button>
<button class="o3"></button>
<button class="o4"></button>
</div>
</div>
<div class="col-xs-4 mainpart">
<div class="mainpart-1">
<div class="identity">
水民
</div>
<div class="d7">
1号
</div>
</div>
<div class="mainpart-2">
<button class="o1"></button>
<button class="o2"></button>
<button class="o3"></button>
<button class="o4"></button>
</div>
</div>
<div class="col-xs-4 mainpart">
<div class="mainpart-1">
<div class="identity">
水民
</div>
<div class="d7">
1号
</div>
</div>
<div class="mainpart-2">
<button class="o1"></button>
<button class="o2"></button>
<button class="o3"></button>
<button class="o4"></button>
</div>
</div>
</div>
<a href="l3.html" style="text-decoration: none;"><div class="db">
<div class="db1">
投死
</div></a>
</div>
明天继续
返回列表
评论