用HTML和css写一个简单地购物小票
2024-05-08 02:13:49
效果图
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折 28</div><div>11121654165565121</div><div>宽幅围巾/蓝色</div><div>1*148*10折 148</div><div>4455456488554845</div><div>餐盘架/原色/大号</div><div>1*189*10折 189</div><div>54646546546546546</div><div>精仿棉双重纱织带领连衣裙</div><div>1*328*10折 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 优惠金额：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折 28</div><div>11121654165565121</div><div>宽幅围巾/蓝色</div><div>1*148*10折 148</div><div>4455456488554845</div><div>餐盘架/原色/大号</div><div>1*189*10折 189</div><div>54646546546546546</div><div>精仿棉双重纱织带领连衣裙</div><div>1*328*10折 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 优惠金额：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折 28</div><div>11121654165565121</div><div>宽幅围巾/蓝色</div><div>1*148*10折 148</div><div>4455456488554845</div><div>餐盘架/原色/大号</div><div>1*189*10折 189</div><div>54646546546546546</div><div>精仿棉双重纱织带领连衣裙</div><div>1*328*10折 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 优惠金额：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;
}用HTML和css写一个简单地购物小票相关推荐
- 基于JavaScript+css写一个简单的h5动态下雨效果
基于JavaScript+css写一个简单的h5动态下雨效果 文章目录 什么是前端 展示效果 JavaScript是什么? 步骤 1.html 2.css 3.js 什么是前端 前端它是一个工作,它的 ...
- 用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
- android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
- HTML+CSS写一个简单的网页界面
学习了HTML和CSS入门的基本命令后,写出来一个简单的登录网页界面,可以跳转.登录. 主界面代码(log.html) <!DOCTYPE html> <html><he ...
- 纯HTML、CSS写一个简单的水滴特效，水滴里面可加图标
CSS写水滴特效,里面可加图标 代码如下(示例): HTML部分 <!DOCTYPE html> <html lang="en"> <head> ...
- 构建自己的购物搜索引擎一：写一个简单的
记得2010年10月9号,淘宝全网搜索引擎一淘网上线,当时不怎么关注,只是在网站上看到过新闻而己,前两个月,觉得是时候走确定自己以后要走的方向了,于是决定以后加入到搜索的行列中,此时开始关注一淘网的技 ...
- python123程序设计题说句心里话_用c++写一个简单的计算器程序
// 050305.cpp : 定义控制台应用程序的入口点. // // 050304.cpp : 定义控制台应用程序的入口点. // //四则运算 #include "stdafx.h&q ...
- 写一个简单的登录页面!!!(html)
写一个简单的登录页面!!! 大家好,我是伍柒. 今天我又双叒叕发现了一个好东西. 那就是用html做一个登录页面 那,该如何做呢? 首先 现在html里的body里写 一个头部header标签(双标签 ...
- JS写一个简单的五星评价
JS写一个简单的五星评价 在做前端网页页面的时候很多时候回有遇到星级评价的模块,用到的地方挺多所以自己就上传下方便大家和自己使用(不支持半星评价因为没有半星的图). 效果图如下: 下面是我们的代码: ...
最新文章
- 使用ffmpeg推流到Wowza
- SharePoint【Query Options系列】-- Query Options的一些用法 01. 展开用户列信息
- Django中六个常用的自定义装饰器
- atan java_Java atan() 方法
- LeetCode 742. 二叉树最近的叶节点（建立父节点信息+BFS）
- 手写table用ajax遍历,原生js把数据循遍历到前端table
- 作为一个互联网人，这部电影你不得不看
- Linux内核 触摸板,Linux下关闭触摸板和触摸杆
- 报名 | 上道沙龙：科技如何赋能传统金融？
- Http和RPC区别
- Spring中ClassPathXmlApplication与FileSystemXmlApplicationContext的区别
- 卡巴世界,卡巴斯基,卡巴斯基key,卡巴斯基激活码,软件下载,每天更新
- 【Eclipse】Eclipse使用技巧
- java clh_CLH锁学习
- python采集最新世界大学排名, 来看看你的母校上榜没~
- 使用ZED相机录制事件双目数据集
- 来自一个工作一年零九个月java程序员的自我介绍
- handle与多线程
- power_supply子系统
- 期末小结（一）. 专业技术