第一种出现形式

这个主要是通过定义高度
首先在ul块区域把高度设置为0

.parent ul{/* 初始定义高度为0，这样ul面板就不显示 */
height: 0;
/* 溢出隐藏 */
overflow: hidden;
/* 定义变化时间 */
transition: all 0.5s;
}

在鼠标进入主文件区域时，高度设置重新调整为160px

.parent:hover ul{/* 鼠标进入parent里，ul的宽度重新定义，就显现出来 */
height: 160px;}

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>
*{margin: 0;/* 内填充 */padding: 0;
}
li{/* 清除列表标记 */list-style: none;
}.parent{width: 260px;border:2px solid #af3c3c;
}
.parent h3{/* 左缩进 */text-indent: 10px;/* 行高 */line-height: 60px;background-color: #333d4b;color: white;/* 添加一个右方向的图片 */background-image: url(./img/arrow-collected.png);/* 图片比较小,默认会出现好多小图片填满这个h3空间所以需要定义背景图片不重复 */background-repeat: no-repeat;/* 定义该箭头位置:向右220px，上下居中 */background-position: 220px center;/* 外框：大小1px,直线solid和虚线dashed,外框颜色 */
border-bottom:1px solid #999999;}
.parent li{/* 行高 */
line-height: 40px;
background-color: #333d4b;
/* 字体右移 */
padding-left: 50px;
/* 字体颜色 */
color: whitesmoke;}
.parent li:hover{background-color: #3f4a58;}
.parent ul{/* 初始定义高度为0，这样ul面板就不显示 */
height: 0;
/* 溢出隐藏 */
overflow: hidden;
/* 定义变化时间 */
transition: all 0.5s;
}
.parent:hover ul{/* 鼠标进入parent里，ul的宽度重新定义，就显现出来 */
height: 160px;}
.parent:hover h3{/* 箭头朝下的图片 */
background-image: url(./img/arrow-spread.png);}</style></head>
<body><div class="parent"><h3>主文件</h3><ul><li>银行信息</li><li>银行账号信息</li><li>银行差异原因</li><li>银行销售信息</li></ul>
</div>
</body>
</html>

第二种出现形式

初始设定界面为隐藏，这样子就不会看到主文件下方的银行信息

.parent ul {display: none;}

当鼠标移入parent（主文件）区域，触发ul，定义为块元素，也就解除隐藏了

 .parent:hover ul {display: block;}

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;/* 内填充 */padding: 0;}li {/* 清除列表标记 */list-style: none;}.parent {width: 260px;/* 边框:2像素，直线，边框背景 */border: 2px solid #af3c3c;}.parent h3 {text-indent: 10px;line-height: 60px;background-color: #333d4b;color: white;/* 箭头图片加入背景图中 */background-image: url(./img/arrow-collected.png);/* 背景图设置为不重复显示 */background-repeat: no-repeat;/* 背景图（小箭头）摆放位置 */background-position: 220px center;border-bottom: 1px solid #999999;}.parent li {/* 行高 */line-height: 35px;background-color: #333d4b;/* 右填充 */padding-left: 50px;color: whitesmoke;}.parent li:hover {background-color: #3f4a58;}.parent ul {display: none;}.parent:hover ul {display: block;}.parent:hover h3 {/* 箭头朝下的图片 */background-image: url(./img/arrow-spread.png);}</style></head><body><div class="parent"><h3>主文件</h3><ul><li>银行信息</li><li>银行账号信息</li><li>银行差异原因</li><li>银行销售信息</li></ul></div>
</body></html>

前端HTML银行管理系统界面部分实现相关推荐

银行管理系统(使用SQL Server)-Python快速编程入门(第2版)-人民邮电出版社-阶段案例
阶段案例-银行管理系统题目描述银行管理系统是一个集开户.查询.取款.存款.转账.锁定.解锁.退出等一系列业务于一体的管理系统,随着计算机技术在金融行业的广泛应用,银行企业采用管理系统替代了传统手工 ...
java银行管理系统源码
目录一.项目包含知识点二.项目需求三.系统模块设计 3. 1.模块介绍 3·2.银行管理系统技术分析如图 3.3银行管理系统界面展示四.银行管理系统源码 4.1Account类 4.2ATMS ...
JavaEE + Oracle + Spring Boot + Mybatis + Maven 开发简易版银行管理系统（附源码）
文章目录 JavaEE + Oracle + Spring Boot + Mybatis + Maven 开发简易版银行管理系统一.系统介绍二.开发步骤三.系统展示四.开发总结五.数据库相关 ...
java 银行管理系统怎么储存账户信息_银行管理系统实现用户注册登录存、取款交易记录查询和修改用户信息等功能...
========= 项目介绍======== 银行账户管理系统本项目主要实现用户注册登录存.取钱和修改用户信息功能. 用户信息的存储和获取通过集合和IO输入输出流实现. 存钱 ...
简单的银行管理系统（接口）
简单的银行管理系统(接口) 本例要求实现银行卡系统的银联接口,详细要求如下: 银联接口,用于描述银联统一制定的规则,该接口提供检测密码方法.取钱方法以及查询余额方法. 工商银行接口,用于描述工商银行发 ...
JAVA简单的银行管理系统
账户类 package Account;public abstract class Account {private int id;//账号private String password;//密码pr ...
python实例-银行管理系统（特简单的那种）
python实例学习--银行管理系统任务分析管理员类 ATM类主函数注意任务分析这个实例要求实现一个银行管理系统,系统开始运行时,进入欢迎界面,工作人员输入管理员账户和密码,输入失败直接退 ...
java 课程设计——银行管理系统
银行管理系统(java) 环境: idea2020 jdk1.8 能实现的功能: 1.注册账户 2.登录 3.查询账户信息 4.存款 5.取款 6.向另一个账户转账 7.修改账户密码 8.注销账户项 ...
Python版简易银行管理系统源代码，银行管理系统python代码、银行自助提款系统
Python版简易银行管理系统源代码,银行管理系统python代码,实现开户.账户查询.存取款.转账.改密.锁定.解锁.补卡.销户等银行管理操作.账户信息存在allusers.txt中,通过该文件的读 ...
[附源码]Python计算机毕业设计Django小型银行管理系统
项目运行环境配置: Pychram社区版+ python3.7.7 + Mysql5.7 + HBuilderX+list pip+Navicat11+Django+nodejs. 项目技术: dj ...

前端HTML银行管理系统界面部分实现

前端HTML银行管理系统界面部分实现

第一种出现形式

完整代码

第二种出现形式

完整代码

前端HTML银行管理系统界面部分实现相关推荐

最新文章

热门文章