直接使用代码

图片素材

css代码

           <style>
     /* 首页文章块 */
     /* border-bottom: 1px solid #e5ebed; */
     .index-item{border:1px solid #ccc;border-top:3px solid #00907e;margin:15px 0;min-height: 350px;}
     .index-item .news-top{height: 50px; border-bottom: 1px solid #e5ebed;padding-left:15px;}
     .index-item .news-top strong.bt1 { font-weight:bold;font-size: 22px; color: #00907e; line-height: 50px; padding-right:10px;  font-weight: 600;float: left;}
     .index-item .news-top span.bt2	{font-size: 14px;color: #9a9898;line-height:50px; }
     a.gd { float:right; margin-right:10px; color:#333; font-size:14px; line-height:50px; display:block;}
 
     .news-tuijian{padding-top:15px;}
     .news-tuijian h4{margin-top:0;padding-top:0;color:#444;font-weight:bold;}
     .news-tuijian p{color:#666}
     .news-tuijian .more{color:#3292d7}
     .news-banner {height:250px;}
 
     .img-list img{border:1px solid #ccc;box-shadow: 0 0 5px #eee;width:100%;height:200px;}
     .img-list img:hover{box-shadow: 0 0 5px #3292d7;}
 
     .newss_list {height:auto; padding:10px;}
     .newss_list ul li { height:30px; line-height:30px;}
     .newss_list ul li a { float:left; color:#666; font-size:14px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap; /*不换行 */width: 70%;}
     .newss_list ul li span { color:#999; float:right; margin-right:5px;}
     .min350{min-height:400px;}
     </style>

HTML+JS代码

         <div class='container'>

       <div class="row-8">
            <!--内容块开始-->
            <div class="col-md-6">
                <div class="index-item" style="min-height: 400px;">
                    <!-- 块头部 -->
                    <div class="news-top">
                        <a href='/list/42'><strong class="bt1">科室介绍</strong></a>
                        <span class="bt2">Department introduction</span>
                        <a class="gd" href="/list/42">更多&gt;&gt;</a>
                    </div>
                    <!-- 块推荐 -->
                   
                        <div class="news-tuijian">
                            <div class="col-md-3  hidden-xs">
                                <a href="/article/653">
                                    <img src='/Public/images/img43.jpg' width="100%" height="100" />
                                </a>
                            </div>
                            <div class="col-md-9">
                                <a href="/article/653" title='新生儿科简介'>
                                    <h4 class="">新生儿科简介</h4>
                                </a>
                                <p>
                                    我院于2007年始创建了新生儿急救中心，是我市唯一“新生儿科重症监护学科”，目前为“玉门市危重新生儿救治中心”，承担本市及周边地区大部分新生儿的救治工作。目前...<a
                                        href='/article/653' class="more">【查看详情】</a>
                                </p>
                            </div>
                        </div>

                        <!--块列表-->
                        <div class="newss_list clear">
                            <ul>
                                <li><a href="/article/654" title='耳鼻咽喉科简介'>耳鼻咽喉科简介</a>
                                    <span>2019-11-09</span>
                                </li>
                                <li><a href="/article/655" title='风湿骨病科简介'>风湿骨病科简介</a>
                                    <span>2019-11-10</span>
                                </li>
                                <li><a href="/article/656" title='妇科简介'>妇科简介</a>
                                    <span>2019-11-10</span>
                                </li>
                                <li><a href="/article/657" title='肝胆胃肠科简介'>肝胆胃肠科简介</a>
                                    <span>2019-11-10</span>
                                </li>
                                <li><a href="/article/658" title='功能科简介'>功能科简介</a>
                                    <span>2019-11-10</span>
                                </li>
                                <li><a href="/article/659" title='呼吸内科简介'>呼吸内科简介</a>
                                    <span>2019-11-10</span>
                                </li>
                            </ul>
                        </div>
                    </div>

               
                <div class='clear'> </div>
            </div>
            <!--内容块结束-->


        </div>

  </div>