程序员经验分享-hwhale

用HTML和css写一个简单地购物小票

2023-05-16

效果图

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小票</title>
		<link rel="stylesheet" href="./css/xiaopiao.css" />
	</head>
	<body>
		<div style="width:1600;">
			<div class="biankuang">
				<div class="xiaopiaoziti1">MUJI</div>
				<div class="xiaopiaoziti2">无印良品</div>
				<div>欢迎光临天津米莱欧店</div>
				<div>单号：1-656454546541</div>
				<div>时间：2021年11月10日19:53:56</div>
				<hr />
				<div>
					54646546546546546
				</div>
				<div>携带型化妆水/敏感肌肤用/保湿型</div>
				<div>1*28*10折&nbsp;&nbsp;28</div>
				<div>
					11121654165565121
				</div>
				<div>宽幅围巾/蓝色</div>
				<div>1*148*10折&nbsp;&nbsp;148</div>
				<div>
					4455456488554845
				</div>
				<div>餐盘架/原色/大号</div>
				<div>1*189*10折&nbsp;&nbsp;189</div>
				<div>
					54646546546546546
				</div>
				<div>精仿棉双重纱织带领连衣裙</div>
				<div>1*328*10折&nbsp;&nbsp;328</div>
				<div></div>
				<hr />
				<div class="xiaopiaojuzhong">原价总额：665</div>
				<div class="xiaopiaojuzhong" class="xiaopiaojuzhong">促销价优惠：0</div>
				<div class="xiaopiaojuzhong">贵宾优惠：0</div>
				<hr />
				<div class="xiaopiaojuzhong">应收金额：665</div>
				<div class="xiaopiaojuzhong">实收金额：665</div>
				<div class="xiaopiaojuzhong">找零：0</div>
				<hr />
				<div class="xiaopiaojuzhong">内卡：665</div>
				<hr />
				<div>数量合计：4&nbsp;&nbsp;优惠金额：0</div>
				<div>备注：_________________</div>
				<div>谢谢惠顾</div>
				<div>商品价已收银票据为准，敬请仔细核对，离柜概不负责。</div>
				<div>地址：天津市和平区南京路209号</div>
				<div>电话：86-22-5655-1205</div>
			</div>


			<div class="biankuang">
				<div class="xiaopiaoziti1">MUJI</div>
				<div class="xiaopiaoziti2">无印良品</div>
				<div>欢迎光临天津米莱欧店</div>
				<div>单号：1-656454546541</div>
				<div>时间：2021年11月10日19:53:56</div>
				<hr />
				<div>
					54646546546546546
				</div>
				<div>携带型化妆水/敏感肌肤用/保湿型</div>
				<div>1*28*10折&nbsp;&nbsp;28</div>
				<div>
					11121654165565121
				</div>
				<div>宽幅围巾/蓝色</div>
				<div>1*148*10折&nbsp;&nbsp;148</div>
				<div>
					4455456488554845
				</div>
				<div>餐盘架/原色/大号</div>
				<div>1*189*10折&nbsp;&nbsp;189</div>
				<div>
					54646546546546546
				</div>
				<div>精仿棉双重纱织带领连衣裙</div>
				<div>1*328*10折&nbsp;&nbsp;328</div>
				<div></div>
				<hr />
				<div class="xiaopiaojuzhong">原价总额：665</div>
				<div class="xiaopiaojuzhong" class="xiaopiaojuzhong">促销价优惠：0</div>
				<div class="xiaopiaojuzhong">贵宾优惠：0</div>
				<hr />
				<div class="xiaopiaojuzhong">应收金额：665</div>
				<div class="xiaopiaojuzhong">实收金额：665</div>
				<div class="xiaopiaojuzhong">找零：0</div>
				<hr />
				<div class="xiaopiaojuzhong">内卡：665</div>
				<hr />
				<div>数量合计：4&nbsp;&nbsp;优惠金额：0</div>
				<div>备注：_________________</div>
				<div>谢谢惠顾</div>
				<div>商品价已收银票据为准，敬请仔细核对，离柜概不负责。</div>
				<div>地址：天津市和平区南京路209号</div>
				<div>电话：86-22-5655-1205</div>
			</div>
			<div class="biankuang">
				<div class="xiaopiaoziti1">MUJI</div>
				<div class="xiaopiaoziti2">无印良品</div>
				<div>欢迎光临天津米莱欧店</div>
				<div>单号：1-656454546541</div>
				<div>时间：2021年11月10日19:53:56</div>
				<hr />
				<div>
					54646546546546546
				</div>
				<div>携带型化妆水/敏感肌肤用/保湿型</div>
				<div>1*28*10折&nbsp;&nbsp;28</div>
				<div>
					11121654165565121
				</div>
				<div>宽幅围巾/蓝色</div>
				<div>1*148*10折&nbsp;&nbsp;148</div>
				<div>
					4455456488554845
				</div>
				<div>餐盘架/原色/大号</div>
				<div>1*189*10折&nbsp;&nbsp;189</div>
				<div>
					54646546546546546
				</div>
				<div>精仿棉双重纱织带领连衣裙</div>
				<div>1*328*10折&nbsp;&nbsp;328</div>
				<div></div>
				<hr />
				<div class="xiaopiaojuzhong">原价总额：665</div>
				<div class="xiaopiaojuzhong" class="xiaopiaojuzhong">促销价优惠：0</div>
				<div class="xiaopiaojuzhong">贵宾优惠：0</div>
				<hr />
				<div class="xiaopiaojuzhong">应收金额：665</div>
				<div class="xiaopiaojuzhong">实收金额：665</div>
				<div class="xiaopiaojuzhong">找零：0</div>
				<hr />
				<div class="xiaopiaojuzhong">内卡：665</div>
				<hr />
				<div>数量合计：4&nbsp;&nbsp;优惠金额：0</div>
				<div>备注：_________________</div>
				<div>谢谢惠顾</div>
				<div>商品价已收银票据为准，敬请仔细核对，离柜概不负责。</div>
				<div>地址：天津市和平区南京路209号</div>
				<div>电话：86-22-5655-1205</div>
			</div>
		</div>
	</body>
