main
parent
b233663bf9
commit
6e385b5e26
@ -0,0 +1,162 @@ |
||||
.topcontent{ |
||||
width:100%; |
||||
position: relative; |
||||
margin-top:100px; |
||||
} |
||||
.topcontent img{ |
||||
width:100%; |
||||
|
||||
} |
||||
.titleContent{ |
||||
position:absolute; |
||||
top:30%; |
||||
left:14%; |
||||
} |
||||
.titleContent .title{ |
||||
font-size: 48px; |
||||
font-family: Microsoft YaHei; |
||||
font-weight: 400; |
||||
color: #FFFFFF; |
||||
text-shadow: 0px 2px 6px rgba(9,30,52,0.22); |
||||
} |
||||
.titleContent .subtitle{ |
||||
font-size: 36px; |
||||
font-family: Arial; |
||||
font-weight: 400; |
||||
color: #FFFFFF; |
||||
} |
||||
.leftcontent>img{ |
||||
width:100%; |
||||
} |
||||
.details{ |
||||
padding:20px 20px 40px 20px; |
||||
background: #F8F8F8; |
||||
} |
||||
.contentContainer{ |
||||
margin-top:70px; |
||||
} |
||||
.toptitle{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
.details .toptitle h5{ |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.toptitle span{ |
||||
font-size: 14px; |
||||
font-family: Microsoft YaHei; |
||||
font-weight: 400; |
||||
color: #999999; |
||||
} |
||||
.details .toptitle h5 span{ |
||||
font-size: 16px; |
||||
font-family: Microsoft YaHei; |
||||
color: #124AA0; |
||||
font-weight: bold; |
||||
} |
||||
.details .toptitle h5 img{ |
||||
width:20px; |
||||
height:17px; |
||||
margin-left:11px; |
||||
} |
||||
.details p{ |
||||
padding:0; |
||||
margin:0; |
||||
font-size: 14px; |
||||
font-family: Microsoft YaHei; |
||||
font-weight: 400; |
||||
color: #666666; |
||||
margin-top:24px; |
||||
} |
||||
.more{ |
||||
display: flex; |
||||
align-items: center; |
||||
margin-top:55px; |
||||
} |
||||
.more span{ |
||||
font-size: 16px; |
||||
font-family: Microsoft YaHei; |
||||
font-weight: 400; |
||||
color: #124AA0; |
||||
} |
||||
.more img{ |
||||
width:8px; |
||||
height:14px; |
||||
margin-left:11px; |
||||
} |
||||
|
||||
.items{ |
||||
display: flex; |
||||
align-items: center; |
||||
position: relative; |
||||
background: #FFFFFF; |
||||
border: 1px solid #EAEAEA; |
||||
margin-bottom:6px; |
||||
flex: 1; |
||||
|
||||
} |
||||
.itemcontainer{ |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
height: 100%; |
||||
} |
||||
.itemcontainer>:last-child{ |
||||
margin-bottom:0px; |
||||
} |
||||
.items .left{ |
||||
width:190px; |
||||
height:100%; |
||||
} |
||||
.items .left img{ |
||||
width:100%; |
||||
height:100%; |
||||
} |
||||
.items .right{ |
||||
flex:1; |
||||
margin-left:10px; |
||||
padding:0 9px; |
||||
} |
||||
.right h5{ |
||||
font-size: 16px; |
||||
font-family: Microsoft YaHei; |
||||
color: #222222; |
||||
font-weight: bold; |
||||
} |
||||
.right .time{ |
||||
font-size: 14px; |
||||
font-family: Microsoft YaHei; |
||||
font-weight: 400; |
||||
color: #999999; |
||||
margin:16px 0; |
||||
} |
||||
.right p{ |
||||
margin:0; |
||||
padding:0; |
||||
font-size: 14px; |
||||
font-family: Microsoft YaHei; |
||||
font-weight: 400; |
||||
color: #999999; |
||||
text-overflow: -o-ellipsis-lastline; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
display: -webkit-box; |
||||
-webkit-line-clamp: 3; |
||||
line-clamp: 3; |
||||
-webkit-box-orient: vertical; |
||||
} |
||||
.zhiding{ |
||||
position:absolute; |
||||
right:8px; |
||||
top:10px; |
||||
background: #F6F6F6; |
||||
border-radius: 2px; |
||||
|
||||
font-size: 12px; |
||||
font-family: Microsoft YaHei; |
||||
font-weight: 400; |
||||
color: #999999; |
||||
padding:5px 10px; |
||||
} |
After Width: | Height: | Size: 369 B |
After Width: | Height: | Size: 339 B |
@ -0,0 +1,6 @@ |
||||
$(function(){ |
||||
$("#header").load("../public/header1.html",function(){ |
||||
$('.header').addClass('on') |
||||
}); |
||||
// $("#footer").load("../public/footer.html");
|
||||
}); |
Loading…
Reference in new issue