新闻列表页代码分享-HTML
<li> <div class="pull-left"><div class="pic"><a href="#" title="热烈祝贺《某某音乐作品选》新书发布会圆满成功"> <img src="/upLoad/news/month_1812/201812051012588332.png" alt="热烈祝贺某某某新书发布会圆满成功"> </a></div><div class="cover"><a href="#" title="热烈祝贺某某某新书发布会圆满成功"></a> </div></div> <div class="info pull-right"> <h5><a href="#" title="热烈祝贺《弦索吟：潘某某弹词音乐作品选》新书发布会圆满成功" >热烈祝贺《弦索吟：某某弹词音乐作品选》新书发布会...</a></h5> <p>2018年12月2日，由苏州大某某出版的我校资深某某音乐作曲家潘某某老师新书《某某作品选》发布会在苏州园区某某成功举办。江苏省某某副主席、苏州某某学校校长、苏州市某某团团长某惕，苏州大某某社社长盛某某，苏州市某某联部原副主任、市曲</p> <a href="#" class="more">查看详情</a> </div > <div class="clearfix"></div> </li>
新闻列表页代码分享-CSS
.newslist ul li{border: 1px solid #e5e5e5;padding: 20px;margin-bottom: 20px; background:#f7f7f7;}
.newslist ul li .pull-left{width:220px; height:147px; padding:5px 17px 14px 10px; position:relative; }
.newslist ul li .pic,.newslist ul li .cover a{ width:100%; height:100%;}
.newslist ul li .pic img{ max-height:100%; max-height:100%;}
.newslist ul li .cover{background:url(../images/item_box.png) no-repeat left top; width:100%; height:100%; position:absolute; top:0; left:0;}
.newslist ul li .cover a{ display:block;}
.newslist ul li:hover .cover{background-image:url(../images/item_box_hover.png);}
.newslist ul li .info{ width:660px;}
.newslist ul li .info h5 {line-height: 26px;}
.newslist ul li .info h5 a {font-size: 18px;color: #555;}
.newslist ul li .info p {color: #686868;line-height: 24px;margin: 15px 0 20px;}
.newslist ul li .info a.more {width: 90px;height: 30px;display: block;border: 1px solid #B7AA97;text-align: center;line-height: 30px;color: #B7AA97;font-size: 15px;}
.newslist ul li .info a.more:hover{ border-color:#c1282d;}
