居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(lightblue,skyblue);}定义容器尺寸：.wall{width:60em;高度：40em；边框：1em实心rgba（255、255、255、0.5）；边界半径：2em；font-size:10px;}使用网格布局，将容器分成两部分，左边80%为背景墙，右边20%为侧墙：.wall{display:grid;grid-template-columns:04fr1fr;}分别设置背景墙和侧面背景墙的颜色：.back{background:linear-gradient(toright,#555,#ddd);}.side{background:radial-gradient(at0%50%,/*tomato25%,yellow90%*/rgba(0,0,0,0.2)25%,rgba(0,0,0,0)90%),线性渐变(toright,#ddd,#ccc)}使用flexlayout设置对齐方式，listCentervertically:.back,.side{display:flex;对齐项目：居中；}.back{对齐内容：flex-end;}ul{列表样式类型：无；padding:0;}setheadingstyle:h1{position:relative;宽度：20em；保证金：1em；白颜色;font-family:sans-serif;}设置列表项的高度和颜色:.backul{width:75%;}.sideul{width:100%;}ulli{height:5em;背景颜色：var(--c);}ulli:nth-child(1){--c:tomato;}ulli:nth-child(2){--c:coral;}ulli:nth-child(3){--c:lightsalmon;}ulli:nth-child(4){--c:deepskyblue;}至此整体布局完成，接下来设置左侧背景的横条样式墙。横条的宽度与上限卖价成正比--high-price商品最贵的卖价--max-price为全长，其他横条的宽度为百分比上限售价与最高售价之和：ul{display:flex;flex-direction:column;}.backul{align-items:flex-end;}ul{--max-price:1449;}ulli.xs-max{--high-price:1449;}ulli.xs{--high-price:1349;}ulli.xr{--high-price:899;}ulli.x{--high-price:1149;}.backulli{width:calc(var(--high-price)/var(--max-price)*100%);}区分起始价的位置--low-price在横条中，高于价格区域用较深的颜色填充:ulli.xs-max{--low-price:1099;--c2:orangered;}ulli.xs{--low-price:999;--c2：番茄；}ulli。xr{--低价：749；--c2:珊瑚;}ulli.x{--low-price:999;--c2:dodgerblue;}.backulli{--percent:calc(var(--low-price)/var(--high-price)*100%);background:linear-gradient(toleft,var(--c)var(--percent),var(--c2)var(--percent));}在水平线的顶部画一个向左的三角形：。返回ulli{position:relative;}.backulli::before{content:'';位置：abso琵琶;宽度：0；高度：0；转换：translateX(-3em)；border-right:3emsolidvar(--c2);border-top:2.5em实心透明；border-bottom:2.5emsolidtransparent;}设置价格文本样式:.backullispan{position:absolute;宽度：95%；文本对齐：右；白颜色;字体大小：1.25em；行高：4em；font-family:sans-serif;}为每个单杠添加阴影，增强立体效果：ulli.xs-max{z-index:5;}ulli.xs{z-index:4;}ulli.xr{z-index:3;}ulli.x{z-index:2;}.??backulli{filter:drop-shadow(01em1emrgba(0,0,0,0.3));}至此，背景墙的横条已完成设置侧墙的样式。为了营造立体效果，需要设置侧墙的景深，使列表倾斜：.side{perspective:1000px;}.sideul{transform-origin:left;transform:rotateY(-75deg)scaleX(4);}设置侧墙文本样式：.wall{overflow:hidden;}.sideulli{padding-right:30%;文本对齐：右；白颜色;字体系列：无衬线；line-height:5em;}至此，静态视觉效果就完成了。最后添加入口动画效果：ulli{animation:show1slinearforwards;变换原点：对；变换：scaleX（0）；}@keyframes显示{到{变换：scaleX（1）；}}.backulli{animation-delay:1s;}大功告成！