jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)
¥59.90
-
+
¥59.90
@charset 'utf-8';
* {
margin:0;
padding:0;
}
a {
text-decoration:none;
}
div#shoppingCart {
width:90%;
margin:50px auto;
font-size:14px;
}
div#shoppingCart div.cartMenu {
display:flex;
border-bottom:1px solid #F5F5F5;
padding-bottom:10px;
position:relative;
}
div#shoppingCart div.cartMenu div {
text-align:center;
flex:2;
}
div#shoppingCart div.cartMenu div:first-child {
position:absolute;
width:8.33%;
text-align:center;
left:0;
top:0;
}
div#shoppingCart div.cartMenu div:nth-child(3) {
flex:3;
}
div#shoppingCart div.cartBody article {
display:flex;
border:1px solid #DDD;
border-radius:5px;
margin:20px 0;
}
div#shoppingCart div.cartBody article div {
flex:2;
padding:20px 0;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}
div#shoppingCart div.cartBody article div.info {
flex:3;
position:relative;
}
div#shoppingCart div.cartBody article div.info img {
position:absolute;
left:0;
top:calc(50% - 50px);
height:100px;
width:100px;
}
div#shoppingCart div.cartBody article div.info p {
margin-left:110px;
width:calc(100% - 110px);
text-align:justify;
font-size:12px;
line-height:20px;
height:80px;
box-sizing:border-box;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:4;
overflow:hidden;
}
div#shoppingCart div.cartBody article div.price,div#shoppingCart div.cartBody article div.total {
color:red;
font-weight:bolder;
}
div#shoppingCart div.cartBody article div.number {
display:flex;
}
div#shoppingCart div.cartBody article div.number span {
border:1px solid #CCC;
width:30px;
height:35px;
line-height:35px;
box-sizing:border-box;
cursor:pointer;
}
div#shoppingCart div.cartBody article div.number span:hover {
background-color:#e6e6e6;
}
div#shoppingCart div.cartBody article div.number span:first-child {
border-radius:5px 0 0 5px;
}
div#shoppingCart div.cartBody article div.number span:last-child {
border-radius:0 5px 5px 0;
}
div#shoppingCart div.cartBody article div.number input {
text-align:center;
width:30px;
height:35px;
background-color:transparent;
border:solid 1px #ccc;
border-right:none;
border-left:none;
box-sizing:border-box;
}
div#shoppingCart div.cartBody article div. a {
display:inline-block;
border-radius:5px;
color:#fff;
width:55px;
height:35px;
line-height:35px;
box-sizing:border-box;
background-color:#d9534f;
border-color:#d43f3a;
transition:all 0.3s;
}
div#shoppingCart div.cartBody article div. a:hover {
background-color:#C9302C;
}
div#shoppingCart div.cartBody > div.empty {
text-align:center;
margin:50px 0;
background-color:#F5F5F5;
padding:20px;
}
div#shoppingCart div.cartBody > div.empty img {
width:150px;
}
div#shoppingCart div.cartBody > div.empty p:nth-child(2) {
color:#858585;
font-size:22px;
line-height:1.5;
}
div#shoppingCart div.cartBody > div.empty p:nth-child(3) {
color:#C0C0C0;
line-height:2.5;
}
div#shoppingCart div.cartBody > div.empty p:nth-child(4) a {
color:#878787;
border:1px solid #ACACAC;
border-radius:15px;
padding:5px 15px;
width:80px;
display:inline-block;
margin:10px 15px;
}
div#shoppingCart div.cartBody > div.empty p:nth-child(4) a:hover {
color:red;
border-color:red;
}
div#shoppingCart div.cartFoot {
display:flex;
background-color:#E5E5E5;
justify-content:space-between;
align-items:center;
height:60px;
box-sizing:border-box;
border-radius:5px;
}
div#shoppingCart div.cartFoot div {
flex:1;
text-align:center;
}
div#shoppingCart div.cartFoot div a {
color:#6495EC;
}
div#shoppingCart div.cartFoot div.zhanwei {
flex:6;
}
div#shoppingCart div.cartFoot div.yixuan {
flex:2;
}
div#shoppingCart div.cartFoot div.yixuan span {
color:red;
font-weight:bolder;
padding:0 5px;
}
div#shoppingCart div.cartFoot div.heji span {
color:red;
font-weight:bolder;
}
div#shoppingCart div.cartFoot div.jiesuan {
width:100%;
height:100%;
line-height:60px;
font-size:16px;
}
div#shoppingCart div.cartFoot div.jiesuan a {
display:inline-block;
width:100%;
height:100%;
background-color:#B0B0B0;
color:white;
font-weight:bolder;
border-radius:0 5px 5px 0;
}
更新时间:2020-07-19 12:01:22
css样式是参照本站一位大佬写的,附上大佬链接
http://www.jq22.com/jquery-info21795
但是css代码和js代码(方法老师传授,代码自己写的)完全是自己写的。本购物车为纯js实现,没有使用jquery、bootstrap等框架,js代码大部分都有注释。为了方便,我把购物车为空的状态和不为空的状态写在一起的,使用时删除对应html代码即可