自定义落地页class样式表

 /* page */
 html {
     width: 100%;
 }

 body {
     margin: 0 auto;
     box-sizing: border-box;
 }

 /* 手机 */
 @media (max-width: 600px) {
     body {
         width: 100%;
     }
 }

 /* 平板 */
 @media (min-width: 601px) and (max-width: 900px) {
     body {
         width: 40%;
     }
 }

 /* 显示器 */
 @media (min-width: 901px) {
     body {
         width: 30%;
     }
 }

 /* text */
 /* 缩进 */
 .ti-s {
     text-indent: 1em;
 }

 .ti-m {
     text-indent: 2em;
 }

 .ti-l {
     text-indent: 3em;
 }

 .ti-xl {
     text-indent: 4em;
 }

 .ti-xxl {
     text-indent: 5em;
 }

 .ta-center {
     text-align: center;
 }

 .ta-left {
     text-align: left;
 }

 .ta-right {
     text-align: right;
 }

 .ls-s {
     letter-spacing: 1px;
 }

 .ls-m {
     letter-spacing: 2px;
 }

 .ls-l {
     letter-spacing: 3px;
 }

 .ls-xl {
     letter-spacing: 4px;
 }

 .ls-xxl {
     letter-spacing: 5px;
 }

 .ft-s {
     font-size: 12px;
 }

 .ft-m {
     font-size: 16px;
 }

 .ft-l {
     font-size: 20px;
 }

 .ft-xl {
     font-size: 24px;
 }

 .ft-xxl {
     font-size: 28px;
 }

 .fw-b {
     font-weight: bold;
 }

 /* color */
 .c-red {
     color: red;
 }

 .c-green {
     color: green;
 }

 .c-gray1 {
     color: rgb(221, 220, 220);
 }

 .c-gray2 {
     color: rgb(175, 175, 175);
 }

 .c-gray {
     color: gray;
 }

 .c-gray4 {
     color: rgb(102, 102, 102);
 }

 .c-gray5 {
     color: rgb(61, 61, 61);
 }

 /* margin */
 .m-h-auto {
     margin: 0px auto;
 }

 .m-v-auto {
     margin: auto 0;
 }

 .m-s {
     margin: 5px;
 }

 .m-m {
     margin: 10px;
 }

 .m-l {
     margin: 20px;
 }

 .m-xl {
     margin: 30px;
 }

 .m-xxl {
     margin: 50px;
 }

 .m-t-s {
     margin-top: 5px;
 }

 .m-t-m {
     margin-top: 10px;
 }

 .m-t-l {
     margin-top: 20px;
 }

 .m-t-xl {
     margin-top: 30px;
 }

 .m-t-xxl {
     margin-top: 50px;
 }

 .m-b-s {
     margin-bottom: 5px;
 }

 .m-b-m {
     margin-bottom: 10px;
 }

 .m-b-l {
     margin-bottom: 20px;
 }

 .m-b-xl {
     margin-bottom: 30px;
 }

 .m-b-xxl {
     margin-bottom: 50px;
 }

 /* padding */
 .p-h-auto {
     padding: 0px auto;
 }

 .p-v-auto {
     padding: auto 0;
 }

 .p-s {
     padding: 5px;
 }

 .p-m {
     padding: 10px;
 }

 .p-l {
     padding: 20px;
 }

 .p-xl {
     padding: 30px;
 }

 .p-xxl {
     padding: 50px;
 }

 .p-t-s {
     padding-top: 5px;
 }

 .p-t-m {
     padding-top: 10px;
 }

 .p-t-l {
     padding-top: 20px;
 }

 .p-t-xl {
     padding-top: 30px;
 }

 .p-t-xxl {
     padding: 50px;
 }

 .p-b-s {
     padding-bottom: 5px;
 }

 .p-b-m {
     padding-bottom: 10px;
 }

 .p-b-l {
     padding-bottom: 20px;
 }

 .p-b-xl {
     padding-bottom: 30px;
 }

 .p-b-xxl {
     padding-bottom: 50px;
 }

 /* border */
 .b-d-gray-s {
     border: 0.5px dashed gray;
 }

 .b-d-gray-m {
     border: 1px dashed gray;
 }

 .b-d-gray-l {
     border: 2px dashed gray;
 }

 .b-d-green-s {
     border: 0.5px dashed green;
 }

 .b-d-green-m {
     border: 1px dashed green;
 }

 .b-d-green-l {
     border: 2px dashed green;
 }

 .br-s {
     border-radius: 10px;
 }

 .br-m {
     border-radius: 20px;
 }

 .br-l {
     border-radius: 30px;
 }

 .br-xl {
     border-radius: 40px;
 }

 .br-xxl {
     border-radius: 50px;
 }

 /* avatar */
 .avatar-s {
     width: 30px;
     height: 30px;
 }

 .avatar-m {
     width: 40px;
     height: 40px;
 }

 .avatar-l {
     width: 50px;
     height: 50px;
 }

 .avatar-xl {
     width: 60px;
     height: 60px;
 }

 .avatar-xxl {
     width: 70px;
     height: 70px;
 }

 /* size */
 .w-100 {
     width: 100%;
 }

 /* 底部固定悬浮元素 */
 .fixed-buttom {
     position: fixed;
     left: 50%;
     /* 向左移动自身宽度的50%，实现水平居中 */
     transform: translateX(-50%);
     text-align: center;
     cursor: pointer;
 }

 /* 右边固定悬浮元素 */
 .fixed-right {
     position: fixed;
     bottom: 60px;
     right: 20px;
     text-align: center;
     cursor: pointer;
 }