制作简易的当当购物车页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>制作简易的当当购物车页面</title>
<link type="text/css" rel="stylesheet" href="shopping.css">
<script>
function yiru(){
var r=confirm("请问你是否要移入收藏?");
if(r){
alert("移入成功!")
}
}
function shanchu(){
var r=confirm("请问你是否要删除这件商品?");
if(r){
alert("删除成功!")
}
}
function guanbi(){
var r=confirm("请问你是否要关闭购物车?");
if(r){
close();
}
}
function jiesuan(){
var r=confirm("共2件商品。\u000d一共46元");
if(r){
close();
}
}
</script>
</head>
<body>
<div class="content">
<div class="logo">
<img src="dd_logo.jpg"><span onclick="guanbi()">关闭</span>
</div>
<div class="cartList">
<ul>
<li onclick="yiru()">移入收藏</li>
<li onclick="shanchu()">删除</li>
<li onclick="yiru()">移入收藏</li>
<li onclick="shanchu()">删除</li>
<li><span onclick="jiesuan()">结 算</span></li>
</ul>
</div>
</div>
</body>
</html>
body,ul,li,div,p,h1,h2{margin: 0;padding: 0;}
ul,li{list-style: none;}
.content{width: 810px; margin: 0 auto;}
.logo{margin: 10px 0;}
.logo span{
display: inline-block;
float: right;
width: 60px;
height: 30px;
line-height: 30px;
font-size: 14px;
font-family: "微软雅黑";
background: #ff0000;
color: #ffffff;
text-align: center;
border-radius: 10px;
margin-top: 5px;
margin-right: 10px;
cursor: pointer;
font-weight: bold;
}
.cartList{
background: url("shoppingBg.jpg") no-repeat;
height: 414px;
overflow: hidden;
}
.cartList ul{
float: right;
width: 100px;
margin-top: 110px;
}
.cartList ul li{
font-family: "微软雅黑";
font-size: 12px;
color: #666666;
text-align: center;
line-height: 25px;
cursor: pointer;
}
.cartList ul li:nth-of-type(3){margin-top: 60px;}
.cartList ul li:nth-of-type(5){margin-top: 80px;}
.cartList span{display: inline-block;
float: right;
width: 80px;
height: 35px;
line-height: 35px;
font-size: 14px;
font-family: "微软雅黑";
background: #ff0000;
color: #ffffff;
text-align: center;
margin-top: 5px;
margin-right: 15px;
cursor: pointer;
font-weight: bold;}
![在这里插入图片描述](https://img-blog.csdnimg.cn/d95048e4ab73408d8d3033fb9c33f7e3.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6JiR6I-H6YWx6YWx,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)