master

分支 (1)

管理

管理

master

imitate-tmall
/
homepage1.html

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>

<style>
body{
  font-size:12px;
  font-family:Arial;
}
div.categoryWithCarousel{
  position:relative;
  width:100%;
}

div.nav{
  background-color:#DD2727;
  position:relative;
  height:45px;
}
div.head{
  height:45px;
  background-color:#C60A0A;
  width:200px;
  line-height:45px;
  color:white;
  display:inline-block;
  padding-left:20px;
  font-size:16px;
  font-weight:bold;
}
div.rightmenu{
  display:inline-block;
  position:absolute;
  bottom:0;
}
.rightmenu>ul>li>a{
  text-decoration:none;
  color:white;
  font-size:16px;
}
.rightmenu>ul>li>a:hover{
  color:white;
  background-color:#DD2727;

}
div.carousel-of-product{
  height:510px;
  width:1024px;
  margin:0px auto;
}
img.carouselimage{
  height:510px !important;

}
div.carouselbackground{
  width:100%;
  height:510px;
  background-color:#E8E8E8;
  position:absolute;
  top:40px;
  z-index:-1;
}
img.catear{
  position:absolute;
  height:16px;
  display:none;
}
</style>

<script>

  $(function(){
     $("#change li").mouseenter(function(){
	    var left = $(this).position().left;
		var top  = $(this).position().top;
		var width= $(this).css("width");
        var destLeft=parseInt(left)+parseInt(width)/2;
		$("img#catear").css("left",destLeft-12);
		$("img#catear").css("top",top-12);
		$("img#catear").fadeIn(500);
  });

    $("#change li").mouseleave(function(){
    $("img#catear").hide();

  });
  });
</script>
<div style="height:50px"></div>

<div class="categoryWithCarousel">
 <div class="nav">

   <div class="head">
   <span class="glyphicon glyphicon-th-list"></span>
   <span>商品分类</span>
   </div>
   <div class="rightmenu">
    <img class="catear" id="catear" src="https://how2j.cn/tmall/img/site/catear.png" ></img>
    <ul class="nav nav-pills " id="change">
   <li role="presentation"><a href="#nowhere"><span class="glyphicon glyphicon-shopping-cart"></span> 天猫超市</a></li>
   <li role="presentation"><a href="#nowhere"><span class="glyphicon glyphicon-globe"></span> 天猫国际</a></li>
   <li role="presentation"><a href="#nowhere">天猫会员</a></li>
   <li role="presentation"><a href="#nowhere">平板电视</a></li>
   <li role="presentation"><a href="#nowhere">马桶</a></li>
   <li role="presentation"><a href="#nowhere">沙发</a></li>
   <li role="presentation"><a href="#nowhere">电热水器</a></li>
 </ul>
 </div>
 </div>


<div class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li class="active" data-slide-to="0" data-target="#carousel-of-product" data-interval="500"></li>
	<li data-slide-to="1" data-target="#carousel-of-product" class=""></li>
	<li data-slide-to="2" data-target="#carousel-of-product" class=""></li>
	<li data-slide-to="3" data-target="#carousel-of-product" class=""></li>
	<li data-slide-to="4" data-target="#carousel-of-product" class=""></li>
	<li data-slide-to="5" data-target="#carousel-of-product" class=""></li>
  </ol>
  <!-- Wrapper for slides -->
  <div role="listbox" class="carousel-inner">
   <div class="item active">
    <img src="lunbo/1.jpg" class="carouselimage">
   </div>
   <div class="item">
    <img src="lunbo/2.jpg" class="carouselimage">
   </div>
   <div class="item">
    <img src="lunbo/3.jpg" class="carouselimage">
   </div>
   <div class="item">
    <img src="lunbo/4.jpg" class="carouselimage">
   </div>
   <div class="item">
    <img src="lunbo/5.jpg" class="carouselimage">
   </div>
   <div class="item">
    <img src="美女.jpg" class="carouselimage">
   </div>
   </div>
  </div>
  <div class="carouselbackground"></div>
</div>