css3商品购物清单样式

新建html文档。

书写css代码。body { display: -we  bkit-box; display: -ms-flexbox; display: flex; -we  bkit-box-align: center; -ms-flex-align: center; align-items: center; -we  bkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100vh; color: #525252; font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif; font-weight: 300; line-height: 1.25; background: -we  bkit-linear-gradient(top, #00b09b, #96c93d); background: linear-gradient(to bottom, #00b09b, #96c93d); }a { color: #5c7b25; -we  bkit-text-decoration-skip: ink; text-decoration-skip: ink; }.receipt { position: relative; -we  bkit-box-flex: 0; -ms-flex: none; flex: none; padding: 10px 0 20px; background: #fff; -we  bkit-clip-path: polygon(100% 0, 100% calc(100% - 6px), 98% 100%, 96% calc(100% - 6px), 94% 100%, 92% calc(100% - 6px), 90% 100%, 88% calc(100% - 6px), 86% 100%, 84% calc(100% - 6px), 82% 100%, 80% calc(100% - 6px), 78% 100%, 76% calc(100% - 6px), 74% 100%, 72% calc(100% - 6px), 70% 100%, 68% calc(100% - 6px), 66% 100%, 64% calc(100% - 6px), 62% 100%, 60% calc(100% - 6px), 58% 100%, 56% calc(100% - 6px), 54% 100%, 52% calc(100% - 6px), 50% 100%, 48% calc(100% - 6px), 46% 100%, 44% calc(100% - 6px), 42% 100%, 40% calc(100% - 6px), 38% 100%, 36% calc(100% - 6px), 34% 100%, 32% calc(100% - 6px), 30% 100%, 28% calc(100% - 6px), 26% 100%, 24% calc(100% - 6px), 22% 100%, 20% calc(100% - 6px), 18% 100%, 16% calc(100% - 6px), 14% 100%, 12% calc(100% - 6px), 10% 100%, 8% calc(100% - 6px), 6% 100%, 4% calc(100% - 6px), 2% 100%, 0 calc(100% - 6px), 0 0); clip-path: polygon(100% 0, 100% calc(100% - 6px), 98% 100%, 96% calc(100% - 6px), 94% 100%, 92% calc(100% - 6px), 90% 100%, 88% calc(100% - 6px), 86% 100%, 84% calc(100% - 6px), 82% 100%, 80% calc(100% - 6px), 78% 100%, 76% calc(100% - 6px), 74% 100%, 72% calc(100% - 6px), 70% 100%, 68% calc(100% - 6px), 66% 100%, 64% calc(100% - 6px), 62% 100%, 60% calc(100% - 6px), 58% 100%, 56% calc(100% - 6px), 54% 100%, 52% calc(100% - 6px), 50% 100%, 48% calc(100% - 6px), 46% 100%, 44% calc(100% - 6px), 42% 100%, 40% calc(100% - 6px), 38% 100%, 36% calc(100% - 6px), 34% 100%, 32% calc(100% - 6px), 30% 100%, 28% calc(100% - 6px), 26% 100%, 24% calc(100% - 6px), 22% 100%, 20% calc(100% - 6px), 18% 100%, 16% calc(100% - 6px), 14% 100%, 12% calc(100% - 6px), 10% 100%, 8% calc(100% - 6px), 6% 100%, 4% calc(100% - 6px), 2% 100%, 0 calc(100% - 6px), 0 0); }

书写css代码。.receipt__title { margin-bottom: 15px; padding: 0 30px; font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif; font-weight: 500; font-size: 40px; color: #00b09b; }.receipt__subtitle { padding: 0 30px; font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif; font-weight: 300; font-size: 18px; }.receipt__lines { padding: 30px; border-top: 1px dashed #dce2d6; }.receipt__line { display: -we  bkit-box; display: -ms-flexbox; display: flex; margin: 20px 0; -we  bkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif; font-size: 18px; }.receipt__line__item { font-weight: 300; }.receipt__line__price { font-weight: 400; }.receipt__total { display: -we  bkit-box; display: -ms-flexbox; display: flex; margin: 10px 0; padding: 20px; -we  bkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif; font-size: 24px; background-color: #eff7e8; }.receipt__total__item, .receipt__total__price { font-weight: 400; }.receipt__back { text-align: center; }

代码整体结构。

查看效果。