【ife】任务十一：移动Web页面布局实践

header{
width:100%;
height:60px;
background:blue;
font-size:30px;
font-family:Microsoft Yahei;
color:white;
}
#return{
float:left;
width:10%;
height:60px;
line-height:60px;
}
#title{
float:right;
width:50%;
height:60px;
line-height:60px;
}
#navigators{
float:left;
width:100%;
height:65px;
font-size:24px;
font-family:Microsoft Yahei;
}
.navigator{
float:left;
width:20%;
height:60px;
line-height:60px;
text-align:center;
border-bottom:5px solid white;
}
.navigator:nth-child(2){
border-color:blue;
}
#img{
float:left;
width:100%;
height:600px;
background:url("../images/task11_1.png");
background-size:cover;
}
#tabs{
height:150px;
padding:0 50px;
display:flex;
justify-content:space-between;
}
.tab{
height:100%;
width:20%;
text-align:center;
font-size:20px;
font-family:Microsoft Yahei;
border-bottom:5px solid blue;
}
.tab img{
margin-top:15%;
}
#columns{
height:250px;
padding:0 50px;
margin-top:50px;
display:flex;
justify-content:space-between;
}
#column1,#column2,#column3{
height:100%;
width:30%;
text-align:center;
font-size:20px;
font-family:Microsoft Yahei;
}
#column1 img,#column2 img,#column3 img{
margin-top:10%;
margin-bottom:10%;
}
.line{
height:100%;
width:5px;
background:blue;
}
.large{
font-size:24px;
font-family:Microsoft Yahei;
}
.divide{
float:left;
width:100%;
height:20px;
background:blue;
margin-top:50px;
}
.subModel{
float:left;
width:100%;
text-indent:50px;
height:100px;
font-size:40px;
line-height:100px;
font-family:Microsoft Yahei;
}
.model{
height:500px;
padding:0 50px;
display:flex;
flex-flow:column wrap;
justify-content:space-between;
align-content:space-between;
}
.images{
height:240px;
width:32%;
background:url("../images/task11_6.png");
background-size:cover;
}
.files{
height:110px;
width:32%;
background:#eeeeee;
font-size:30px;
line-height:110px;
font-family:Microsoft Yahei;
text-align:center;
}
.article{
float:left;
height:240px;
width:100%;
border-bottom:5px solid blue;
font-size:30px;
font-family:Microsoft Yahei;
}
.descrition{
height:180px;
width:30%;
margin-left:50px;
margin-top:36px;
float:left;
margin-right:30px;
background:url("../images/task11_7.png");
background-size:cover;
}
.content{
margin-left:30px;
margin-top:36px;
float:left;
height:180px;
width:55%;
display:flex;
flex-direction:column;
justify-content:space-between;
margin-right:30px;
}
p:not(.time){
margin:0;
padding:0;
}
p:last-child{
font-size:24px;
}
#outTitle{
float:left;
width:100%;
text-indent:50px;
height:100px;
font-size:30px;
line-height:100px;
font-family:Microsoft Yahei;
}
#imgs{
height:200px;
padding:0 50px;
display:flex;
justify-content:space-between;
}
.image{
height:200px;
width:30%;
background:url("../images/task11_8.png");
background-size:cover;
}
.time{
font-size:24px;
font-family:Microsoft Yahei;
text-indent:50px;
}