当前位置： 首页 > news >正文

【html】用html+css实现银行的账户信息表格

news 2025/7/6 13:26:06

我们先来看一看某银行的账户信息表格

我们自己也可以实现类似的效果

效果图:

  大家可以看到，其实效果差不多

接下来看看我们实现的代码

源码：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>模拟银行</title><style>* {margin: 0;padding: 0;color: #3f3f3f;}.container {padding-left: 10px !important;padding-right: 10px !important;}table {border: 1px solid #dedede;display: table;box-sizing: border-box;text-indent: initial;border-spacing: 2px;border-collapse: collapse;width: 898px;height: 80px;}tr {height: 40px;width: 10%;border: none;background: #dddddd;font-size: 14px;color: #3f3f3f;font-weight: normal;text-align: center;}th{		padding-right: 36px;width: 9%;height: 40px;border: none;}tbody td{background-color: #fff;}tbody  td{font: 14px/1.5 '微软雅黑',Arial,Helvetica,Tahoma,sans-serif;border-collapse: collapse;border-spacing: 0;padding: 0;font-size: 14px;color: #3f3f3f;text-align: center;height: 40px;border: none;	}tbody .tar{text-align: right !important;}.table_th_money {padding-right: 36px;width: 9%;}.font_money {font-family: Arial;font-weight: bold;color: #d62f2f;}a{text-decoration: none;}a:link,a:visited{color: blue;}</style></head><body><div class="container"><table class="one_lines_table" width="100%"><thead><tr><th>开户日期</th><th>类型</th><th>币种</th><th class="tar table_th_money">账户余额</th><th class="tar table_th_money">可用余额</th><th>操作</th></tr></thead><tbody><tr><td><script>formatDate('20230925')</script>2023-09-25</td><td> 活期储蓄 </td><td>人民币</td><td class="tar"> <span class="font_money table_th_money"><script>formatAmt('629.28')</script>629.28</span> </td><td class="tar"> <span class="font_money table_th_money"><script>formatAmt('629.28')</script>629.28</span> </td><td> <a href="#" class="detail pr_5">明细</a></td></tr></tbody></table></div></body>
</html>

建议和优化：

  1. 表格宽度: 你设置了table的width为898px，但这可能不是最灵活的解决方案，特别是当考虑到不同屏幕尺寸的响应式设计时。一个更好的做法可能是使用百分比或max-width来限制表格的最大宽度，同时允许它在较小的屏幕上缩小。

  2. 行和列的宽度: 你为每个<tr>元素设置了width: 10%;，但实际上<tr>元素不控制列的宽度，而是<th>和<td>元素控制列的宽度。对于<tr>元素，你其实只需要设置height。

  3. 使用border-collapse: 你已经设置了border-collapse: collapse;在table元素上，这是正确的，因为它会合并相邻的单元格边框。

  4. 内边距和外边距: .container中的padding-left和padding-right被设置为10px，这是可以的，但请确保这符合你的整体布局和设计需求。

  5. 字体设置: 你已经在tbody td中设置了字体相关的样式，但.font_money类也定义了字体样式。确保这些样式不会相互冲突，并且你确实需要这些额外的类。

  6. JavaScript函数: 你需要确保formatDate和formatAmt这两个JavaScript函数已经在页面的某个地方被正确定义。例如，你可能需要在<script>标签内或在外部JavaScript文件中定义它们。

  7. 表格标题的对齐: 你已经使用.tar类来将某些列的文本对齐到右侧，这是通过text-align: right;实现的。这是正确的做法。

  8. 响应式设计: 考虑添加媒体查询（Media Queries）来优化不同屏幕尺寸下的表格布局。例如，在小屏幕上，你可能希望表格的列堆叠起来而不是水平排列。

  9. 代码组织: 为了提高代码的可读性和可维护性，建议将CSS规则分组到更具体的类或ID下，而不是使用通配符*。此外，考虑将CSS代码移到单独的.css文件中，并链接到HTML文件。

  10. 语义化HTML: 你的HTML结构看起来是合理的，但请确保你使用的是语义化的HTML元素。例如，<thead>, <tbody>, <th>, 和 <td> 是正确的表格元素。

相关文章：

【html】用html+css实现银行的账户信息表格

我们先来看一看某银行的账户信息表格 我们自己也可以实现类似的效果 效果图: 大家可以看到&#xff0c;其实效果差不多 接下来看看我们实现的代码 源码&#xff1a; <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"&…...

编程日记 2024/6/23 8:08:27

两种单例模式（保证线程安全）

开始前&#xff0c;球球各位读者给个三连吧&#xff0c;有错误感谢指出&#xff0c;谢谢 单例模式也叫单个实例&#xff0c;也就是这个类只有且只能有一个实例对象&#xff0c;这样一个类就叫做“单例”&#xff1b;单例模式有很多种&#xff0c;这里只介绍“饿汉模式”和“懒…...

编程日记 2024/6/23 8:06:25

开发 Golang 项目的 Docker 化案例

开发 Golang 项目的 Docker 化案例 在这个案例中&#xff0c;我们将展示如何使用 Docker 容器化一个简单的 Golang Web 应用。我们将创建一个基于 Go 的 Hello World 应用&#xff0c;并使用 Docker 和 Docker Compose 管理容器化环境。 1. 创建 Golang Web 应用 首先&#…...

编程日记 2024/6/23 8:04:23

PHP面试宝典之Laravel篇

Laravel简介 Laravel是一种优雅的PHP Web应用程序框架&#xff0c;它具有简洁、优雅的语法&#xff0c;并提供了强大的工具用于构建大型、健壮的应用程序。Laravel采用了现代PHP开发的最佳实践&#xff0c;因此深受开发者欢迎。 Laravel面试常见问题 1. 什么是Laravel中间件…...

编程日记 2024/6/23 8:03:22

自动驾驶仿真：Carsim转向传动比设置

文章目录 一、转向传动比概念二、设置转向传动比1、C factor概念2、Steer Kinematics概念3、传动比计算公式 三、转向传动比验证 一、转向传动比概念 转向传动比&#xff08;Steering Ratio&#xff09;表示方向盘转动角度与车轮转动角度之间的关系。公式如下&#xff1a; 转向…...

编程日记 2024/6/23 8:01:19

PyTorch nn.CrossEntropyLoss() 交叉熵损失函数详解和要点提醒

文章目录 前置知识nn.CrossEntropyLoss() 交叉熵损失参数数学公式带权重的公式&#xff08;weight&#xff09;标签平滑&#xff08;label_smoothing&#xff09; 要点 附录参考链接 前置知识 深度学习&#xff1a;关于损失函数的一些前置知识&#xff08;PyTorch Loss&#x…...

编程日记 2024/6/23 7:59:16

DW学习笔记|数学建模task2

本章主要涉及到的知识点有&#xff1a; 微分方程的解法如何用 Python 解微分方程偏微分方程及其求解方法微分方程的基本案例差分方程的求解数值计算方法元胞自动机 2.1 微分方程的理论基础 微分方程是什么&#xff1f;如果你参加过高考&#xff0c;可能在高三备考中遇到过这…...

编程日记 2024/6/23 7:58:14

【大数据 复习】第9章 数据仓库分析工具Hive

一、概念 1.概述 &#xff08;1&#xff09;Hive是一个构建于Hadoop顶层的数据仓库工具。 &#xff08;2&#xff09;某种程度上可以看作是用户编程接口&#xff0c;本身不存储和处理数据。 &#xff08;3&#xff09;依赖分布式文件系统HDFS存储数据。 &#xff08;4&#xf…...

编程日记 2024/6/23 7:57:13

ionic7 从安装 到 项目启动最后打包成 apk

报错处理 在打包的时候遇到过几个问题&#xff0c;这里记录下来两个 Visual Studio Code运行ionic build出错显示ionic : 无法加载文件 ionic 项目通过 android studio 打开报错 capacitor.settings.gradle 文件不存在 说明 由于之前使用的是 ionic 3&#xff0c;当时打包的…...

编程日记 2024/6/23 7:55:11

setInterval 定时任务执行时间不准验证

一般在处理定时任务的时候都使用setInterval间隔定时调用任务。 setInterval(() > {console.log("interval"); }, 2 * 1000);我们定义的是两秒执行一次&#xff0c;但是浏览器实际执行的间隔时间只多不少。这是由于浏览器执行 JS 是单线程模式&#xff0c;使用se…...

编程日记 2024/6/23 7:54:08

Stable Diffusion Model网站

Civitai Models | Discover Free Stable Diffusion Modelshttps://www.tjsky.net/tutorial/488https://zhuanlan.zhihu.com/p/610298913超详细的 Stable Diffusion ComfyUI 基础教程&#xff08;一&#xff09;&#xff1a;安装与常用插件 - 优设网 - 学设计上优设 (uisdc.com)…...

编程日记 2024/6/23 7:51:06

K8S - 实现statefulset 有状态service的灰度发布

什么是灰度发布 Canary Release 参考 理解 什么是 滚动更新&#xff0c;蓝绿部署&#xff0c;灰度发布 以及它们的区别 配置partition in updateStrategy/rollingUpdate 这次我为修改了 statefulset 的1个yaml file statefulsets/stateful-nginx-without-pvc.yaml: --- apiVe…...

编程日记 2024/6/23 7:49:04

Qt 技术博客：深入理解 Qt 中的 delete 和 deleteLater 与信号槽机制

在 Qt 开发中&#xff0c;内存管理和对象生命周期的处理是至关重要的一环。特别是在涉及信号和槽机制时&#xff0c;如何正确删除对象会直接影响应用程序的稳定性。本文将详细讨论在使用 Qt 的信号和槽机制时&#xff0c;delete 和 deleteLater 的工作原理&#xff0c;并给出最…...

编程日记 2024/6/23 7:47:01

自学鸿蒙HarmonyOS的ArkTS语言＜一＞基本语法

一、一个ArkTs的目录结构 二、一个页面的结构 A、装饰器 Entry 装饰器 : 标记组件为入口组件&#xff0c;一个页面由多个自定义组件组成&#xff0c;但是只能有一个组件被标记 Component : 自定义组件, 仅能装饰struct关键字声明的数据结构 State&#xff1a;组件中的状态变量…...

编程日记 2024/6/23 7:44:59

【OpenGauss源码学习 —— （ALTER TABLE（列存修改列类型））】

ALTER TABLE&#xff08;列存修改列类型&#xff09; ATExecAlterColumnType 函数1. 检查和处理列存储表的字符集&#xff1a;2. 处理自动递增列的数据类型检查&#xff1a;3. 处理生成列的类型转换检查&#xff1a;4. 处理生成列的数据类型转换&#xff1a; build_column_defa…...

编程日记 2024/6/23 7:43:58

【大数据 复习】第7章 MapReduce（重中之重）

一、概念 1.MapReduce 设计就是“计算向数据靠拢”&#xff0c;而不是“数据向计算靠拢”&#xff0c;因为移动&#xff0c;数据需要大量的网络传输开销。 2.Hadoop MapReduce是分布式并行编程模型MapReduce的开源实现。 3.特点 &#xff08;1&#xff09;非共享式&#xff0c;…...

编程日记 2024/6/23 7:42:57

Zookeeper：节点

文章目录 一、节点类型二、监听器及节点删除三、创建节点四、监听节点变化五、判断节点是否存在 一、节点类型 持久&#xff08;Persistent&#xff09;&#xff1a;客户端和服务器端断开连接后&#xff0c;创建的节点不删除。 持久化目录节点&#xff1a;客户端与Zookeeper断…...

编程日记 2024/6/23 7:40:55

生产级别的 vue

生产级别的 vue 拆分组件的标识更好的组织你的目录如何解决 props-base 设计的问题transparent component &#xff08;透明组件&#xff09;可减缓上述问题provide 和 inject vue-meta 在路由中的使用如何确保用户导航到某个路由自己都重新渲染&#xff1f;测试最佳实践如何制…...

编程日记 2024/6/23 7:39:53

kafka（五）spring-kafka（1）集成方法

一、集成 1、pom依赖 <!--kafka--><dependency><groupId>org.apache.kafka</groupId><artifactId>kafka-clients</artifactId></dependency><dependency><groupId>org.springframework.kafka</groupId><artif…...

编程日记 2024/6/23 7:34:48

Java中的设计模式深度解析

Java中的设计模式深度解析 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在软件开发领域&#xff0c;设计模式是一种被广泛应用的经验总结和解决方案&#x…...

编程日记 2024/6/23 7:33:46

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2025/7/4 0:18:53

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2025/7/2 16:58:00

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

编程新知 2025/7/6 11:49:09

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2025/7/6 8:45:08

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2025/7/6 2:30:53

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/7/5 20:12:33

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2025/7/6 12:42:16

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

编程新知 2025/6/20 12:34:28

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...

编程新知 2025/7/1 18:57:58

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...

编程新知 2025/7/6 10:28:54