关于网页设计中购物车hover与table切换实现方法的一点点说明

在刚接触网页设计时，这两个问题往往是一大难点。下面笔者就先从hover效果的实现开讲。

先打出网页内容

<div id="box">

     <div class="shopcar">
     购物车
     </div>

     <div class="hidden">
     您的购物车没有商品,请尽快选购!!!
     </div>

</div>

再添加样式

<style>
      *{
    margin:0;
        padding:0;
        list-style:none;

      }
      #box{
           width:200px;
           margin:0 auto;
           margin-top:100px;
           position:relative;
      }
      #box .shopcar{
                    width:200px;
                    height:40px;
                    border:1px solid red;
                    border-bottom:none;
                    background:blue;
                    position:relative;
                    z-index:1;
                    font-size:16px;
                    line-height:40px;
                    text-align:center;
                    color:red; 
      }
      #box .hidden{