发表于： 2019-12-25 22:35:11
1 923
今天完成的事情：重构了任务六的代码
明天计划的事情：继续任务
遇到的问题：重构时间花费较长时间
收获：先上任务图
代码较少能优化的地方较少，优化后的代码
body {
padding: 0 0 65px 0;
margin : 0;
}
.identical2() {
display : flex;
justify-content: space-between;
align-items : center;
}
.header {
.vacant {
margin : 0;
border-bottom: 1px solid;
border-left : 1px solid;
width : 10px;
height : 10px;
transform : rotate(45deg);
color : #fff;
}
.identical2;
height : 40px;
background-color: #5fc0cd;
padding-left : 10px;
padding-right : 22px;
}
p {
margin: 0;
color : white;
}
.profiles {
.people {
.tabulation;
padding-left: 15px;
font-size : 17px;
.introduce {
display : flex;
font-size: 11px;
}
}
width : 100%;
height : 162px;
background-size : cover;
background-image: url(./images/02.png);
display : flex;
align-items : center;
}
.tabulation {
span {
border-left : 1px solid #ccc;
margin-left : 14px;
padding-left: 14px;
color : black;
}
.tabulationpart1 {
.swatches {
height : 13px;
width : 7.5px;
margin-right: 7.5px;
border-right: 3px solid #5fc0cd;
}
display : flex;
align-items : center;
padding : 19px 0px;
border-bottom: 1px solid #ccc;
font-size : 15px;
}
.tabulationpart3 {
display: flex;
.tabulationpart2;
color: black;
}
.tabulationpart2 {
align-items : center;
padding : 19px 0px;
border-bottom: 1px solid #ccc;
margin-left : 17px;
font-size : 14px;
color : #999999;
}
.tabulationpart4 {
.tabulationpart2;
}
.tabulationpart5 {
.tabulationpart2;
}
.tabulationpart6 {
display: flex;
.tabulationpart2;
}
display : flex;
flex-direction: column;
}
.footer {
.identical() {
height : 44px;
width : 45%;
text-align : center;
line-height : 44px;
border-radius: 10px;
font-size : 15px;
}
.footerright {
.identical;
background: #5fc0cd;
color : white;
}
.footerleft {
.identical;
background: white;
border : #5fc0cd 2px solid;
color : #5fc0cd;
}
.identical2;
height : 64px;
position : fixed;
bottom : 0;
right : 0;
left : 0;
padding : 0 18px;
}
弄了个美好代码的插件。看起来整齐舒服多了
返回列表
评论