<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{padding: 0;margin: 0;}
*,*:before,*:after {
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
.fn-clear:after{
content: " ";
display: table;
clear: both;
}
.fn-flex {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.fn-flex-item{
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
.fn-flex-space-between{
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content : space-between;
}
.fn-border-bottom{
border-bottom: 1px solid #000;
}
.fn-border-right{
border-right: 1px solid #000;
}
.fn-border-left{
border-left:1px solid #000;
}
.fn-text-ellipsis{
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.fn-align-left{
text-align: left;
}
.fn-size-32{
font-size: 32px;
font-weight: 700;
font-family: '微软雅黑';
}
.fn-p-l-3{
padding-left: 9px;
}
.fn-p-r-1{
padding-right: 3px;
}
.print-cont{
border:2px solid #000;
margin: 4px;
font-size: 12px;
font-family: '微软雅黑 Light';
}
.col-1-r-txt{
background-color: #000;
color: #fff;
font-size: 24px;
font-weight: 700;
padding: 4px 2px;
font-family: '微软雅黑';
}
.col-2{
padding: 0 12px;
font-weight: 700;
font-family: '微软雅黑';
}
.col-3 .col-3-tit1{
font-size: 16px;
font-weight: 700;
font-family: '微软雅黑';
}
.col-3 .col-3-tit2{
font-size: 24px;
font-weight: 700;
font-family: '微软雅黑';
}
.col-4-r{
font-size: 24px;
font-weight: 700;
font-family: '微软雅黑';
padding: 0 6px;
}
.col-4-l{
font-size: 14px;
font-weight: 700;
font-family: '微软雅黑';
}
.col-5{
font-size: 14px;
font-weight: 700;
font-family: '微软雅黑';
text-align: center;
}
.col-6{
font-size: 14px;
}
.col-6-l,.col-6-m{
width: 56px;
}
.col-7{
font-size: 24px;
font-weight: 700;
font-family: '微软雅黑';
}
.col-8{
font-size: 14px;
line-height: 16px;
}
.col-8-1,.col-8-2,.col-8-3{
padding-right: 8px;
}
.col-8-4{
text-align: left;
max-height: 33px;
overflow: hidden;
}
.col-9{
padding: 0 15px;
font-weight: 700;
}
.col-10-l{
padding: 0 6px;
text-align: center;
}
.col-10-r{
position: relative;
padding-bottom: 24px;
font-size: 15px;
}
.col-10-r .r-txt{
position: absolute;
right: 6px;
bottom: 6px;
font-size: 14px;
font-weight: 700;
font-family: '微软雅黑';
}
.col-11 .num{
font-size: 18px;
font-weight: 700;
font-family: '微软雅黑';
}
.col-12{
font-size: 14px;
}
</style>
</head>
<body>
<div class="print-cont">
<div class="col-1 fn-flex-space-between">
<div class="fn-flex-item fn-align-left fn-p-l-3">
<img width="76" src="logo.png" alt="">
<p>950616 www.jdl.cn</p>
<p>2020-09-21 16:47:23</p>
</div>
<div class="fn-size-32">航</div>
<div class="col-1-r fn-p-l-3 fn-p-r-1"><span class="col-1-r-txt">特快送</span></div>
</div>
<div class="col-2 fn-border-bottom">
<img width="100%" src="code-1.jpg" alt="">
<div class="col-2-txt fn-flex-space-between">
<div>JDVA03704952830-1-1-</div>
<div>重 1.0kg</div>
</div>
</div>
<div class="col-3 fn-flex-space-between fn-border-bottom">
<div class="fn-flex-item fn-border-right">
<p class="col-3-tit1">北京通州</p>
<p class="col-3-tit2">944-D50-航</p>
</div>
<div class="fn-flex-item">
<p class="col-3-tit1">重庆</p>
<p class="col-3-tit2">RR-R35</p>
</div>
</div>
<div class="col-4 fn-flex-space-between fn-border-bottom">
<div class="col-4-l fn-flex-item fn-border-right">
<div class="col-4-l-row1 fn-flex-space-between fn-border-bottom">
<div class="fn-flex-item"></div>
<div class="col-4-l-row1-txt fn-align-left fn-border-left fn-flex-item">G重庆南岸营业部</div>
</div>
<div class="col-4-l-row2 fn-flex-space-between">
<div>COD 签单</div>
<div>众</div>
</div>
</div>
<div class="col-4-r">6</div>
</div>
<div class="col-5 fn-border-bottom">
代收金额：￥113.0 应收合计：￥113.0
</div>
<div class="col-6 fn-flex fn-border-bottom">
<div class="col-6-l">收</div>
<div class="col-6-m">张三</div>
<div class="col-6-r fn-flex-item">13696884688</div>
</div>
<div class="col-7 fn-text-ellipsis fn-border-bottom">
重庆南岸区内环以内学府大道66号院学府大道66号院学府大道66号院
</div>
<div class="col-8 fn-flex-space-between fn-border-bottom">
<div class="col-8-1">寄</div>
<div class="col-8-2">李四</div>
<div class="col-8-3">18618128899</div>
<div class="col-8-4 fn-flex-item">北京大兴区亦庄经济开发区 京东总部4号楼京东</div>
</div>
<div class="col-9 fn-border-bottom">
<img width="174" src="code-2.jpg" alt="">
<p>JDVA03704952830</p>
</div>
<div class="col-10 fn-flex fn-border-bottom">
<div class="col-10-l fn-border-right">
<img width="45" src="qr-code.jpg" alt="">
<p>扫码寄快递</p>
</div>
<div class="col-10-r fn-flex-item">
托寄物：测试订单
<span class="r-txt">已验视</span>
</div>
</div>
<div class="col-11 fn-border-bottom">
订单号：<strong class="num">JDVA03704952830</strong>
顺丰、京东、中通、圆通快递面单模板HTML+CSS
2星 需积分: 46 159 浏览量
2020-10-26
14:22:54
上传
评论 3
收藏 23KB RAR 举报 
html-css电子面单.rar （5个子文件） 
20201026.html 8KB
code-2.jpg 5KB
logo.png 5KB code-1.jpg 8KB qr-code.jpg 4KB资源评论
夏已微凉、2020-11-27给4星吧，页面丑了点
复归素净2022-03-24模板没有，顺丰、京东、中通、圆通快递面单模板HTML+CSS，坑B，骗积分的
qqxfeng2022-11-25模板没有，顺丰、京东、中通、圆通快递面单模板HTML+CSS，坑B，骗积分的 #毫无价值
javaaaaaaaa2021-08-19居然只是中通快递的！！
