圓通快遞單css樣式

幫朋友寫的，比較粗糙
html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/base.css">
    <style>
    </style>
</head>

<body>
<div class="yt_content">
    <div class="yt_line_1 border_bottom">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565258230609&di=4e795d2225623e4cf2ef494eb6973158&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F17%2F11%2F19%2F2fccf8368e941dd54ca97a00b04857e8.jpg"/>
    </div>
    <div class="yt_line_2 border_bottom">
        8208855555
    </div>
    <div class="yt_line_3 border_bottom">
        <span>區域件</span>
        <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3514698908,4163680457&fm=26&gp=0.jpg"/>
    </div>
    <div class="yt_line_4 border_bottom">
        <div class="revive_img">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565258230609&di=4e795d2225623e4cf2ef494eb6973158&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F17%2F11%2F19%2F2fccf8368e941dd54ca97a00b04857e8.jpg"/>
        </div>
       <div class="receive_text">
            <p>收件人名稱 電話</p>
            <p>收件人地址</p>
        </div>
    </div>

    <div class="yt_line_5 border_bottom">
        <div class="send_img">
            寄
        </div>
        <div class="send_text">
            <p>收件人名稱 電話</p>
            <p>收件人地址</p>
        </div>
    </div>


    <div class="yt_line_6 border_bottom">
        <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3514698908,4163680457&fm=26&gp=0.jpg"/>
    </div>

    <div class="yt_line_7 border_bottom">
        <div class="line_7_1">
            <p>2018-88-11</p>
            <p>16:23:22</p>
            <p>打印時間</p>
            <p>數量：1</p>
        </div>
        <div class="line_7_2">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565260730361&di=1d897a958cebae49cf1e5259c1fbcd8b&imgtype=0&src=http%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_png%2FdJmtFMpWFFWia88slDGNJ5AJtyowkSiaXL1Adt4Bzmj0icDNArib0OGlCKc7DPn0ibzJicESzAAKuBzEW1VrRAkvpSBQ%2F640%3Fwx_fmt%3Dpng"/>
        </div>
        <div class="line_7_3">
            <p>快遞描述收件人地址快遞描述收件人地址快遞描述收件人地址快遞描述收件人地址快遞描述收件人地址快遞描述收件人地址</p>
            <p>簽收欄</p>
        </div>
    </div>

    <div class="yt_line_8 border_bottom">
        <div class="line_8_img">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565258230609&di=4e795d2225623e4cf2ef494eb6973158&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F17%2F11%2F19%2F2fccf8368e941dd54ca97a00b04857e8.jpg"/>
        </div>
        <div class="line_8_img2">
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3514698908,4163680457&fm=26&gp=0.jpg"/>
        </div>
    </div>

    <div class="yt_line_9 border_bottom">
        <div class="line_9_1">
            <div class="line_9_receive">
                <div class="line_9_revive_img">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565258230609&di=4e795d2225623e4cf2ef494eb6973158&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F17%2F11%2F19%2F2fccf8368e941dd54ca97a00b04857e8.jpg"/>
                </div>
                <div class="receive_text">
                    <p>收件人名稱 電話</p>
                    <p>收件人地址</p>
                </div>
            </div>

            <div class="line_9_receive">
                <div class="line_9_revive_img">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565258230609&di=4e795d2225623e4cf2ef494eb6973158&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F17%2F11%2F19%2F2fccf8368e941dd54ca97a00b04857e8.jpg"/>
                </div>
                <div class="receive_text">
                    <p>收件人名稱 電話</p>
                    <p>收件人地址</p>
                </div>
            </div>

        </div>
        <div class="line_9_2"></div>
    </div>
    <div class="yt_line_10 border_bottom">
        <p>文件</p>
        <p>已驗視</p>
    </div>
    <div class="yt_line_11">
        <p>訂單號</p>
        <div>
            <p>4046</p>
            <p>--手機尾號--</p>
        </div>
    </div>
</div>
</body>
</html>

css:

*{
    padding:0;
    margin:0;
}

.yt_content{
    width:100mm;
    border:1px solid #000;
    background: #fff;
}

.yt_line_1{
    height:14mm;
}

.yt_line_1 img{
    width:26mm;
    height:10mm;
}

.yt_line_2{
    height:15mm;
    font-size:36pt;
    font-weight: bold;
    text-align: center;
    line-height: 15mm;
}

.yt_line_3{
    height:10mm;
}

.yt_line_3 span{
    padding-left:9mm;
    font-size:16pt;
}

.yt_line_3 img{
    width:54mm;
    height:8mm;
}

