简单菜单

考勤管理系统菜单设计

最新推荐文章于 2023-02-08 11:57:26 发布

原创最新推荐文章于 2023-02-08 11:57:26 发布 · 423 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#float #csv #div #menu

web前台专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个用于考勤管理系统的菜单设计方案，包括考勤管理的主要功能模块如我的考勤、假期结算、CSV导入及统计查询等。通过CSS样式定义了菜单的各项属性，实现了清晰直观的用户界面。

#nav {
     line-height: 22px; list-style-type: none; background:#d1d4fe;
}
#nav a {
    display: block; width: 80px; text-align:center;
}
#nav a:link {
    color:#666; text-decoration:none;
}
#nav a:visited {
    color:#666;text-decoration:none;
}
#nav a:hover {
    color:#FFF;text-decoration:none;font-weight:bold;
}
#nav li {
    float: left; width: 80px; background:#d1d4fe;
}
#nav li a:hover{
    background:#0610b3;
}
#nav li ul {
    line-height: 27px; list-style-type: none;text-align:left;
    left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
    float: left; width: 180px;
    background: #F6F6F6;
}
#nav li ul a{
    display: block; width: 156px;text-align:left;padding-left:24px;
}
#nav li ul a:link {
    color:#666; text-decoration:none;
}
#nav li ul a:visited {
    color:#666;text-decoration:none;
}
#nav li ul a:hover {
    color:#F3F3F3;text-decoration:none;font-weight:normal;
    background:#2f3bfc;
}
#nav li:hover ul {
    left: auto;
}
#nav li.sfhover ul {
    left: auto;
}

#MainPanel {
width: 100%;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
}

#Menu {
float: left;
width: 100%;
background-color: #d1d4fe;
}

<li><a href="#">考勤管理</a>
    <ul>
    <li><a href="#" onclick="#">我的考勤</a></li>
    <li><a href="#" onclick="#">假期结算</a></li>
    <li><a href="#" onclick="CIfm('IFramePage/CSVdaoru.html');">CSV導入</a></li>
    <li><a href="#" onclick="CIfm('IFramePage/tongjichaxun.html');">统计查询</a></li>
    </ul>

</li>

<li>

</li>

</div>