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

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

news 文章来源：https://blog.csdn.net/weixin_56334307/article/details/139881316 2025/2/5 18:52:46

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

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

效果图:

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

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

源码：

<!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>

建议和优化：

表格宽度: 你设置了table的width为898px，但这可能不是最灵活的解决方案，特别是当考虑到不同屏幕尺寸的响应式设计时。一个更好的做法可能是使用百分比或max-width来限制表格的最大宽度，同时允许它在较小的屏幕上缩小。
行和列的宽度: 你为每个<tr>元素设置了width: 10%;，但实际上<tr>元素不控制列的宽度，而是<th>和<td>元素控制列的宽度。对于<tr>元素，你其实只需要设置height。
使用border-collapse: 你已经设置了border-collapse: collapse;在table元素上，这是正确的，因为它会合并相邻的单元格边框。
内边距和外边距: .container中的padding-left和padding-right被设置为10px，这是可以的，但请确保这符合你的整体布局和设计需求。
字体设置: 你已经在tbody td中设置了字体相关的样式，但.font_money类也定义了字体样式。确保这些样式不会相互冲突，并且你确实需要这些额外的类。
JavaScript函数: 你需要确保formatDate和formatAmt这两个JavaScript函数已经在页面的某个地方被正确定义。例如，你可能需要在<script>标签内或在外部JavaScript文件中定义它们。
表格标题的对齐: 你已经使用.tar类来将某些列的文本对齐到右侧，这是通过text-align: right;实现的。这是正确的做法。
响应式设计: 考虑添加媒体查询（Media Queries）来优化不同屏幕尺寸下的表格布局。例如，在小屏幕上，你可能希望表格的列堆叠起来而不是水平排列。
代码组织: 为了提高代码的可读性和可维护性，建议将CSS规则分组到更具体的类或ID下，而不是使用通配符*。此外，考虑将CSS代码移到单独的.css文件中，并链接到HTML文件。
语义化HTML: 你的HTML结构看起来是合理的，但请确保你使用的是语义化的HTML元素。例如，<thead>, <tbody>, <th>, 和 <td> 是正确的表格元素。

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

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

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

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

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

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

开发 Golang 项目的 Docker 化案例

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

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

PHP面试宝典之Laravel篇

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

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

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

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

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

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

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

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

DW学习笔记|数学建模task2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

什么是灰度发布 Canary Release 参考理解什么是滚动更新，蓝绿部署，灰度发布以及它们的区别配置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 开发中，内存管理和对象生命周期的处理是至关重要的一环。特别是在涉及信号和槽机制时，如何正确删除对象会直接影响应用程序的稳定性。本文将详细讨论在使用 Qt 的信号和槽机制时，delete 和 deleteLater 的工作原理，并给出最…...

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

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

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

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

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

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

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

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

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

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

Zookeeper：节点

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

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

生产级别的 vue

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

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

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

一、集成 1、pom依赖 <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中的设计模式深度解析大家好，我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷也要风度的程序猿！ 在软件开发领域，设计模式是一种被广泛应用的经验总结和解决方案&#x…...

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

鸿蒙 HarmonyOS NEXT星河版APP应用开发—上篇

一、鸿蒙开发环境搭建 DevEco Studio安装下载访问官网：https://developer.huawei.com/consumer/cn/deveco-studio/选择操作系统版本后并注册登录华为账号既可下载安装包安装建议：软件和依赖安装目录不要使用中文字符软件安装包下载完成后&#xff0…...

编程日记 2024/6/23 7:32:45

[FreeRTOS 基础知识] 互斥访问与回环队列概念

文章目录为什么需要互斥访问？使用队列实现互斥访问休眠和唤醒机制环形缓冲区为什么需要互斥访问？ 在裸机中，假设有两个函数（func_A, func_B）都要修改a的值（a），那么将a定义为全局变…...

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

音视频的Buffer处理

最近在做安卓下UVC的一个案子。正好之前搞过ST方案的开机广告，这个也是我少数最后没搞成功的项目。当时也有点客观原因，当时ST要退出机顶盒市场，所以一切的支持都停了，当时啃他家播放器几十万行的代码，而且几乎没有文档…...

编程日记 2024/6/23 7:29:41

【总结】攻击 AI 模型的方法

数据投毒污染训练数据后门攻击通过设计隐蔽的触发器，使得模型在正常测试时无异常，而面对触发器样本时被操纵输出。后门攻击可以看作是特殊的数据投毒，但是也可以通过修改模型参数来实现对抗样本只对输入做微小的改动，使模型…...

编程日记 2024/6/23 7:26:38

Linux配置中文环境

