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代码即可