京东购物css事件

#css文件


/*通用
 ============================================*/
*{
    margin: 0;
    padding: 0;
}

/*导航条
 ============================================*/
#nav{
    height: 40px;
    background-color: #dddddd;
    line-height: 40px;
    
    position: relative;
    
}

/*导航条上所有的li标签*/
#nav li{
    float: left;
    vertical-align: middle;
    
    position: relative;
    
    font-size: 13px;
    color: #999999;
}

#nav a{
    color: #999999;
    text-decoration: none;
}
#nav a:hover{
    color: red;
}

#nav ul{
    /*去掉列表前的符号*/
    list-style: none;
}

/*=======导航条左边=======*/
#nav-left{
    position: absolute;
    left: 30px;
}

#selcted-city{
    height: 40px;
    position: relative;
    float: left;
}
#nav-left img{
    position: absolute;
    width: 25px;
    height: 25px;
    top: 50%;
    margin-top: -12px;
}
#nav-left a{
    margin-left: 25px;
}
#nav-left font{
    margin-left: 25px;
}

#nav-left #li1{
    margin-right: 10px;
}

/*城市标签*/
#citys{
    width: 400px;
    /*height: 200px;*/
    background-color: white;
    display: none;
    margin-top: 40px;
}
#selcted-city{
    padding-right: 20px;
}
#li2:hover #selcted-city{
    background-color: white;
    border: 1px solid #d1d1d1;
    border-bottom: none;
}
#li2:hover #citys{
    display: block;
    border: 1px solid #d1d1d1;
    border-top: none;
    
}

#citys{
    /*清除浮动*/
    overflow: hidden;
    position: absolute;
    left: 0px;
    /*padding-right: 10px;*/
}

#citys div{
    float: left;
    width: 60px;
    padding-left:20px;
    /*background-color: seagreen;*/
    
}
#citys div font{
    margin-left: 0px;
    padding: 3px;
    cursor: pointer;
    /*background-color: khaki;*/
}

#citys div font:hover{
    color: red;
    background-color: #dfdfdf;
}


/*=======导航条右边========*/
#nav-right{
    position: absolute;
    right: 30px;
}
#nav-right li{
    margin-left: 10px;
}
.line{
    margin-right: 10px;
}




/*内容
 ============================================*/
#content{
    /*height: 500px;*/
    /*background-color: sandybrown;*/
}

/*=======搜索=====*/
#content #search{
    height: 120px;
    background-color: lightsalmon;
}

/*=======没有商品=====*/
#content #no-goods{
    height: 400px;
    background-color: white;
    line-height: 400px;
}
#content #no-goods div{
    text-align: center;
    position: relative;
}
#content #no-goods img{
    width: 100px;
    height: 100px;

    vertical-align: middle;
}
#content #no-goods font{
    color: #505050;
}

/*=======有商品=====*/
#goods{
    /*background-color: skyblue;*/
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/*=====商品表格*/
#goods table{
    margin-bottom: 20px;
}

td{
    text-align: center;
}
.td1{
    width: 80px;
    
}
.td2{
    width: 300px;
}
.td3{
    width: 140px;
}
.td4{
    width: 140px;
}
.td5{
    width: 160px;
}
.td6{
    width: 80px;
}

/*商品信息*/
#goods .goods-pic{
    width: 80px;
    height: 100px;
    
    vertical-align: middle;
    float: left;
}

#goods .goodsInfo{
    position: relative;
}
#goods table p{
    text-align: left;
    float: left;
    width: 220px;
    font-size: 12px;
    height: 40px;
    
    position: absolute;
    top: 50%;
    margin-top: -20px;
    margin-left: 80px;
}

/*数量*/
.td4 button{
    width: 20px;
    height: 20px;
}
.td4 input{
    width: 20px;
    height: 20px;
    
    text-align: center;
}

.td6-del{
    color: #999999;
    cursor: pointer;
}



/*=====商品底部*/
#account #del{
    float: left;
}

#account button{
    float: right;
}

#account p{
    float:  right;
    margin-right: 100px;
}

#account{
    overflow: hidden;
}




/*底部
 ============================================*/
#bottom{
    height: 400px;
    background-color: lemonchiffon;
}