文章目录前言中文语言包中文输入法中文字体前言在Linux系统中修改为中文环境，通常涉及以下几个步骤： 中文语言包更新源列表： 更新系统的软件源列表和语言环境设置，确保可以安装所需的语言包。 sudo apt update sudo apt ins…...

编程日记 2024/6/23 7:25:37

深入解析 iOS 应用启动过程：main() 函数前的四大步骤

深入解析 iOS 应用启动过程：main() 函数前的四大步骤背景描述：使用 Objective-C 开发的 iOS 或者 MacOS 应用在开发 iOS 应用时，我们通常会关注 main() 函数及其之后的执行逻辑，但在 main() 函数之前，系统已经为我们…...

编程日记 2024/6/23 7:24:35

textarea标签改写为富文本框编辑器KindEditor

下载 - KindEditor - 在线HTML编辑器 KindEditor的简单使用-CSDN博客一、 Maven需要的依赖： 如果依赖无法下载，可以多添加几个私服地址： 在Maven框架中加入镜像私服 <mirrors><!-- mirror| Specifies a repository mirror site to…...

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

高通安卓12-Input子系统

1.Input输入子系统架构 Input Driver(Input设备驱动层)->Input core(输入子系统核心层)->Event handler(事件处理层)->User space(用户空间) 2.getevent获取Input事件的用法 getevent 指令用于获取android系统中 input 输入事件，比如获取按键上报信息、获…...

编程日记 2024/6/23 7:22:32

HTML 事件

HTML 事件 HTML 事件是发生在 HTML 元素上的交互瞬间，它们可以由用户的行为（如点击、按键、鼠标移动等）或浏览器自身的行为（如页面加载完成、图片加载失败等）触发。在 HTML 和 JavaScript 的交互中，事件扮演着核心角色，允许开发者创建动态和响应式的网页。常见的 HTM…...

编程日记 2024/6/23 7:21:31

Mysql 官方提供的公共测试数据集 Example Databases

数据集：GitHub - datacharmer/test_db: A sample MySQL database with an integrated test suite, used to test your applications and database servers 下载 test_db: https://github.com/datacharmer/test_db/releases/download/v1.0.7/test_db-1.0.7.tar.gz …...

编程日记 2024/6/23 7:19:29

南通网站推广公司/抖音seo排名系统

能用通俗的语言解释下DSP和DMP的广告吗？ 本人广告小白一枚，网上也看了些DSP和DMP的介绍，依然很难理解它的操作模式，能用通俗的语言解释下DSP和DMP的广告DSP只是广告发布的技术平台，不是媒体。你可以理解成是一个电视广…...

编程日记 2025/2/5 18:52:24

建个注册页面网站/网站开发北京公司

01-本章内容介绍-day04 02-图片存储方案（介绍） 03-图片存储方案-七牛云存储（注册、登录、实名认证） 04-图片存储方案-七牛云存储（新建、查看存储空间） 05-图片存储方案-七牛云存储（鉴权&…...

编程日记 2025/2/5 14:35:15

青岛网站开发费用/怎么请专业拓客团队

看什么看，快点蓝字关注我！阿里巴巴将数据中心建到千岛湖旁边，腾讯将数据中心深藏在山洞中，如今的数据中心除了不能上天，这下水入地似乎无所不能。这虽然是句玩笑话，但也反映出随着规模化、集约化、绿色化等…...

编程日记 2025/2/5 11:03:52

网站空间租赁香港/南宁网站seo大概多少钱

山西大同大学数学与计算机科学学院是于2006年在山西大同大学组建后成立的，前身是雁北师范学院数学系。学校坐落于历史文化名城、煤海之乡山西大同。校园占地面积2292.82亩，建筑面积612605.43平方米，中外文藏书180.19万余册，中外文…...

编程日记 2025/2/5 10:28:18

张家港做企业网站/今天新疆新闻头条

题目 n(2<n<50)个区间，第i个区间[li,ri](0<li<ri<2^60)， 你可以从第i个区间里选取一个数放在新序列的第i位，所构成一个长度为n的新序列若新序列是非严格单调递增序列，则将其所有元素的和加到答案里&#xff0c…...

编程日记 2025/2/5 9:03:47

深圳网站建设方案服务公司/网页设计作品集

这题目快坑爹的，我也是提交了蛮多次才通过的，首先他给数据你使用long类型是完全可以处理的但是题目曾提到过需要1000个数字组成吧，挺大的，显然他的隐藏测试数据long类型是完全不符合的，这道题目用java中的BigInteger类…...

编程日记 2025/2/5 4:26:31

效果图:

源码：

建议和优化：

相关文章：