新闻列表

直接使用代码

图片素材

css代码

 <style>
/* banner图+搜索 */
.com-lunbo-box{background-size:100%!important; background-position:  center top; height:300px;margin-top:2px;}


.com-lunbo-box .l-arctype{padding-top:90px}
.com-lunbo-box .l-title{color:#fff;font-size:28px;font-weight: bold;}
.com-lunbo-box .com-tree{margin-top:111px;color:#fff;padding-bottom:20px}
.com-lunbo-box .com-tree a{color:#fff; font-size:16px}

.search-form-box{width:600px;background:#fff;border-radius:50px;height:45px;}
.search-form-box input{color:#e60012;display: inline-block; width: 515px;border:none;outline: none;margin-left:20px;line-height:40px;height:40px;font-size:16px;margin-top:0px}
.search-form-box button{height:40px;width:40px;padding-top:-2px;right:3px;background:none;border:none}
.search-form-box button img{margin-top:-3px}

.search-form input::-webkit-input-placeholder{color:#A7A7A7}
.search-form input::-moz-placeholder{color:#A7A7A7}
.search-form input:-moz-placeholder{color:#A7A7A7}
.search-form input:-ms-input-placeholder{color:#A7A7A7}

.product-nav{position: relative; bottom:-8px;left:0;height:70px;background:#034b54;overflow: hidden;}
.product-nav  .p-item-nav{display:inline-block;  color:#fff;font-size:15px;;margin-right:20px;cursor: pointer;background: #7c7e84;padding:5px 20px;border-radius: 4px;margin-top:15px;;}
.product-nav   .current{background: #e60012; }
.product-nav .row{white-space:nowrap;overflow:hidden}

/* 主体内容 */
.com-content-box{padding:50px 0}
.com-content-box-bg2{background: #EBEFF1;}
.com-arctype-name2{margin:20px 0;color:#034b54;font-size:22px;font-weight: bold;letter-spacing: 1px;}

.index-box5{margin-top:40px;margin-bottom:40px}
.box5-item{display: block;background: #F4F4F4;margin-bottom:20px;}

.box5-item  .news-title{color:#000;font-size:18px;margin-top:10px;margin-bottom:0px}
.box5-item  .news-title .date{color:#888}
.box5-item  .des{color:#888888;font-size:14px;margin-top:5px;height:42px;margin-bottom:5px;}

.box5-item:hover  .news-title{color: #E60012;}
.box5-item .flag-box span{display: inline-block;background:#b5b5b5;padding:2px 5px;border-radius: 3px;margin-right:8px;color:#fff!important;font-size: 12px;;}
.box5-item .n-sort{position: absolute;left:0;top:0;background:#E60012;color:#fff;padding:3px 8px;}

.news-box{margin:0 -30px}  
.article-box{min-height: 500px;}

.article-box  .right-box{ background: #EBEFF1; padding:8px 25px;padding-bottom:40px;margin-left:20px;margin-bottom:50px;vertical-align: middle;}
.article-box  .right-box h4{line-height: 50px;border-bottom:1px solid #ccc;color:#555;font-size:19px}
.article-box  .right-box .label{vertical-align: middle;margin-top:5px;}
.article-box  .link-item  .r-title{width: 86%;float: right;top:-10px;right:0;position: relative;}

.right-box2{min-height: 300px;}
.right-box .txt{display: inline-block;color:#fff;background: #aaa;padding:2px 6px;margin-right:10px;margin-top:10px;border-radius: 4px;}
.right-box .txt:hover{color:#e60012}


.article-box  .link-item{display: block;clear: both; padding-top:15px;font-size:15px;line-height:25px}
.article-box  .link-item {color:#555;padding-right:10px}
.article-box  .link-item:hover {color:#e60012}
.post-nav a:hover{color:#e60012}

</style>

HTML+JS代码

 <section class="com-lunbo-box " style="background:url(http://www.bootfastui.cn/img/2021/0321-4/banner55.jpg) no-repeat;">
  <div class="container ">
    <div class="row l-arctype">
      <div class="col-md-3 pm">
        <h3 class="l-title">关于我们</h3>
      </div>
      <div class="col-md-9">
        <div class="fright search-form-box hidden-xs">
          <form class="search-form" method="post" enctype="multipart/form-data" action="/search">
            <input type="text" name="keyword" autocomplete='off' placeholder="请输入您要搜索的内容...">
            <button type="submit"><img src="http://www.bootfastui.cn/img/2021/0321-4/search.png" width="100%" alt=""></button>
          </form>
        </div>
      </div>
      <div class="com-tree ">
        <a href="http://www.bootfastui.cn">首页</a> > <a href="http://www.bootfastui.cn">关于我们</a>
      </div>
    </div>

  </div>
  <div class="product-nav ">
    <div class="container">
      <div class="row">
        <a href="http://www.bootfastui.cn" class="p-item-nav current">
          新产品信息 </a><a href="http://www.bootfastui.cn" class="p-item-nav ">
          公司资讯 </a><a href="http://www.bootfastui.cn" class="p-item-nav ">
          参展信息 </a>
      </div>
    </div>
  </div>
</section>

<section class="container">
  <div class="news-box">
    <div class="index-box5 article-box">
      <!-- left -->
      <div class="col-md-8 pad-pc-right0">
        <!-- item start -->
        <a class="box5-item" href="http://www.bootfastui.cn">
          <div class="col-md-2  pm col-xs-3 relative">
            <img src="/Public/images/img11.jpg" width="100%" alt="" style="max-height:250px">
            <div class="n-sort" style="background: #e60012;">新产品信息</div>
          </div>
          <div class="col-md-10  col-xs-9">
            <h3 class="news-title sheng" title='赛米微尔推出SG8022B090系列电源用陶瓷气体放电管'>赛米微尔推出SG8022B090系列电源用陶瓷气体放电管</h3>
            <div class="date">2021-02-07</div>
            <div class="des hidden-xs">Semiware日前推出一款高性能陶瓷气体放电管SG8022B090,针对快速上升瞬态电压提供高水平保护。 </div>
            <div class="flag-box">
              <span>陶瓷放电管</span><span>气体放电管</span><span>大功率放电管</span><span>贴片放电管</span>
            </div>
          </div>
          <div class="clear"></div>
        </a>
        <!-- item end -->

        <a class="box5-item" href="http://www.bootfastui.cn">
          <div class="col-md-2  pm col-xs-3 relative">

            <img src="/Public/images/img11.jpg" width="100%" alt="" style="max-height:250px">
            <div class="n-sort" style="background: #e60012;">新产品信息</div>
          </div>
          <div class="col-md-10  col-xs-9">
            <h3 class="news-title sheng" title='SESMC24系列ESD静电抑制器在CAN总线收发器中的应用'>SESMC24系列ESD静电抑制器在CAN总线收发器中的应用</h3>
            <div class="date">2021-02-07</div>
            <div class="des hidden-xs">在产品电路设计中，应考虑的几个事项包括：内部IC与外部TVS保护电路，TVS二极管的开关电压，二极管阵列 </div>
            <div class="flag-box">
              <span>瞬态电压抑制二极管</span><span>TVS二极管</span><span>保护电路</span><span>SESMC24</span>
            </div>
          </div>
          <div class="clear"></div>
        </a>
      </div>
      <!-- left end -->
      <!-- right -->
      <div class="col-md-4">
        <div class="right-box">
          <h4>相关</h4>
          <a href="http://www.bootfastui.cn" class="link-item com-img relative">
            <span class="label label-danger">1</span>


            <div class="r-title "> 赛米微尔推出SG8022B090系列电源用陶瓷气体放电管</div>

            <div class="clear"></div>
          </a><a href="http://www.bootfastui.cn" class="link-item com-img relative">
            <span class="label label-danger">2</span>


            <div class="r-title "> SESMC24系列ESD静电抑制器在CAN总线收发器中的应用</div>

            <div class="clear"></div>
          </a>
          <div class="clear"></div>
        </div>

        <div class="clear"></div>

        <div class="right-box right-box2 ">
          <h4>热门标签</h4>
          <div class="relative">
            <span class="txt txt1"> 静电防护</span>
            <span class="txt txt2"> ESD测试</span>
            <span class="txt txt3"> 静电测试</span>
            <span class="txt txt4"> 高分子PPTC</span>
            <span class="txt txt5"> 静电防护方案</span>
            <span class="txt txt6"> 车规TVS管</span>
            <span class="txt txt7"> EMI整改</span>
            <span class="txt txt8"> 汽车电子</span>
          </div>
          <div class="clear"></div>
        </div>
      </div>
      <!-- right  end -->

    </div>

  </div>

</section>