</html>

       CSS代码

.xiaopiaojuzhong{
	text-align: center;
}
.xiaopiaoziti1{
	font-size: 40px;
	text-align: center;
}
.xiaopiaoziti2{
	font-size: 30px;
	text-align: center;
}
div{
	padding-left: 20px;
	font-size: 15px;
}
.biankuang{
	width: 300px;
	border: 2px solid black;
	float: left;
}
.biankuang2{
	width: 300px;
	border: 2px solid black;
	float: right;
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

用HTML和css写一个简单地购物小票 的相关文章

  • Linux——运行基本容器

    1 安装容器管理 使用yum命令安装container tools模块 包括工具podman和skopeo yum module install container tools 2 选择容器镜像和注册表 xff08 1 xff09 容器注册

  • Linux——查找并管理容器镜像

    1 配置容器注册表 xff08 1 xff09 posman使用主机系统上的registries conf文件来获取有关它可以使用的容器注册表的信息 文件中 registries insecure 部分中列出了不安全的注册表 xff08 2

  • Linux——RHEL8的启动过程

    xff08 1 xff09 接通电源 xff0c 系统固件运行开机自检 xff0c 并初始化部分硬件 xff08 2 xff09 系统固件搜索可启动设备 xff08 3 xff09 系统固件从磁盘读取启动加载器 xff0c 将系统控制权交给

  • Ansible——介绍ansible

    1 什么是ansible xff1f ansible是一款开源自动化平台 xff0c 基于python开发 xff0c 可以多节点发布 远程任务执行的自动化引擎 xff0c 可以实现批量系统配置 批量程序部署 批量运行命令等 2 ansib

  • WSL2 Ubuntu Can‘t open display解决方法

    使用MobaXterm开启Ubuntu后 xff0c ncview打开文件时报错 xff1a MoTTY X11 proxy Unsupported authorisation protocol Error Can 39 t open di

  • Ansible——部署ansible

    1 ansible清单 清单 xff1a 定义ansible将要管理的一批主机 xff0c 可以通过在静态文本文件中定义或外部来源获取信息的脚本来动态确定 xff0c 因此 xff0c 分为静态主机清单 xff08 包括INI或YAML样式

  • nltk安装出错，nltk_data语料库下载

    首先 xff0c 安装nltk要有nltk库和nltk数据包 xff0c 下载方法网上也很全面 但本文是在在使用nltk中的语料库omw 1 4 主要用于词性还原 xff0c 无法找到对应文件 环境 xff1a pycharm 3 1 An

  • Ubuntu ver.22.04.2 root用户登录

    ps xff1a 因为站内的多种方法需要的文件 xff0c 我的白板机没有 xff0c 于是提供下自己的解决思路 补充 xff1a 一种可能的方法 xff1a 打开终端 xff0c 键入sudo i 回车 xff0c 并输入当前账户的密码

  • go语言中time包基础内容

    目录 一 介绍简单的几个时间UTC CST CDT 二 获取时间的函数 三 时间的加 减 等 四 判断两时间发生前后 五 周期性定时器 time Tick 时间间隔 六 时间也有格式化 七 时间字符串格式的解析 八 时区 xff08 tim

  • 一，HTML&CSS

    一个网页是由三部分组成 xff0c 分别是 xff1a 结构 xff1a 对应的是 HTML 语言表现 xff1a 对应的是 CSS 语言行为 xff1a 对应的是 JavaScript 语言 1 HTML 1 xff09 文件结构 xff

  • centos7学习笔记：开启虚拟机黑屏

    问题 xff1a centos7开机进入到登录界面黑屏 xff0c 无法登陆到图形化界面 因为我自己之前出现过一次这种情况 xff0c 上一次删除了 xff0c 但又出现这种问题了 xff0c 所以打算记录下来 xff0c 最后其实是做了个

  • windows修改cmd终端样式

    一下为我的终端样式 xff08 有点丑 xff09 修改这个其实很简单 首先 win 43 r 输入 regedit 在上面搜索 计算机 HKEY LOCAL MACHINE SOFTWARE Microsoft Command Proce

  • SpringCloud ---启动顺序

    1 启动Eureka服务模块 2 启动Eureka客户端被调用者模块 3 最后启动Eureka调用者模块

  • Zabbix6.0LTS安装流程

    安装环境选择 xff1a eSXI6 7 43 CentOS8 43 Zabbix6 0LTS 43 MySQL 43 Apache zabbix官方网站 xff1a 下载Zabbix 1 打开命令行控制台 xff08 ctrl 43 al

  • Java中Arrays类中的数组操作方法详解

    前言 我们讲到了一维数组和二维数组以及开发工具eclipse的配置 java util Arrays 类能方便地操作数组 xff0c 它提供的所有方法都是静态的 具有以下功能 xff1a 替换元素以及填充元素 xff1a 通过 fill 方

  • 【一行命令】查看Linux系统查看端口长连接数量

    netstat an grep 8080 wc l

  • JAVA中集合类概述

    目录 前言 一 集合类概述 二 Collection 1 List实现 2 set实现 三 Map 总结 前言 这篇文章是根据张席主编的 JAVA语言程序设计教程 提炼出来的一些JAVA中集合的知识 xff0c 还会加上我在编程过程中的遇到

  • 归并排序算法

    目录 何为归并排序 排序步骤 合并过程 全过程 归并排序实现代码 xff08 C语言描述 xff09 复杂度分析 归并排序的优缺点 何为归并排序 归并排序 merge sort 是建立在归并操作上的一种有效 xff0c 稳定的排序算法 xf

  • 生产者消费者设计模式

    生产者和消费者模式 是一个经典的多线程设计模式 xff0c 生产者和消费者在同一时间段内共用同一个存储空间 xff0c 生产者往存储空间中添加产品 xff0c 消费者从存储空间中取走产品 xff0c 当存储空间为空时 xff0c 消费者阻塞

  • MySQL/MariaDB 字段约束

    主键约束 primary key 唯一且不为空 主键约束 xff1a 如果为一个列添加了主键约束 xff0c 那么这个列就是主键 xff0c 主键的特点是唯一且不能为空 通常情况下 xff0c 每张表都会有主键 添加主键约束 xff0c 例

随机推荐

热门标签