HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="cart.css">
</head>
<body>
<script>/*一个页面内可能有多家店铺，所以最外层盒子用shops命名，
第二层内放置两个店铺盒子和结算盒子
第三层是店铺内部，店铺内部首先有一个头部盒子，头部盒子中有【多选框、店铺名、天猫图、旺旺图】，既然是同一行，那么用span定义
第三层由一个头部盒子和n个条目盒子组成
第四层是条目内部，由多选框、商品图片、商品描述、商品属性、商品价格、商品数量、商品总价、 操作选项
第五层是商品描述内部，由纯文本和小图标组成
第五层是商品属性内部，由各种属性盒子组成
第五层是商品价格内部，由建议价（建议价要用del划线删除）和现价盒子组成
第五层是商品数量内部，由减、文本框、加一共3个span组成
第五层是操作选项内部，由移入收藏夹操作与删除操作盒子组成
设计完样式后考虑js内容，首先数量框限制只能输入数字
其次数量框改变总金额也要跟着改变，这一步可以一起写进判断数量的函数里
想要改变金额要先设法拿到金额，这一步的直觉做法是在price2里设置id拿，但真正开发中往往是设置一个隐藏域real_price，从隐藏域中拿价格
删除操作通过调用parentnode方法直达item父节点再调用remove方法删除
*/
function modifyCount(thisNode){
var userInput=thisNode.value;
var regExp=/^[1-9][0-9]{0,1}$//*表示第一位数字范围为1-9最低出现一次，第二位数字0-9最低出现0次最高出现1次*/
var ok=regExp.test(userInput);
if(!ok){
thisNode.value=1;
}else{
if(thisNode.value>64){
thisNode.value=1;
}
}
var real_price = document.getElementById("real_price").value
var now_total_price=real_price*thisNode.value;
var total_price= document.getElementById("item_total_price")
total_price.innerHTML="¥"+now_total_price
}
function del(thisNode){
var ok = window.confirm("confirm that you want to remove it.")
if(ok){
thisNode.parentNode.parentNode.remove()
}
}
</script>
<!--第一层-->
<div class="shops">
<!--第二层独立店铺页-->
<div class="shop">
<!--第三层店铺头部-->
<div class="header">
<input type="checkbox" class="shop_checkbox">
<span class="shop_icon"></span>
<span class="shop_name">跑圈沙雕好物</span>
<span class="shop_wangwang_icon"></span>
</div>
<!--第三层店铺条目-->
<div class="item">
<!--第四层条目内部复选框-->
<div class="item_checkbox">
<input type="checkbox">
</div>
<!--第四层条目内部商品图片-->
<div class="item_image">
</div>
<!--第四层条目内部商品描述盒子-->
<div class="item_description">
<!--第五层商品描述盒子内部文本-->
<div class="item_text">
21赛季新款F1迈凯伦McLaren车队短袖T恤Polo里卡多诺里斯赛车服111
</div>
<!--第五层商品描述盒子内部图标-->
<div class="item_description_icon">
<span> </span>
<span> </span>
<span> </span>
</div>
</div>
<!--第四层商品属性-->
<div class="sku">
<!--第五层商品属性内部颜色-->
<div class="sku_color">
21迈凯伦海湾t恤
</div>
<!--第五层商品属性内部尺寸-->
<div class="sku_size">
M号
</div>
</div>
<!--第四层商品价格-->
<div class="price">
<!--第五层商品价格内部建议价-->
<div class="price1">
<del>¥198</del>
</div>
<!--第五层商品价格内部现价-->
<div class="price2">
¥98
</div>
<!--单价隐藏域-->
<input type="hidden" id="real_price" value="98">
</div>
<!--第四层商品数量 -->
<div class="number">
<span class="minus">-</span>
<input type="text" value="1" onkeyup="modifyCount(this)">
<span class="minus">+</span>
</div>
<!--第四层商品总价-->
<div id="item_total_price" class="item_total_price">
¥98
</div>
<!--第四层操作选项-->
<div class="operation">
<!--第五层操作选项内部移入收藏夹操作-->
<div class="moveFavorite">
移入收藏夹
</div>
<!--第五层操作选项内部删除操作-->
<div class="del" onclick="del(this)">
删除
</div>
</div>
</div>
<div class="item">
<!--第四层条目内部复选框-->
<div class="item_checkbox">
<input type="checkbox">
</div>
<!--第四层条目内部商品图片-->
<div class="item_image">
</div>
<!--第四层条目内部商品描述盒子-->
<div class="item_description">
<!--第五层商品描述盒子内部文本-->
<div class="item_text">
21赛季新款F1迈凯伦McLaren车队短袖T恤Polo里卡多诺里斯赛车服
</div>
<!--第五层商品描述盒子内部图标-->
<div class="item_description_icon">
<span> </span>
<span> </span>
<span> </span>
</div>
</div>
<!--第四层商品属性-->
<div class="sku">
<!--第五层商品属性内部颜色-->
<div class="sku_color">
21迈凯伦海湾t恤
</div>
<!--第五层商品属性内部尺寸-->
<div class="sku_size">
M号
</div>
</div>
<!--第四层商品价格-->
<div class="price">
<!--第五层商品价格内部建议价-->
<div class="price1">
<del>¥198</del>
</div>
<!--第五层商品价格内部现价-->
<div class="price2">
¥98
</div>
</div>
<!--第四层商品数量 -->
<div class="number">
<span class="minus">-</span>
<input type="text" value="1">
<span class="minus">+</span>
</div>
<!--第四层商品总价-->
<div class="item_total_price">
¥98
</div>
<!--第四层操作选项-->
<div class="operation">
<!--第五层操作选项内部移入收藏夹操作-->
<div class="moveFavorite">
移入收藏夹
</div>
<!--第五层操作选项内部删除操作-->
<div class="del">
删除
</div>
</div>
</div>
</div>
<div class="shop">
<!--第三层店铺头部-->
<div class="header">
<input type="checkbox" class="shop_checkbox">
<span class="shop_icon"></span>
<span class="shop_name">电子爱好者之家</span>
<span class="shop_wangwang_icon"></span>
</div>
<!--第三层店铺条目-->
<div class="item">
<!--第四层条目内部复选框-->
<div class="item_checkbox">
<input type="checkbox">
</div>
<!--第四层条目内部商品图片-->
<div class="item_image">
</div>
<!--第四层条目内部商品描述盒子-->
<div class="item_description">
<!--第五层商品描述盒子内部文本-->
<div class="item_text">
STM32F103电动智能小车套件壁障遥控机器人开发板模块配件组套装
</div>
<!--第五层商品描述盒子内部图标-->
<div class="item_description_icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!--第四层商品属性-->
<div class="sku">
<!--第五层商品属性内部颜色-->
<div class="sku_color">
颜色分类：高配版 智能小车套件 送资料[(7种功能看详情)]
</div>
<!--第五层商品属性内部尺寸-->
<div class="sku_size">
M号
</div>
</div>
<!--第四层商品价格-->
<div class="price">
<!--第五层商品价格内部建议价-->
<div class="price1">
<del>¥198</del>
</div>
<!--第五层商品价格内部现价-->
<div class="price2">
¥198
</div>
</div>
<!--第四层商品数量 -->
<div class="number">
<span class="minus">-</span>
<input type="text" value="1">
<span class="minus">+</span>
</div>
<!--第四层商品总价-->
<div class="item_total_price">
¥198
</div>
<!--第四层操作选项-->
<div class="operation">
<!--第五层操作选项内部移入收藏夹操作-->
<div class="moveFavorite">
移入收藏夹
</div>
<!--第五层操作选项内部删除操作-->
<div class="del">
删除
</div>
</div>
</div>
</div>
<div class="checkout">
</div>
</div>
</body>
</html>
CSS代码
/*使用前别忘了在html页面link上css
/*
把大小相等的图片统一设置
*/
.shop_icon,.shop_wangwang_icon,.item_description_icon span{
width: 10px;
height: 10px;
background-color: antiquewhite;
/*以块的形式展示出来，但不会独占行*/
display:inline-block;
}
/*设置第一层所有店铺样式*/
.shops{
}
/*relative指相对于元素本身的位置，absolute指相对于距离最近的非static父元素的位置*/
/*设置第二层单个店铺名和图标对齐*/
.shop_name{
position: relative;
top: 1px;
}
.shop{
margin-bottom: 30px;
}
/*店铺名和图标之间距离的调整*/
.shop_checkbox,.shop_icon,.shop_name,.shop_wangwang_icon{
/*外补丁，直接的效果是将元素向某个方向增加x个px的间隔*/
margin-right: 3px;
}
/*到此处发现页面所有内容都是块级排放,但是每件商品盒子内部的小盒子我们需要设置横向排放*/
.item{
display: flex;
border: 1px solid #DAD9D9;
/*margin是控制盒子跟外界的距离 ，padding是控制内容跟盒子的距离,此处控制item内部所有内容和盒子的距离*/
padding: 13px;
}
.item_image{
width:100px;
height: 100px;
background-color: antiquewhite;
}
.header{
/*margin是控制盒子跟外界/盒子的距离 ，padding是控制内容跟盒子的距离,此处控制店铺名header和商品item之间的距离*/
margin-bottom: 15px;
}
.item_checkbox,.item_image{
margin-right: 10px;
}
/*弹性布局,且呈纵向排列*/
.item_description{
display: flex;
flex-direction: column;
width: 400px;
justify-content: space-between;
margin-right: 50px;
}
.sku{
width: 250px;
margin-right: 50px;
}
.price{
margin-right: 100px;
font-weight: 600;
}
.price1{
color: #8A8989;
}
.number input{
width:30px;
height: 25px;
/*数量框中的数字居中*/
text-align: center;
}
.number,.item_total_price{
margin-right: 80px;
}
.item_total_price{
font-weight: 600;
color: #F31919;
}
.number{
background-color: #DAD9D9;
height: 33px;
}
/*能点击的“按钮”鼠标悬停时设置小手*/
.plus:hover,.minus:hover,.del:hover{
color: #F31919;
cursor:pointer;
}
5960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
