京东购物车网页内容代码
我的购物车-京东商城
京东首页-
北京
购物车内暂时没有商品，登录后将显示您之前加入的商品
京东购物车内容样式代码
/*通用
============================================*/
*{
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;
}
京东购物车内容动态布局代码
$(function(){
//=====================添加城市=====================
var citysNode = $('#citys')
for(cityName in cities){
//创建城市节点
var cityNode = $(''+cityName+'')
//添加
citysNode.append(cityNode)
}
//默认第一个是白色
$('#citys font:first').css({
'color':'white',
'background-color': 'red'
})
$seletedFontNode = $('#citys font:first')
//添加点击事件
$('#citys').on('click', 'div font', function(){
//更新背景和字体颜色
$(this).css({
'color':'white',
'background-color': 'red'
})
$seletedFontNode.css({
'color':'#999999',
'background-color': 'rgba(0,0,0,0)'
})
$seletedFontNode = $(this)
//更新选中的城市
$('#selcted-city font').text(this.innerText)
//隐藏城市选项
$('#citys').css('display','none')
})
$('#li2').on('mouseover', function(){
$('#citys').css('display','block')
})
$('#li2').on('mouseleave', function(){
$('#citys').css('display','none')
})
//=====================购物车商品=====================
//1.请求商品数据
allGoods = [
{
big_img:'img/a1.jpg',
price: 245,
description:'海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂'
},
{
big_img:'img/a2.jpg',
price: 123,
description:'海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂'
},
{
big_img:'img/a3.jpg',
price: 67,
description:'海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂'
}
]
//2.创建商品对应的标签
for(var i=0; i')
$td2 = $('
'+goodsObj['description']+'
￥'+goodsObj['price']+'.00 ')
$td4 = $('￥'+goodsObj['price']+'.00 ')
$td6 = $('删除 ')
$trNode = $(' 随机颜色代码
//随机颜色
function randomColor(){
var r = parseInt(Math.random()*255)
var g = parseInt(Math.random()*255)
var b = parseInt(Math.random()*255)
//'rgb(23, 45, 89)'
return 'rgb('+r+','+g+','+b+')'
}