[武汉|结业弟子]JS-万晶|2019年11月21日的日报-技能树.IT修真院

发表于： 2019-11-21 22:35:50

1 1007

今天完成的事情：修改前面任务的bug
明天计划的事情、；继续任务
遇到的问题：修改尺寸之后的页面调整起来异常麻烦，但是还是严格按照ui图来修改
收获：重构了任务八的部分代码，效果如图

页面变得很大，具体代码如下

body{
    margin: 0;
    padding: 0;
    width: 1920px;
}
.d1{
    display: flex;
    justify-content: space-between;
    padding: 0 360px 0 360px;
    height: 40px;
    align-items: center;
}
.x1{
    display: none;
}
.box2{
    background: #29b078;
     
}
.d2{
    padding: 0 360px;
    background-color: #29b078;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    height: 100px;
}
.rr{
    position: absolute;
    left: 0px;
    top: 65px;
    margin-left: 360px;
}
.d2 a{
    display: inline-block;
    line-height: 100px;
    width: 100px;
    text-align: center;
    position: relative;
}
#menu{
    display: none;
}
#menu1{
    display: none;
    margin: 0;
}
.y1{
    height: 2px;
    width: 100%;
    position: absolute;
    background-color: white;
    bottom: 0;
    visibility:hidden;
}
.y2{
    height: 2px;
    width: 100%;
    position: absolute;
    background-color: white;
    bottom: 0;
    visibility:hidden;
}
.y3{
    height: 2px;
    width: 100%;
    position: absolute;
    background-color: white;
    bottom: 0;
    visibility:hidden;
}
.y4{
    height: 2px;
    width: 100%;
    position: absolute;
    background-color: white;
    bottom: 0;
    visibility:hidden;
}
.d2 a:link {   
    font-size: 12px;   
    color: #fff;   
    text-decoration: none;   
}   
.d2 a:visited {   
    font-size: 12px;   
    color: #fff;   
    text-decoration: none;   
}   
.d2 a:hover {   
    font-size: 12px;   
    color: #fff;   
    text-decoration: none;   
}   
.a1:hover .y1{
    visibility: visible;
}
.a2:hover .y2{
    visibility: visible;
}
.a3:hover .y3{
    visibility: visible;
}
.a4:hover .y4{
    visibility: visible;
}

.d3{
    display: flex;
    justify-content:center;
    align-items: center;

}
.item img{
    width: 100%;
}

后面的部分基本把尺寸全改了，响应式方面也出了较大问题，一并做了修改，修改部分如下

body{
    width: 100%;
}

.d1{
    display: none;
}
.x1{
    display: block;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
}
.d2{
    display: none;
    height: 160px;
    padding: 0;
}
.d2 a{
    width: 100%;
    display: block;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
}

#menu1{
    height: 50px;
    width: 50px;
    background: url(./8/QQ20191113144045.png);
    display: block;
    cursor: pointer;
}
#menu:checked ~ .d2{
    display: block;
}
.m1{
    display: flex;
    flex-direction: row-reverse;
}
.d6{
    height: 800px;
    flex-direction: column;
    align-items: center;
}
.d61{
    width: 40%;
}
.dd6{
    flex-direction: column;
    align-items: center;
    height: 500px;
    border: none;
    width: 100%;
}
.d8{
    flex-direction: column;
    align-items: center;
    height: 350px;
    justify-content: space-around;
}
.d11{
    flex-direction: column;
    align-items: center;
}
.d111{
    margin-right: 0;
    width: 80%;
    margin-bottom: 10px;
}
.d12{
    display: none;
}
.d14{
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 875px;
}
.d14 img{
   
}
.db{
    flex-direction: column;
    padding: 20px 0 0 10px;
    height: 100%;
}
.zb{
    padding-left: 0px;
}
.db .yb p{
    text-align: left!important;
}
.dbz{
    padding: 0;
}
.c0{
    height: 1000px;
}
.t1{
    height: 301.94px;
}
.b2{
    padding-right: 0px;
}
.d62{
    padding: 55px 0 0 0;
}
.d4{
    padding: 0;
}
.d4 .l1{
    padding-left: 0px;
    flex-wrap: wrap;
}
.d4 .l1 li{
    list-style: none;
    padding-right: 4px;
    width: 20%;
    text-align: center;
}
.rr{
    position: absolute;
    left: 0px;
    top: 40px;
    margin-left: 0px;
}
.n1{
    font-size: 14px;
    font-family:"SimSun";
    margin-bottom: 0;
}
.n2{
    font-size: 20px;
    font-family:"SimSun";
}
.n3{
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;  
}
.zj{
    position: relative;
    right: 0;
}
.g2{
    height: 100%;
}
.container-fluid{
    padding: 10vw;
}