好看的货架效果（含3D效果）

搭配thymeleaf + layui合成 

货架一

 1. css

#gudinghuojia2F .layui-row {  display: flex; justify-content: space-between; height: 100%;}
#gudinghuojia2F .layui-col-xs10 {margin-right: 4%;}
#gudinghuojia2F .layui-col-xs10:last-child {margin-right: 0;}
.inner-title{font-size: 26px;height: 28px;background-color: #b7b7b7; color: #fff;}
.inner-div {background: #82dcb3;}
.inner-div:not(:first-child) {border: 5px solid #494949;height: calc(80% / 4);}

2.html片段 

3.效果（效果只是图中的货架，上面部分只是截图效果贴上来的，代码并没有包含）：

货架二 

1. css

    .layout_4F{height: 100%;width: 70%;display: block; position: relative;}
	  .tongdao {position: absolute;color: #ccd9d9c7;text-align: center; letter-spacing: 10vh; font-size: x-large;} /* 设置字之间的间隔为10vh，设置所有通道的背景为白色 */
	  .ltongdao{position: absolute;left: calc(6% + 10px);top: 14%;writing-mode: vertical-rl;letter-spacing: 12vh;font-size: xxx-large;color: #ccd9d9c7;}
	  .rtongdao{position: absolute;right: 17%;height: 60%;width: 5%;top: 15%;line-height: 300%;font-size: xxx-large;color: #ccd9d9c7;}
	  .container {position: relative;width: 100%; height: 100vh; background-color: #fff;}
	  .chu{position: absolute;height: 4%;line-height: 100%;background-color: #e7dfdf;letter-spacing: 10vh; font-size: 3vh;color: #75b9b9c7;}
	  .chu1{top: calc(12% + 6px);l}

    .btongdao{position: absolute;right: 40%;bottom: 20%;height: 8%;font-size: xx-large;letter-spacing: 10vh;color: #ccd9d9c7;}
    .wai{height: 6%;width: 100%;top: calc(6% + 10px);}

    .zhong{position: absolute; text-align: center; left: calc(12% + 6px); right: 27%;}
    .quyu2{top: calc(28% + 6px);height: 20%;border: 10px solid #ccc;border-bottom: 5px #000 dashed;}
    .quyu3{left: 29%;top:51%;height: calc(20%);border: 10px solid #ccc;border-bottom: 5px #000 dashed;}

	.top {position: absolute;width: 80%; height:5%;border: 10px solid #ccc;border-bottom: 5px #000 dashed; }
	.right {position: absolute;right: 0;height: 60%; top: 12%;width:15%;}
	.bottom {position: absolute;bottom: 0;width: 70%;left: calc(12% + 6px);height:20%;border: 10px solid #ccc;border-bottom: 5px #000 dashed;}
	.left {position: absolute;height: 80%;top: calc(12% + 10px);bottom: 0; width: 6%;border: 10px solid #ccc;border-right: 5px #000 dashed;}
	.da{height: 100%;width: 100%;}

	/*.content-div {   *//* 中间区域 *//*
	  position: absolute;
	  top: 16%; *//* 调整以适应悬浮div的高度 *//*
	  right: 27%; *//* 调整以适应悬浮div的宽度 *//*
	  bottom: 27%; *//* 调整以适应悬浮div的高度 *//*
	  left: 15%; *//* 调整以适应悬浮div的宽度 *//*
	}*/

	.parent {display: flex;   /*Flexbox布局的简写属性，必须设置这个，否则就需要设置浮动，但设置浮动很麻烦*/ }

	.b_child {height: calc(100% / 5); }
	.b_child_child{width: calc(100% / 12);   /* 占据列高度宽度的各1/10 ，但每个div都有边框3px，因此需要减去6px,否则内容会超出父div之外*/}

	.l_child {height: calc(100% / 3 - 3px);}
	.t_child {width: calc(100% / 3 - 3px); }

	.r_child {width: calc(100% / 5);  /* 占据整个div的高度的1/5 */}
	.r_child_child{height: calc(100% / 10 - 2px);}

	.c2_child_child{height: calc(100% / 5);} /*本来是5部分的，第一部分为一面墙，固定给10%的宽度，剩下的90，4个平分*/
	.c3_child_child{height: calc(100% / 5);}  /*本来是5部分的，第一部分为一面墙，固定给10%的宽度，剩下的90，3个平分*/

	.c2_child_child_lie{width: calc(100% / 11 );} /*2区域内每个小单元格*/
	.c3_child_child_lie{width: calc(100% / 8);} /*3区域内每个小单元格*/
	.ts{position: absolute;color: #eb8383;font-size: 3vh;right: 0;}
    .ge{border: 1px solid #ccc;background-color: #f5f5f5;}

	.inner-div:hover, .da:hover, .b_child_child:hover, .l_child:hover, .t_child:hover, .r_child_child:hover, .c2_child_child_lie:hover, .c3_child_child_lie:hover
	{box-shadow: 6px 5px 10px rgba(0, 0, 0, 0.8); background-color: #bebeeb; cursor: pointer;  position: relative; z-index: 999;}

	/*transform: scale(1.1); 放大效果 z-index: 999;/*放大的话就需要设置在最上层，否则会被遮挡，设置z-index就必须设置position ，
	不要设置放大，最下面的这个大区域，如果放大就会超过屏幕大小了，导致滚动条蹦出来*/
	/*  transition: all 0.2s ease-out; 添加过渡效果 */

2. html (参数中的lay是货架参数，内包含da大区域，zhong中区域，ceng层，lie 列，的数量)，只看效果把id全干掉就好了，不影响生成效果，我的id只是为了渲染实时在库数进行颜色变更

	


  

	  

		 
  
		 

			 

		 
	  
	  

		  
 
			  

		  
		  

	  
	  

		  

			  

		  
		  
  
	  
	  

		  

			  

		  
		  
 

	  
	  

		  

	  
	  

		  

	  
	  *虚线为货架底部
	  
 内通道
	  
 外通道
	  
 内通道
	  
	  
 废物回收处
	  
 内通道
	  
 空箱放置处
	  
 内通道
	  
	  
 内通道

  

3. 效果