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

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

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

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

效果图:

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

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

源码:

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

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

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

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

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

  6. JavaScript函数: 你需要确保formatDateformatAmt这两个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"&…...

两种单例模式(保证线程安全)

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

开发 Golang 项目的 Docker 化案例

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

PHP面试宝典之Laravel篇

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

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

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

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

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

DW学习笔记|数学建模task2

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

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

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

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

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

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

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

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)…...

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

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

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

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

自学鸿蒙HarmonyOS的ArkTS语言<一>基本语法

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

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

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

【大数据 复习】第7章 MapReduce(重中之重)

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

Zookeeper:节点

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

生产级别的 vue

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

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…...

Java中的设计模式深度解析

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

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

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

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

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

音视频的Buffer处理

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

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

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

Linux配置中文环境

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

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

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

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

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

高通安卓12-Input子系统

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

HTML 事件

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

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

数据集&#xff1a;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 …...

Docker 下载与安装以及配置

安装yum工具 yum install -y yum-ulits配置yum源 阿里云源 yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo安装Docker 17.03后为两个版本&#xff1a; 社区版&#xff08;Community Edition&#xff0c;缩写为 CE&#x…...

Java中的集合框架详解:List、Set、Map的使用场景

Java中的集合框架详解&#xff1a;List、Set、Map的使用场景 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在Java编程中&#xff0c;集合框架是一个非常重要…...

[Django学习]前端+后端两种方式处理图片流数据

方式1&#xff1a;数据库存放图片地址,图片存放在Django项目文件中 1.首先&#xff0c;我们现在models.py文件中定义模型来存放该图片数据,前端传来的数据都会存放在Django项目文件里的images文件夹下 from django.db import modelsclass Image(models.Model):title models.C…...

如何配置IOMMU或者SWIOTLB

1. 前言 这篇文章说明了如何在Linux内核中启用和配置IOMMU和SWOTLB。 当今的计算或者嵌入设备使用一种内存分区的方法进行外设的管理&#xff0c;如显卡、PCI设备或USB设备&#xff0c;都将设备映射为一段内存&#xff0c;用于设备的读写。 传统意义上的IOMMU用于内存映射&a…...

【大数据 复习】第3章 分布式文件系统HDFS(重中之重)

一、概念 1.分布式文件系统把文件分布存储到多个计算机节点上&#xff0c;通过网络实现、文件在多台主机上进行分布式存储的文件系统。&#xff08;就是你的电脑存a&#xff0c;我的电脑存pple&#xff09; 2.降低了硬件开销: 与之前使用多个处理器和专用高级硬件的并行化处理装…...

element-ui里message抖动问题

由于element默认屏蔽滚动条&#xff0c;导致取消时弹message时 侧边滚动栏突然回来后引起抖动问题 是由于打开弹窗时出现遮罩层dialog对话框 时引起了元素内容超出自身尺寸 对应的overflow样式内容为hidden&#xff0c;且新建了一个class类内容为增加17 内右边距&#xff0c;当…...

Attention系列总结-粘贴自知乎

1. 梦想做个翟老师&#xff1a;阿里&#xff1a;Behavior Sequence Transformer 解读48 赞同 7 评论文章 优点:捕捉用户行为历史序列中的顺序信息。w2v也是捕捉用户序列信息的,本质差异在于啥&#xff1f; 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff0…...

swagger下载文件名中文乱码、swagger导出文件名乱码、swagger文件导出名称乱码、解决swagger中文下载乱码bug

文章目录 一、场景描述&#xff1a;swagger导出文件名称乱码二、乱码原因三、解决方法3.1、方法一、在浏览器中输入地址下载3.2、方法二、swagger升级为2.10.0及以上 四、可能遇到的问题4.1、DocumentationPluginsManager.java:152 一、场景描述&#xff1a;swagger导出文件名称…...

191.回溯算法:组合总和|||(力扣)

