.post-area-frame {
margin: 40px auto 0;
}
#post-area {
width: 100%;
overflow: hidden;
}
#post-area .masonry-post {
position: relative;
z-index: 2;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 15px 30px;
width: 100%;
background: #fff;
float: left;
width:calc(25% - 30px);
width:-webkit-calc(25% - 30px);
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
#post-area .masonry-post .type-post {
overflow: hidden;
}
#post-area .masonry-post .entry-subtitle {
display: none;
}
#post-area .masonry-post:hover {
-webkit-box-shadow: 0px 0px 15px #ccc;
-moz-box-shadow: 0px 0px 15px #ccc;
box-shadow: 0px 0px 15px #ccc;
}
#post-area .masonry-post .isux-image {
overflow: hidden;
background: #aaa;
}
#post-area .masonry-post .isux-image .open-single-frame {
display: block;
padding-top: 53%;
position: relative;
}
#post-area .masonry-post .isux-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
#post-area .masonry-post .isux-category,.latestone .post-cate {
position: relative;
float: right;
}
#post-area .masonry-post .isux-category {
height: 40px;
margin-bottom: -8px;
margin-right: 12px;
}
#post-area .masonry-post .isux-category span,.latestone .post-cate span {
float: left;
overflow: hidden;
margin: 0 3px;
width: 38px;
height: 38px;
line-height: 38px;
border: 1px solid #e6e6e6;
-webkit-border-radius: 40px;
border-radius: 40px;
color: #ccc;
text-align: center;
font-size: 16px;
font-weight: 100;
}
/*#post-area .masonry-post .isux-category span:hover {
opacity: 0.7;
}
*/
#post-area .masonry-post .isux-category .navlist-sub:before {
padding-right: 20px;
}
/*#post-area .masonry-post .isux-category .cate-vd,.latestone .post-cate .cate-vd:before {
border-color: #ff4085;
color: #ff4085;
}*/
#post-area .masonry-post .isux-category span:before,.latestone .post-cate span:before {
display: block;
width: 40px;
}
#post-area .masonry-post .isux-category .cate-vd:before,.latestone .post-cate .cate-vd:before {
content: "D";
}
/*#post-area .masonry-post .isux-category .cate-id，.latestone .post-cate .cate-id {
border-color: #ffa900;
color: #ffa900;
}*/
#post-area .masonry-post .isux-category .cate-id:before,.latestone .post-cate .cate-id:before {
content: "D";
}
/*#post-area .masonry-post .isux-category .cate-fd,.latestone .post-cate .cate-fd {
border-color: #32b5d7;
color: #32b5d7;
}*/
#post-area .masonry-post .isux-category .cate-fd:before,.latestone .post-cate .cate-fd:before {
content: "E";
}
/*#post-area .masonry-post .isux-category .cate-ur,.latestone .post-cate .cate-ur {
border-color: #9abc1c;
color: #9abc1c;
}*/
#post-area .masonry-post .isux-category .cate-ur:before,.latestone .post-cate .cate-ur:before {
content: "R";
}
/*#post-area .masonry-post .isux-category .cate-ux,.latestone .post-cate .cate-ux {
border-color: #a866ae;
color: #a866ae;
}*/
#post-area .masonry-post .isux-category .cate-ux:before,.latestone .post-cate .cate-ux:before{
content: "T";
}
#post-area .masonry-post .isux-category:after {
clear: both;
display: table;
height: 0;
content: "";
line-height: 0;
}
#post-area .masonry-post h2 {
height: 50px;
font-size: 30px;
padding: 0 20px;
}
#post-area .masonry-post h2 a {
display: inline-block;
overflow: hidden;
box-sizing: border-box;
width: 100%;
height: 50px;
color: #000;
vertical-align: top;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: normal;
font-size: 0.20rem;
line-height: 50px;
}
#post-area .masonry-post h2 a:hover {
color: #626262;
}
#post-area .masonry-post .info {
position: relative;
padding: 0 20px;
overflow: hidden;
}
#post-area .masonry-post .author,#post-area .masonry-post .isux-date {
height: 40px;
line-height: 40px;
}
#post-area .masonry-post .author:after,#post-area .masonry-post .isux-date:after {
clear: both;
display: table;
height: 0;
content: "";
line-height: 0;
}
#post-area .masonry-post .author {
float: left;
display: block;
text-align: left;
}
#post-area .masonry-post .author img {
float: left;
width: 40px;
height: 40px;
border-radius: 20px;
}
#post-area .masonry-post .author .username {
float: left;
overflow: hidden;
margin-left:10px;
height: 40px;
max-width: 87px;
color: #737373;
vertical-align: top;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px;
line-height: 40px;
}
#post-area .masonry-post .isux-date {
float: left;
overflow: hidden;
margin-left: 10px;
color: #a3a3a3;
text-align: left;
white-space: nowrap;
font-size: 14px;
}
#post-area .type_photo_double {
width: 100%;
}
@media only screen and (max-width: 768px) {
#post-area .masonry-post {
width: calc(50% - 30px);
width: -webkit-calc(50% - 30px);
}
#post-area .masonry-post .author img {
width: 28px;
height: 28px;
}
#post-area .masonry-post .isux-category a,.latestone .post-cate a {
margin:0 3px;
}
#post-area .masonry-post .author, #post-area .masonry-post .isux-date, #post-area .masonry-post .author .username {
height: 28px;
line-height: 28px;
}
}
5，如何使用微信的JSSDK
注册公众号，然后会有一个AppId和AppSceret
前端代码如下：
相关文章
精彩导读
热门资讯
关注我们
