发表于： 2020-01-07 23:28:34
1 1409
今天完成的事情：今天开始重构任务任务八九，已完成一部分
明天计划的事情：继续重构任务
遇到的问题：细节修改较多，花费较长时间
收获：重构了大部分的代码，先上效果图
字体均有修改。代码部分
body {
margin : 0;
padding: 0;
}
.header {
span {
font-size: 9px;
}
.topright {
display: flex;
}
display : flex;
justify-content: space-between;
padding : 0 16.6vw 0 19.6vw;
height : 20px;
align-items : center;
}
.x1 {
display: none;
}
.box2 {
background: #29b078;
}
.hideright {
position : absolute;
left : 0px;
top : 45px;
margin-left: 19.6vw;
}
#menu {
display: none;
}
#menu1 {
display: none;
margin : 0;
}
.Navigation {
.Navigationtext1:hover .surplus1 {
visibility: visible;
}
.Navigationtext2:hover .surplus2 {
visibility: visible;
}
.Navigationtext3:hover .surplus3 {
visibility: visible;
}
.Navigationtext4:hover .surplus4 {
visibility: visible;
}
height: 100px;
a {
text-decoration: none;
color : #fff;
font-size : 12px;
.surplus1 {
height : 2px;
width: 100%;
position : absolute;
background-color: white;
bottom : 0;
visibility : hidden;
}
.surplus2 {
height : 2px;
width: 100%;
position : absolute;
background-color: white;
bottom : 0;
visibility : hidden;
}
.surplus3 {
height : 2px;
width: 100%;
position : absolute;
background-color: white;
bottom : 0;
visibility : hidden;
}
.surplus4 {
height : 2px;
width: 100%;
position : absolute;
background-color: white;
bottom : 0;
visibility : hidden;
}
display : inline-block;
line-height: 100px;
width : 50px;
text-align : center;
position : relative;
}
padding : 0 15.6vw;
background-color: #29b078;
display : flex;
flex-direction : row-reverse;
}
.carouselpart {
.n3 {
font-size : 2vw;
font-weight : 900;
letter-spacing: 2px;
}
.n2 {
font-size : 3.6vw;
font-family: "SimSun";
}
.n1 {
font-size : 1.6vw;
font-family : "SimSun";
margin-bottom: 0;
}
display : flex;
justify-content:center;
align-items : center;
flex-direction : column;
}
.item img {
width: 100%;
}
后续部分
也是一样改了字体和一部分布局
.Learningform {
.Learningformpart2 {
span {
display : inline-block;
width : 120px;
font-size : 12px;
padding-left: 8px;
}
.Learningformpart1 {
height : 36px;
width : 36px;
border-radius: 50%;
border : solid 1px #dedede;
border-top : rgba(222, 222, 222, 0.3) solid 1px;
border-left : rgba(222, 222, 222, 0.5) solid 1px;
border-right : rgba(222, 222, 222, 0.5) solid 1px;
text-align : center;
line-height : 36px;
color : #29b078;
display : inline-block;
}
display : flex;
align-items : center;
padding-right : 0;
padding-left : 0;
height : 60px;
justify-content: center;
}
align-items: center;
}
.Outstandingstudent {
text-align : center;
line-height: 100px;
}
.Exhibition {
.Exhibitionpart1 {
&:hover {
box-shadow: 0 0 9px 3px #999;
}
margin-bottom: 30px;
display : flex;
flex-direction: column;
justify-items : center;
align-items : center;
padding : 10px 1.5vw 50px;
border : solid 1px #dedede;
border-radius: 3px;
border-top : rgba(222, 222, 222, 0.3) solid 1px;
}
padding: 30px 0;
}
后续部分的区别不大
改了下尺寸让图不抖动
.Picturecontainerpart {
.Picturecontainerpart-queue{
&:hover{
box-shadow: 0 0 9px 3px #999;
}
display: flex;
justify-content: center;
align-items: center;
width: 20%;
height: 180px;
}
display: flex;
flex-wrap: wrap;
}
@media screen and (max-width:1200px) {
.Picturecontainerpart .Picturecontainerpart-queue {
width: 50%;
flex-wrap: wrap;
}
.d62 {
ul{
text-align: center;
}
border-left: none;
}
}
@media screen and (max-width:500px) {
body .container-fluid{
padding: 0 5vw;
}
body .population{
margin-left: 5vw;
}
.Linkcharacter {
width : 100%;
flex-direction: column;
display : inline-block;
text-align : center;
}
body .Projecttitle{
margin-left: 5vw;
}
}
.friendship {
height : 100px;
line-height: 100px;
text-align : center;
}
.Linkcharacterfather{
display: flex;
flex-direction: column;
}
.Linkcharacter {
li {
a {
&:hover{
border-bottom: 0.5px solid green;
}
color: black;
display: block;
height: 22px;
text-decoration:none;
width: 48px;
}
width : 40px;
font-size : 12px;
cursor : pointer;
margin-bottom : 7px;
padding-bottom: 0px;
}
display : flex;
justify-content: space-between;
padding-left : 12px;
margin : 0;
}
明天继续重构任务
返回列表
评论