代码解决 class Solution { public:vector<vector<int>> result; // 存储所有符合条件的组合vector<int> res; // 当前组合// 回溯函数void backtracing(int k, int n, int index, int sum) {// 如果当前组合的长度等于k&#xff0c;且总和等于nif (res.si…...

JupyterLab使用指南(二):JupyterLab基础

第2章 JupyterLab基础 2.1 JupyterLab界面介绍 JupyterLab的用户界面非常直观和灵活。它包括文件浏览器、工作区、多标签页、命令面板和侧边栏等功能。以下是各个部分的详细介绍&#xff1a; 2.1.1 文件浏览器 文件浏览器位于界面左侧&#xff0c;用于导航和管理文件。你可…...

ubuntu18.04 + openssl + engine + pkcs11+ softhsm2 双向认证测试

安装环境 openssl 1.1.1 pkcs11-tool &#xff08;由sudo apt-get install opensc 安装&#xff09; libpksc11 &#xff08;需源码安装apt install 只有libp11, 源码安装才有 libpksc11.so -> pkcs11.so&#xff09; softhsm2 &#xff08;由sudo apt-get install softhsm…...

【C++】类和对象2.0

俺来写笔记了&#xff0c;哈哈哈&#xff0c;浅浅介绍类和对象的知识点&#xff01; 1.类的6个默认成员函数 俺们定义一个空类&#xff1a; class N {}; 似乎这个类N里面什么都没有&#xff0c;其实不是这样子的。这个空类有6个默认的成员函数 。 默认成员函数&#xff1a…...

【LLM之KG】KoPA论文阅读笔记

研究背景 知识图谱补全&#xff08;KGC&#xff09;是通过预测知识图谱中缺失的三元组来完善知识图谱的信息。传统方法主要基于嵌入和预训练语言模型&#xff0c;但这些方法往往忽视了知识图谱的结构信息&#xff0c;导致预测效果不佳。 研究目标 本文的研究目标是探索如何将…...

UI设计速成课:理解模态窗口与非模态窗口的区别

我们日常所说的弹性框架是非常笼统的概念。我们习惯性地称之为对话框架、浮动层和提示条。弹性框架可以分为两种:模态弹性框架和非模态弹性框架。产品需要弹性框架来传递信息&#xff0c;用户需要弹性框架来接受反馈&#xff0c;但是没有经过推敲的弹出窗口设计很容易让用户感到…...

【Linux】基础IO_4

文章目录 六、基础I/O4. 动静态库 未完待续 六、基础I/O 4. 动静态库 既然我们能够成功创建静态库了&#xff0c;接下来我们将这个代码打包成动态库&#xff1a; shared: 表示生成共享库格式 fPIC&#xff1a;产生位置无关码(position independent code) 动态库库名规则&…...

C++模板类原理讲解

C模板类原理讲解 C模板是一种强大的编译期工具&#xff0c;它允许我们创建通用的、类型无关的类和函数。模板的主要目的是实现代码的重用和泛型编程。模板类的原理涉及以下几个方面&#xff1a; 模板的定义和实例化模板的类型参数模板特化模板的编译过程模板的优点和缺点 1.…...

scratch编程03-反弹球

这篇文章和上一篇文章《scratch3编程02-使用克隆来编写小游戏》类似&#xff08;已经完全掌握了克隆的可以忽略这篇文章&#xff09;&#xff0c;两篇文章都使用到了克隆来编写一个小游戏&#xff0c;这篇文章与上篇文章不同的是&#xff0c;本体在进行克隆操作时&#xff0c;不…...

postgresql数据库进阶知识

postgresql数据库进阶知识 # 如果表存在就先删除 drop table if exists student; # 创建学生表 # id serial not null 表示id自增 # id integer not null 表示id不自增 create table student (id serial not nullconstraint student_pkprimary…...

关于HTTP劫持,该如何理解、防范和应对

一、引言 HTTP劫持&#xff08;HTTP Hijacking&#xff09;是一种网络安全威胁&#xff0c;它发生在HTTP通信过程中&#xff0c;攻击者试图通过拦截、篡改或监控用户与服务器之间的数据流量&#xff0c;以达到窃取敏感信息或执行恶意操作的目的。今天我们就来详细了解HTTP劫持…...

System.Data.OracleClient.OracleException:“ORA-12571: TNS: 包写入程序失败

System.Data.OracleClient.OracleException:“ORA-12571: TNS: 包写入程序失败 解决方法&#xff1a; 首先%oracle_home%/network/admin下的sqlnet.ora文件&#xff0c;把SQLNET.AUTHENTICATION_SERVICES (NTS)加个 # 注释掉就好了...