直接使用代码

图片素材

css代码

 <style>

/* 顶部信息 */
.top-box {height:40px;background-color: #F8F8F8;border-bottom:1px solid #cecece;padding:10px 0}
.top-box .t-left{display: block;float: left;}
.top-box .t-right{float: right;text-align: right;}
.top-box .t-right a{display: inline-block;padding:0 15px;border-right:1px solid #ccc;}
.top-box .t-right a:last-child{padding-right:0;border:none}
.top-box .t-right a:hover{color:#f08403}
/* logo+搜索 */
.logo-box{padding:30px 0}
.logo-box .logo{width:220px;float: left;margin-top:20px}
.logo-box .search-box{width:600px;float: left;margin:0 80px;}
.logo-box .search-box .form-box{border:1px solid #ccc;height:50px;line-height: 47px;}
.logo-box .search-box .form-box input.keywords{width:470px;padding:0;margin:0;border:none;outline: none;padding-left:20px}
.logo-box .search-box .form-box input.submit{background:#e60013;color:#fff;border:none;width:110px;float: right;line-height: 47px;}
.logo-box .search-box .key-box{line-height: 35px;}
.logo-box .search-box .key-box a{display: inline-block;margin-right:10px;}
.logo-box .search-box .key-box a:hover{color:#e60013;}

.car-box{border:1px solid #ccc;width:190px;float: right;padding:7px 15px;font-size:16px;vertical-align: middle; }
.car-box .number{width:25px;height:25px;line-height: 25px;background: #f08403;border-radius: 30px;text-align: center;display: inline-block;color:#fff}


/* 导航 */
.nav{width:100%;height:48px;background:#3aaaf8;position:relative;z-index: 999;}
.nav ul{position:relative;}
.nav ul li{display:inline-block;float:left;}
.nav ul li:first-child{width:220px;cursor:pointer;}
.nav ul li label{display:block;padding-left:15px;background:#e60013;position:relative;height:48px;line-height:48px;color:#fff;}
.nav ul li .ico{width:20px;display: inline-block;margin-right:10px;}
.nav ul li a{display:block;padding:0 18px;line-height:48px;color:#fff;font-size:18px;}
.nav ul li a.current{background:#5dc071;}
.nav ul li a:hover{background:#5dc071;}
.nav ul li:first-child:hover .side{display:block;}
/* 导航--左侧下拉导航 */
.nav .side{display:block;position:absolute;padding:0px 0 0 15px;top:48px;left:-1px;z-index:3;width:222px;height:406px;border:1px solid #e2e2e2;border-top:none;border-bottom:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #fff;background-color:#3e3938;box-sizing:border-box;}
.nav .side li{width:200px;}
.nav .side li a{color:#fff;height:38px;line-height:38px;padding:8px 0 8px 0;display:block;font-size:16px;}
.nav .side li a:hover{background:none;color:#0085cd;}

.nav .side li:hover .side_main{display:block;z-index:99999;}

/* 导航--左侧下拉导航--右侧主体 */
.nav .side .side_main{display:none;width:290px;background:#FFFFFF;position:absolute;left:220px;top:0px;box-shadow:3px 3px 5px rgba(0,0,0,0.1);border:1px #cecece solid;z-index:7;height:406px}
.nav .side .side_main ul{padding:15px 30px;}
.nav .side .side_main ul li {width:250px}
.nav .side .side_main ul li a{display: block;color:#333;line-height:25px;}
.nav .side .side_main ul li a:hover{color:#e60013}


/* 轮播图 */
.lunbo-center-box{width:680px;float: left;padding:10px}
.carousel-indicators{ bottom:10px; }
.carousel-indicators li{ background:#eee; border:none;margin-right:10px;width:70px;height:8px}
.carousel-indicators li.active{ background:#e60013;margin-right:10px;width:70px;height:8px}

.lunbo-right-box{width:270px;float: left;margin-top:10px}
/*轮播图 -tab 新闻 */
.lunbo-right-box .tab-box {border:1px solid #ccc; background: #f8f8f8;font-size:15px;height:235px}
.lunbo-right-box .tab-box .top-title-box{height:40px;border-bottom:1px solid #ccc;line-height: 38px;}
.lunbo-right-box .tab-box .tab-title{width:48%;float: left;text-align: center;}
.lunbo-right-box .tab-box .tab-title span{display: inline-block;}
.lunbo-right-box .tab-box .current span{border-bottom:2px solid #f08403;color:#f08403;}
.lunbo-right-box .tab-box ul{padding:10px;min-height:190px;position: relative;}
.lunbo-right-box .tab-box li{list-style:disc; list-style-position:inside;line-height: 25px;}
.lunbo-right-box .tab-box li a:hover{color:#e60013}
.lunbo-right-box .tab-box .more{color:#666;float: right;display: block;padding:0 10px 10px 0;position:absolute;bottom:0;right:0;}
.lunbo-right-box .tab-box .more:hover{color:#e60013}

/* 轮播图-成交记录 */
.jilu-box {border:1px solid #ccc;margin-top:10px;padding:20px 0}
.jilu-box .item-jilu{width:49%;float: left;text-align: center;}
.jilu-box .item-jilu img{width: 50px;}
.jilu-box .item-jilu:first-child{border-right:1px solid #ccc}

/* 首页- 产品 -公用*/
.item-product{width:234px;height:180px;position: relative;float: left;}
.item-product .arctype-title{position: absolute;top:15px;left:10px;color:#fff;font-size:16px;font-weight:bold;}
.item-product .product-title{position: absolute;top:10px;left:15px;font-size:16px;font-weight:bold;}
.item-product .product-des{position: absolute;top:35px;left:15px;color:#666}
.item-product .pic{position: absolute;width:120px;right:10px;bottom:0}
.item-product .view{position: absolute;display: inline-block;background-color: #e60013;color:#fff;padding:2px 10px;left:15px;bottom:30px;font-size:12px;}


.index-product-box{float: left;margin-left:10px}
.index-product-box .item-product:hover{color:#e60013}


/* 首页- 产品-块定制 */
.index-box1  .arctype-box{background:#a59aca; width: 220px;}
.index-box1 .index-product-box{border:1px solid #a59aca;}
.index-box1 .index-product-box .item-product{border-right:1px solid #a59aca}
.index-box1 .index-product-box .item-product:last-child{border:none}

.index-box2  .arctype-box{background:#f08300; width: 220px;}
.index-box2 .index-product-box{border:1px solid #f08300;}
.index-box2 .index-product-box .item-product{border-right:1px solid #f08300}
.index-box2 .index-product-box .item-product:last-child{border:none}

.index-box3  .arctype-box{background:#438a7b; width: 220px;}
.index-box3 .index-product-box{border:1px solid #438a7b;}
.index-box3 .index-product-box .item-product{border-right:1px solid #438a7b}
.index-box3 .index-product-box .item-product:last-child{border:none}

.index-box4  .arctype-box{background:#5dc2d0; width: 220px;}
.index-box4 .index-product-box{border:1px solid #5dc2d0;}
.index-box4 .index-product-box .item-product{border-right:1px solid #5dc2d0}
.index-box4 .index-product-box .item-product:last-child{border:none}

</style>

HTML+JS代码

 <div class="top-box">
  <div class="container">
    <div class="row">
      <a href="http://bootfastui.cn" class="t-left"> 塞米微尔旗下元器件交易平台</a>
      <div class="t-right">
        <a href="http://bootfastui.cn" class=""> 请登录</a>
        <a href="http://bootfastui.cn" class=""> 会员注册</a>
        <a href="http://bootfastui.cn" class=""> 会员中心</a>
        <a class=""> <img src="http://www.bootfastui.cn/img/2021/0420/ico_tel.png" width="18" alt=""> 400-021-5756</a>
        <a href="http://bootfastui.cn" class=""> <img src="http://www.bootfastui.cn/img/2021/0420/ico_user.png" width="18" alt=""> 在线客服</a>

      </div>
    </div>
  </div>
</div>
<!-- logo+搜索 -->
<div class="container">
  <div class="row logo-box">
    <img src="http://www.bootfastui.cn/Public/images/logo.png" class="logo" alt="">
    <div class="search-box">
      <div class="form-box">
        <form action="">
          <input type="text" class="keywords" required placeholder="请输入产品名称 型号 参数信息" />
          <input type="submit" value="搜索" class="submit">
        </form>
      </div>
      <div class="key-box">
        <a href="http://bootfastui.cn">SMBJ18CA</a>
        <a href="http://bootfastui.cn">SMBJ18CA</a>
        <a href="http://bootfastui.cn">SMBJ18CA</a>
        <a href="http://bootfastui.cn">SMBJ18CA</a>
        <a href="http://bootfastui.cn">SMBJ18CA</a>
        <a href="http://bootfastui.cn">SMBJ18CA</a>
        <a href="http://bootfastui.cn">SMBJ18CA</a>
      </div>
    </div>
    <div class="car-box">
      <img src="http://www.bootfastui.cn/img/2021/0420/ico_car.png" width="35" alt="">
      <span>我的购物车</span>
      <span class="number">3</span>
    </div>
  </div>

</div>




<!--导航部分-->
<section class="nav ">
  <div class="container">
    <ul class="row">
      <li>
        <label><img src="http://www.bootfastui.cn/img/2021/0420/ico_all.png" class="ico" alt=""> 全部产品分类</label>
        <ul class="side">
          <li>
            <a><img src="http://www.bootfastui.cn/img/2021/0420/ico_dianzi.png" class="ico" alt="">瞬态电压抑制器</a>
            <div class="side_main">
              <ul>
                <li><a href="http://bootfastui.cn">符合车规的TVS二极管</a></li>
                <li><a href="http://bootfastui.cn">高可靠性TVS二极管</a></li>
                <li><a href="http://bootfastui.cn">通用TVS二极管</a></li>
                <li><a href="http://bootfastui.cn">大功率系列TVS二极管</a></li>
              </ul>
            </div>
          </li>
          <li>
            <a><img src="http://www.bootfastui.cn/img/2021/0420/ico_dianzi.png" class="ico" alt="">静电保护器件</a>
            <div class="side_main">
              <ul>
                <li><a href="http://bootfastui.cn">单路和多路静电抑制器</a></li>
                <li><a href="http://bootfastui.cn">聚合物静电抑制器</a></li>
                <li><a href="http://bootfastui.cn">多层结构静电抑制器</a></li>
              </ul>
            </div>
          </li>
          <li>
            <a><img src="http://www.bootfastui.cn/img/2021/0420/ico_dianzi.png" class="ico" alt="">陶瓷气体放电管</a>
            <div class="side_main">
              <ul>
                <li><a href="http://bootfastui.cn">大通流气体放电管</a></li>
                <li><a href="http://bootfastui.cn">适用于电源口防护的陶瓷放电管</a></li>
                <li><a href="http://bootfastui.cn">适用于信号口防护的陶瓷放电管</a></li>
              </ul>
            </div>
          </li>
          <li>
            <a><img src="http://www.bootfastui.cn/img/2021/0420/ico_dianzi.png" class="ico" alt="">保护用齐纳二极管</a>
            <div class="side_main">
              <ul>
                <li><a href="http://bootfastui.cn">通用齐纳二极管</a></li>
                <li><a href="http://bootfastui.cn">小信号Zeners</a></li>
              </ul>
            </div>
          </li>
          <li>
            <a><img src="http://www.bootfastui.cn/img/2021/0420/ico_dianzi.png" class="ico" alt="">半导体放电管</a>
            <div class="side_main">
              <ul>
                <li><a href="http://bootfastui.cn">通用半导体放电管</a></li>
                <li><a href="http://bootfastui.cn">可编程电路保护器</a></li>
                <li><a href="http://bootfastui.cn">PLED开路保护器</a></li>
                <li><a href="http://bootfastui.cn">高可靠性半导体放电管</a></li>
              </ul>
            </div>
          </li>
          <li>
            <a><img src="http://www.bootfastui.cn/img/2021/0420/ico_dianzi.png" class="ico" alt="">保护用压敏电阻</a>
            <div class="side_main">
              <ul>
                <li><a href="http://bootfastui.cn">插件系列压敏电阻</a></li>
                <li><a href="http://bootfastui.cn">表面贴装压敏电阻</a></li>
              </ul>
            </div>
          </li>
          <li>
            <a><img src="http://www.bootfastui.cn/img/2021/0420/ico_dianzi.png" class="ico" alt="">自恢复保险丝</a>
            <div class="side_main">
              <ul>
                <li><a href="http://bootfastui.cn">表面贴装型PPTC</a></li>
                <li><a href="http://bootfastui.cn">引线型自恢复保险丝</a></li>
              </ul>
            </div>
          </li>
          <li>
            <a><img src="http://www.bootfastui.cn/img/2021/0420/ico_dianzi.png" class="ico" alt="">可控硅和双向可控硅</a>
            <div class="side_main">
              <ul>
                <li><a href="http://bootfastui.cn">灵敏触发型单向可控硅</a></li>
                <li><a href="http://bootfastui.cn">标准单向可控硅</a></li>
                <li><a href="http://bootfastui.cn">标准双向可控硅</a></li>
                <li><a href="http://bootfastui.cn">四象限双向可控硅</a></li>
              </ul>
            </div>
          </li>
          <li>
            <a><img src="http://www.bootfastui.cn/img/2021/0420/ico_dianzi.png" class="ico" alt="">二极管和整流器</a>
            <div class="side_main">
              <ul>
                <li><a href="http://bootfastui.cn">整流二极管</a></li>
                <li><a href="http://bootfastui.cn">快恢复二极管</a></li>
                <li><a href="http://bootfastui.cn">小信号开关管</a></li>
                <li><a href="http://bootfastui.cn">肖特基二极管</a></li>
                <li><a href="http://bootfastui.cn">整流桥</a></li>
              </ul>
            </div>
          </li>
          <li>
            <a><img src="http://www.bootfastui.cn/img/2021/0420/ico_dianzi.png" class="ico" alt="">小信号和功率MOSFET</a>
            <div class="side_main">
              <ul>
                <li><a href="http://bootfastui.cn">小信号Mosfets</a></li>
              </ul>
            </div>
          </li>

        </ul>

      </li>
      <li>
        <a href="http://bootfastui.cn" class="current">首页</a>
      </li>
      <li><a href="http://bootfastui.cn">产品目录</a></li>
      <li><a href="http://bootfastui.cn">选型推荐</a></li>
      <li><a href="http://bootfastui.cn">解决方案</a></li>
      <li><a href="/articles/Technical-Learning ">技术学习</a></li>
      <li><a href="http://bootfastui.cn">积分兑换</a></li>
      <li><a href="http://bootfastui.cn">服务中心</a></li>
      <li><a href="http://bootfastui.cn">资讯</a></li>
      <li><a href="http://bootfastui.cn">关于我们</a></li>


    </ul>
  </div>
  <div class="clear"></div>
</section>
<!--导航结束-->




<!-- 轮播+新闻 -->
<section class="container">
  <div class="row">
    <div class="clear"></div>
    <div class="lunbo-center-box" style="margin-left:220px">
      <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">

          <li data-target="#myCarousel" data-slide-to="0" class='active'></li>


          <li data-target="#myCarousel" data-slide-to="1"></li>

        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
          <div class="item  active">
            <a href="http://bootfastui.cn"> <img src="http://www.bootfastui.cn/img/2021/0420/banner.png" alt="First slide"></a>

          </div>
          <div class="item ">
            <a href="http://bootfastui.cn"> <img src="http://www.bootfastui.cn/img/2021/0420/banner.png" alt="First slide"></a>

          </div>
        </div>

      </div>
    </div>
    <div class="lunbo-right-box">
      <div class="tab-box">
        <div class="top-title-box">
          <div class="tab-title current" style="border-right:1px solid #ccc">
            <span>公告</span>
          </div>

          <div class="tab-title">
            <span>解决方案</span>
          </div>
        </div>
        <div class="tab-content">
          <ul>
            <li class="aui-ellipsis"><a href="http://bootfastui.cn">• 测试公告</a></li>
            <a href="http://bootfastui.cn" class="more">更多></a>
          </ul>
          <ul style="display: none;">
            <li class="aui-ellipsis"><a href="http://bootfastui.cn">• 赛米微尔推出SG8022B090系列电源用陶瓷气体放电管</a></li>
            <li class="aui-ellipsis"><a href="http://bootfastui.cn">• SESMC24系列ESD静电抑制器在CAN总线收发器中的应用</a></li>
            <li class="aui-ellipsis"><a href="http://bootfastui.cn">• 贴片压敏电阻的工作原理及在电路中的保护应用</a></li>
            <a href="http://bootfastui.cn" class="more">更多></a>
          </ul>
        </div>

        <div class="clear"></div>
      </div>
      <script>
        // tab特效
        $(document).ready(function (e) {
          $(".tab-title").click(function () {
            // alert($(this).index())
            $(".tab-title").eq($(this).index()).addClass("current").siblings().removeClass("current");
            $(".tab-content>ul").hide().eq($(this).index()).show();
          })
        });
      </script>
      <div class="clear"></div>
      <div class="jilu-box">
        <div class="item-jilu">
          <img src="http://www.bootfastui.cn/img/2021/0420/ico_money.png" alt="">
          <h4>成交记录</h4>
          <div class="info">今日187单</div>
        </div>
        <div class="item-jilu">
          <img src="http://www.bootfastui.cn/img/2021/0420/ico_order.png" alt="">
          <h4>我的订单</h4>
          <div class="info"><a href="http://bootfastui.cn">查看我的订单</a></div>
        </div>
        <div class="clear"></div>

      </div>
    </div>
  </div>
</section>
<script>
  $(function () {
    $(function () { $('.carousel').carousel({ interval: 2000 }); });
  })
</script>
<div class="clear"></div>

<!--产品块 1F -->
<section class="container">
  <div class="mar-y30">
    <div class="row index-box1">
      <div class="item-product arctype-box">
        <div class="arctype-title">1F 瞬态电压抑制器</div>
        <img src="http://www.bootfastui.cn/img/2021/0420/1.png" class="pic" alt="">

      </div>
      <div class="index-product-box">
        <a class="item-product" href="">
          <div class="product-title">SMBJ18CA</div>
          <div class="product-des">高科性能保护用TVS管</div>
          <img src="http://www.bootfastui.cn/img/2021/0420/1.png" class="pic" alt="">
          <span class="view">查看</span>
        </a>
        <a class="item-product" href="">
          <div class="product-title">SMBJ18CA</div>
          <div class="product-des">高科性能保护用TVS管</div>
          <img src="http://www.bootfastui.cn/img/2021/0420/1.png" class="pic" alt="">
          <span class="view">查看</span>
        </a>
        <a class="item-product" href="">
          <div class="product-title">SMBJ18CA</div>
          <div class="product-des">高科性能保护用TVS管</div>
          <img src="http://www.bootfastui.cn/img/2021/0420/1.png" class="pic" alt="">
          <span class="view">查看</span>
        </a>
        <a class="item-product" href="">
          <div class="product-title">SMBJ18CA</div>
          <div class="product-des">高科性能保护用TVS管</div>
          <img src="http://www.bootfastui.cn/img/2021/0420/1.png" class="pic" alt="">
          <span class="view">查看</span>
        </a>
      </div>
    </div>
  </div>
</section>
<div class="container">
  <div class="row">
    <img src="http://www.bootfastui.cn/img/2021/0420/banner_1.png" width="100%" alt="">
  </div>
</div>

<!--产品块 2F -->
<section class="container">
  <div class="mar-y30">
    <div class="row index-box2">
      <div class="item-product arctype-box">
        <div class="arctype-title">2F 静电保护器件</div>
        <img src="http://www.bootfastui.cn/img/2021/0420/1.png" class="pic" alt="">

      </div>
      <div class="index-product-box">
        <a class="item-product" href="">
          <div class="product-title">SMBJ18CA</div>
          <div class="product-des">高科性能保护用TVS管</div>
          <img src="http://www.bootfastui.cn/img/2021/0420/1.png" class="pic" alt="">
          <span class="view">查看</span>
        </a>
        <a class="item-product" href="">
          <div class="product-title">SMBJ18CA</div>
          <div class="product-des">高科性能保护用TVS管</div>
          <img src="http://www.bootfastui.cn/img/2021/0420/1.png" class="pic" alt="">
          <span class="view">查看</span>
        </a>
        <a class="item-product" href="">
          <div class="product-title">SMBJ18CA</div>
          <div class="product-des">高科性能保护用TVS管</div>
          <img src="http://www.bootfastui.cn/img/2021/0420/1.png" class="pic" alt="">
          <span class="view">查看</span>
        </a>
        <a class="item-product" href="">
          <div class="product-title">SMBJ18CA</div>
          <div class="product-des">高科性能保护用TVS管</div>
          <img src="http://www.bootfastui.cn/img/2021/0420/1.png" class="pic" alt="">
          <span class="view">查看</span>
        </a>
      </div>
    </div>
  </div>
</section>
<div class="container">
  <div class="row">
    <img src="http://www.bootfastui.cn/img/2021/0420/banner_2.png" width="100%" alt="">
  </div>
</div>