css在页面画一个票据

CSS在页面中可以画出各种各样的图形，包括票据。下面将介绍如何使用CSS画一个票据。

.ticket {
    width: 400px;
     /* 票据宽度 */height: 200px;
     /* 票据高度 */background-color: #F5F5F5;
     /* 背景颜色 */border: 1px solid #000000;
     /* 边框 */border-radius: 10px;
     /* 圆角 */position: relative;
 /* 使得伪元素绝对定位相对于票据 */}
/* 左上角大标题 */.ticket h1 {
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    top: 20px;
    left: 30px;
}
/* 副标题 */.ticket h2 {
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: 70px;
    left: 30px;
}
/* 条形码 */.ticket::before {
    content: "";
    width: 130px;
    height: 70px;
    background-color: #000000;
    position: absolute;
    top: 60px;
    right: 30px;
    z-index: -1;
 /* 使得伪元素在背景下方 */}
/* 底部图案 */.ticket::after {
    content: "";
    width: 100px;
    height: 100px;
    background-color: #000000;
    position: absolute;
    bottom: 20px;
    right: 20px;
    border-radius: 50%;
    z-index: -1;
 /* 使得伪元素在背景下方 */}
    

以上是CSS代码，下面是HTML代码：

div class="ticket">
    h1>
    票据标题/h1>
    h2>
    票据副标题/h2>
    /div>
    

通过以上代码，我们可以画出一个简单但漂亮的票据。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！