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

最新推荐文章于 2024-05-14 20:44:10 发布

阿拉斯加的头头儿

最新推荐文章于 2024-05-14 20:44:10 发布

阅读量6.3k

点赞数 2

文章标签： css html

本文链接：https://blog.csdn.net/weixin_44196534/article/details/108685678

版权

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

第一种出现形式
- - 完整代码
第二种出现形式
- - 完整代码

第一种出现形式

在这里插入图片描述

这个主要是通过定义高度
首先在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>