Web前端-购物车商城

项目简介：该项目是跟随 b站动力节点 java老杜的夏令营前端小项目 跟随视频从头到结束的。

                该项目内容包含基本的HTML/CSS/JavaScript知识点，对初学者初学前端有很大帮助，

                能够很好的为初学者提供前端学习的思想，该项目功能只实现了视频学习中的功能，也                   有很多需要修改和完善的地方，只提供初学者参考学习。

代码如下：ＨＴＭＬ＋（Ｓｃｒｉｐｔ）段

	
		
		
		
	
	
		
		

			
			

				

					
					
					店铺：好好看服装店
					
				
				
				

					
					

						
					
					
					

						
					
					
					

						
						

							时尚雪纺衫女长袖2022春装新款内搭显瘦衬衫高档洋气小衫上衣打底
						
						
						

							
							
							
						
					
					
					

						
						

							颜色分类:黑色
						
						
						

							尺码:xxl
						
					
					
					

						

							￥119.80
						
						

							￥59.90
							
							
						
					
					
					

						-
						
					    + 
					
					
					

						￥59.90
					
					
					

						
						

							移入收藏夹
						
						
						

							删除
						
					
				
				
				

					
					

						
					
					
					

						
					
					
					

						
						

							时尚雪纺衫女长袖2022春装新款内搭显瘦衬衫高档洋气小衫上衣打底
						
						
						

							
							
							
						
					
					
					

						
						

							颜色分类:黑色
						
						
						

							尺码:xxl
						
					
					
					

						

							￥119.80
						
						

							￥59.90
						
					
					
					

						-
						
						+
					
					
					

						￥59.90
					
					
					

						
						

							移入收藏夹
						
						
						

							删除
						
					
				
			
			
			

				

					
					
					店铺：好好看服装店
					
				
				
				

					
					

						
					
					
					

						
					
					
					

						
						

							时尚雪纺衫女长袖2022春装新款内搭显瘦衬衫高档洋气小衫上衣打底
						
						
						

							
							
							
						
					
					
					

						
						

							颜色分类:黑色
						
						
						

							尺码:xxl
						
					
					
					

						

							￥119.80
						
						

							￥59.90
						
					
					
					

						-
						
						+
					
					
					

						￥59.90
					
					
					

						
						

							移入收藏夹
						
						
						

							删除
						
					
				
			
			

				
				

					
					
						  全选
					
					
					
						删除
					
					
				
				
				

					已选商品0件
					合计(不含运费):
					0.00
					结 算
				
			
		
	

 ＣＳＳ代码段

/* 类选择器可以写多个，使用逗号隔开 */
.shop_icon, .shop_wangwang_icon, .three_icon span {
	width: 15px;
	height: 15px;
	background-color: aqua;
	/* 以块的形式展现出来，但是不会独占行 */
	display: inline-block;
}
/* 设置所有店铺的样式 */
.shops {
	width: 1100px;
	background-color:aliceblue;
	/* 设置div居中 */
	margin-left: auto;
	margin-right: auto;
	/* 字号大小 */
	font-size: 0.8125rem;
	color:black;
}
/* 设置店铺名称的位置 ，使其对齐*/
.shop_name {
	position: relative;
	bottom: 0.1875rem;
}
/* 设置店铺头上4个元素的右外补丁 */
.shop_checkbox, .shop_wangwang_icon, .shop_name, .shop_icon{
	margin-right: 0.625rem;
}
/* 设置条目的样式 */
.item{
	/* 弹性布局 */
	display: flex;
	/* 设置背景颜色 */
	background-color: #FAFAFA;
	/* 设置边框 */
	border: 0.0625rem solid #DAD9D9;
	/* 给item条目添加一个内补丁 */
	padding: 1.25rem;
	
}
/* 设置商品图片的样式 */
.item_img{
	width: 6.25rem;
	height: 6.25rem;
	background-color: #00FFFF;
}
/* 设置header向下的补丁 */
.header{
	margin-bottom: 0.625rem;
}
/* 设置条目复选框，条目图片的右外补丁 */
.item_checkbox{
	margin-right: 0.625rem;
}
.item_img{
	margin-right: 0.625rem;
}
.promotion{
	/* 弹性布局，默认是横向布局 */
	display: flex;
	/* 纵向布局，把弹性布局的默认横向改为纵向布局 */
	flex-direction: column;
	/* 调整内容，两端对齐 */
	justify-content: space-between;
	/* 调整div盒子宽度 */
	width: 15.625rem;
	margin-right: 3.125rem;
}
/* sku商品样式 */
.sku{
	/* 右外补丁 */
	margin-right: 9.375rem;
}
/* 单价price右边添加补丁 */
.price{
	margin-right: 2.8125rem;
	font-weight: 600;
}
/* 价格一灰色 */
.price1{
	color: pink;
}
/* input输入框：数量  .空格后面是跟子元素*/
.num input{
	width: 1.875rem;
	height: 1.5625rem;
	/* 让文本框中的文本居中 */
	text-align: center;
}
/* num和总价的右外补丁 */
.num, .item_total_price{
	margin-right: 3.125rem;
}
/* 总价颜色修改 */
.item_total_price{
	font-weight: 600;
	color: orangered;
}
.num{
	background-color: pink;
	
	height: 1.875rem;
}
.shop{
	margin-top: 1.875rem;
}
.checkout{
	display: flex;
	justify-content: space-between;
	background-color: pink;
	height: 2.5rem;
	margin-top: 1.25rem;
	padding: 1.25rem;
}
.checkall{
	margin-right: 6.25rem;
}
.checkout2{
	margin-left: 1.875rem;
}
.checkoutbtn, .totaltext{
	margin-left: 1.875rem;
}
.checkedcount, .total_price{
	font-size: 1.25rem;
	font-weight: 600;
	color: orangered;
}
.checkoutbtn{
	width: 6.25rem;
	height: 58px;
	background-color:#555555;
	display: inline-block;
	position: relative;

	font-size: 1.25rem;
	color: #00FFFF;
	text-align: center;
	/* 设置行间距 */
	line-height: 3.75rem;
}
.checkout2{
	position: relative;
	bottom: 1.25rem;
}
.del:hover, .plus:hover, .minus:hover{
	color: #F31919;
	cursor: pointer;
}

效果图