js网上商城案例
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
购物车
cart.css
@charset "utf-8";
/* CSS Document */
/*中间导航*/
#nav{
width:985px; /*内容固定宽度*/
margin:0px auto; /*固定宽度且居中*/
height:39px;
}
#middle#allnav{
width:100%; /*自适应宽度，占据整个屏幕*/
height:39px;
background-color:#ff7701;
}
#nav ul li{
float:left;
}
#nav ul li a{
float:left; /*兼容ie6*/
padding:0px16px;
height:39px;
line-height:39px;
display:block;
font-weight:bold;
font-size:15px;
color: white;
}
#nav ul li a:hover{
background-color:#ff8c00
}
#nav ul li a.category{
background-image: url(../images/arrow-down.gif);
background-repeat:no-repeat;
background-position:right;
}
/*导航菜单的二级菜单用到定位*/
#nav ul li.menuList{
position:relative;
}
#nav ul li.menuList ul{
background-color:#ff7701;
text-align: center;
top:39px; /*脱离原文档流*/
left:0px;
position:absolute;
width:123px;
display:none;
}
#nav ul li.menuList:hover ul{
display:block;
}
#nav ul li ul li{
float:none;
}
#nav ul li ul li a{
float:none
}
#middle#content{
width:985px;
margin:20px auto;
}
/*中间第二块：订单表*/
#middle#ordertable{
padding:20px; /*和边框有间隔*/
border:1px solid#dedede;
overflow:hidden; /*解决父元素的浮动塌陷*/
}
#ordertable ul li{
float:left;
height:78px; /*和购物车图像的高度一致*/
font:bold25px/78px Verdana,Geneva,sans-serif;
}
#ordertable ul li.step{
background:url(../images/cart/step1.jpg) no-repeat center;
width:679px;
margin-left:30px;
}
#ordertable.btn{
border:1px solid#dedede;
background-color:white;
width:16px;
height:16px;
}
#ordertable.txt{
width:60px;
height:30px;
border:1px solid#dedede;
text-align:center;
font:bold15px/30px Verdana,Geneva,sans-serif;
}
#ordertable.txt:hover{
border:1px solid red
}
#ordertable table{
border:1px solid#dedede;
border-collapse:collapse;
width:100%;
clear:both;
}
#ordertable table tr{
height:50px;
border-bottom:1px dashed#dedede;
}
#ordertable table td,#ordertable th{
text-align:center;
vertical-align:central;
}
/*对单元格的宽度细调*/
#ordertable table td.item{
width:260px;
height:60px;
text-align:left;
}
#ordertable table td.item img{
margin-right:10px;
vertical-align:baseline;
}
/*汇总的一行*/
#ordertable table tr td.cal{
text-align:right;
}
#ordertable table tr td.cal span{
font:bold25px Verdana,Geneva,sans-serif;
color:orange;
}
/*提交订单的按钮*/
#ordertable p{
text-align:right;
}
/*最近浏览*/
#middle#lastview{
margin-top:20px;
border:1px solid#dedede;
padding:20px;
overflow:hidden; /*浮动塌陷*/
}
#lastview dl{
float:left;
height:222px;
width:210px;
margin-right:20px;
}
#lastview dl dd{
line-height:25px;
}
#lastview dl dd span{
font:bold15px Verdana,Geneva,sans-serif;
color:#C30;
}
#lastview dl dd.price{float:left;
}