发表于： 2019-12-21 21:23:23
1 1102
今天完成的事情：完成任务10大部分
明天计划的事情：继续任务
遇到的问题：导航切换尝试用其他方法来写花费较长时间
收获：先上效果图
响应式的部分已经写完手机页面的部分，其他的也快写完了
具体代码
@media screen and (max-width:980px){
.Flowchartpart1{
width: 50%;
}
.Flowchart{
flex-wrap: wrap;
padding: 0 5vw;
}
.bothsides{
flex-grow:1;
}
}
@media screen and (max-width:980px){
.tablepart2left{
flex-direction: column;
}
.tablepart2wrap{
margin-bottom: 30px;
margin-right: 0px;
}
.main{
padding: 0 5vw;
}
.header{
padding: 0 5vw;
}
.navfather{
padding-right: 5vw;
}
}
@media screen and (max-width:1200px){
.tablepart2leftfather{
flex-direction: row;
}
.tablepart2left{
flex-direction: column;
margin-right: 50px;
align-items: flex-start;
}
.long{
margin: 0 50px 30px 0px;
}
.tablepart2wrap{
margin-bottom: 30px;
margin-right: 0px;
}
.tablepart2wrap-2{
margin-bottom: 30px;
}
.footer{
flex-direction: column;
}
.footermiddle{
width: 300px;
margin: 30px 0;
}
}
@media screen and (max-width:700px){
.tablepart2leftfather{
flex-direction: column;
}
.tablepart2left{
margin-right: 0px;
}
.long{
margin-right: 0px;
}
.selection{
width: 100px;
padding-left: 10px;
}
}
@media screen and (max-width:768px){
.nav{
width: 100%;
}
.nav li a{
margin: 0 auto;
}
.nav li {
padding: 5px 0;
}
}
明天改一下bug，写剩下的响应式的部分就基本完成了
返回列表
评论