.border_bottom{
    border-bottom:0.1mm solid #000;
}

.yt_line_3 img{
    float: right;
    margin-right:9mm;
}

.yt_line_4{
    height:15mm;
}

.revive_img img{
    width:8mm;

}

.revive_img{
    width:9mm;
    text-align: center;
    float: left;
    line-height: 15mm;
}

.yt_line_4 .receive_text{
    width:91mm;
    float: left;
}
.yt_line_4 .receive_text p{
    font-size:10pt;
    font-weight: bold;
}


.yt_line_5{
    height:12mm;
}


.send_img{
    width:9mm;
    text-align: center;
    float: left;
    line-height: 12mm;
}

.yt_line_5 .send_text{
    width:91mm;
    float: left;
}
.yt_line_5 .send_text p{
    font-size:8pt;
    font-weight: bold;
}

.yt_line_6{
    height:23mm;
    text-align: center;
}

.yt_line_6 img{
    width:94mm;
    height:15mm;
    margin-top:4mm;
}

.yt_line_7{
    height:27mm;
}

.line_7_1{
    width:20mm;
    float:left;
}
.line_7_2{
    float:left;
    height:27mm;
    width:27mm;
    border-left:0.1mm solid #000;
    border-right:0.1mm solid #000;
}
.line_7_2 img{
    height:27mm;
    width:27mm;
    border-left:0.1mm solid #000;
    border-right:0.1mm solid #000;
}


.line_7_1 p:nth-child(1){
    font-size:8pt;
}

.line_7_1 p:nth-child(2){
    font-size:11pt;
}

.line_7_1 p:nth-child(3){
    font-size:14pt;
}

.line_7_1 p:nth-child(4){
    font-size:7pt;
}

.line_7_3{
    float: left;
    width:50mm;
    position: relative;
    height:27mm;
}
.line_7_3 p:nth-child(1){
    font-size:6pt;
}

.line_7_3 p:nth-child(2){
    font-size:7pt;
    position: absolute;
    right:0;
    bottom:0;
}
.yt_line_8{
    height:10mm;
}
.line_8_img{
    width:30mm;
    height:10mm;
    float: left;
}

.line_8_img img{
    width:24mm;
    height:8mm;
    margin-left:3mm;
    margin-top:1mm;
}

.line_8_img2{
    width:70mm;
    height:10mm;
    float: left;
}


.line_8_img2 img{
    width:60mm;
    height:8mm;
    margin-left:5mm;
    margin-top:1mm;
}

.yt_line_9{
    height:20mm;
}

.line_9_receive{
    width:84mm;
    height:10mm;
}
.line_9_1{
    width:84mm;
    float: left;
}
.line_9_2{
    width:15mm;
    float: left;
    border-left:0.1mm solid #000;
    height:20mm;
}

.line_9_revive_img img{
    width:8mm;
}

.line_9_revive_img{
    width:9mm;
    text-align: center;
    float: left;
    line-height: 10mm;
}


.line_9_receive .receive_text{
    width:75mm;
    float: left;
}
.line_9_receive .receive_text p{
    font-size:7pt;
    font-weight: bold;
}

.yt_line_10{
    height:30mm;
    position: relative;
}

.yt_line_10 p:nth-child(1){
    font-size:7pt;
    font-weight: bold;
    position: absolute;;
    left:0;
    top:0;
}

.yt_line_10 p:nth-child(2){
    font-size:7pt;
    font-weight: bold;
    position: absolute;;
    right:0;
    bottom:0;
}
.yt_line_11{
    height:15mm;
    position: relative;
}

.yt_line_11 p:nth-child(1){
    font-size:7pt;
    font-weight: bold;
}

.yt_line_11 div{
    position: absolute;
    right:0;
    top:0;
    text-align: center;
}

.yt_line_11 div p:nth-child(1){
    font-size:14pt;
    font-weight:bolder
}

.yt_line_11 div p:nth-child(2){
    font-size:6pt;
}

圓通快遞單css樣式

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

使用perf工具生成火焰圖

HttpSecurity 是如何組裝過濾器鏈的

數說海南——近6年海南各市縣人口簡單看

長序列中Transformers的高級注意力機制總結

WebStorm 創建 Vue 項目

大齡程序員思考

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

ant-vue Table組件selectedRows翻頁後不保留上一頁已選

ant-design 打印功能/打印單據

微信小程序 template帶參帶方法，如點擊事件 data裏數據

h5接入微信支付，支付成功回調失敗

微信小程序打開pdf/word/excel等失敗

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結