圆通快递单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样式相关推荐

Python实现圆通快递单号查询官方接口教程
此系列为代码语言与各大常用快递公司的接口教程,供各位程序员学习参考,后续我将会继续分享各语言的快递单号查询接口教程,敬请关注. 下面我们来说下具体操作过程,如何用Python实现圆通快递单号查询. 一 ...
基于java的圆通快递单号自动识别api接口代码实例
一.产品介绍快递单号识别,输入运单号自动识别物流公司,实时返回对应物流公司编码.查询单号时,返回的结果可能存在一个或多个物流公司编码,快递鸟大数据平台通过智能分析,实时更新单号库,保障物流公司编码准 ...
教你快速分析大量圆通快递单号中揽收后没有物流的
在网购后,商家会用快递将物品寄出,一般需要几天,有的时候会更久,当商家需要查询大量的单号时如何快速查询呢?这里为大家分享这款查询软件--快递批量查询高手,下面就以查询圆通快递单号,并分析出揽收后没有物 ...
教你快速查询大量圆通快递单号的物流信息
圆通快递单号的物流信息可以在电脑上批量查询,并分析是否签收吗?小编的回答当然是可以的,下面随小编一起用快递批量查询高手来操作. 所需工具安装一个快递批量查询高手(注册介绍人填:与我) 多个圆通快递的 ...
快速免费对接快递鸟圆通快递单号查询api接口
快递查询API接口是使用的物流单号即可实现查询物流信息.主要应用在电商商城.ERP系统商.WMS系统商.快递柜.银行等企业.多家快递物流公司接口统一接入,建议对接接口提供商,一次性可以接入多家快递,在 ...
多个圆通快递单号的物流信息如何在电脑上批量查询？
如何在电脑上批量查询多个圆通快递的物流信息呢?今天小编个大家带来一款查询软件--快递批量查询高手,接下来就用它教大家操作叭. 教程之前,我们先来看一下用快递批量查询高手批量查询圆通快递物流的情况一行 ...
前端JavaScript DOM BOM 自学复盘 D1（DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数）
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
圆通快递单号免费查询接口，附带开发源码
在项目要发布生产环境时,调用正式的API,快递鸟会检查我们是否有实名认证,如果没有实名认证,是无法调用接口的. 腾讯视频教程:https://v.qq.com/x/page/g3068jcoras.h ...
教你同时分析圆通快递多个单号的物流情况
怎样在电脑上批量查询多个圆通快递单号的物流信息呢?今天小编给大家分享一款采集软件--快递批量查询高手,下面一起来试试. 快递软件下载地址:http://kd.d1kf.com/ 保存单号将需要查询的 ...
css实现小气泡样式和模拟京东快递单号放大效果
css实现小气泡样式:border-color: #fff transparent transparent; transparent表示透明,第一个代表上三角,第二个代表左右三角,第三个代表下三角 & ...

圆通快递单css样式

圆通快递单css样式相关推荐

最新文章

热门文章