一个精美的前台模板源码（三级菜单）

你的名字 2021-09-22 14:16 372阅读 0赞

### **引言：由于项目的需要，我自行设计了一个精美的三级菜单显示模板，感觉做的还不错，特意把源码分享一下**。 ###

--------------------

**1、jsp主体代码**

<%@ page language="java" contentType="text/html; charset=utf-8"  
    pageEncoding="utf-8"%>  
<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>教学质量与诊断平台</title>

</div>  
<div class="content" style="padding-left:-20px;">  
    <div id="c\_left">author:李庆照</div>  
    <div id="c\_middle">div2</div>  
    <div id="c\_right">  
      
        <div id="login\_dialog">  
            <div class="register\_dialog\_title">  
                <p class="register\_dialog\_info">登录</p>  
            </div>  
            <div style="background-color:\#ffffff;margin:10px;">  
                <form action="">                  
                    <ul class="reg-box">                   
                        <li>  
                            <label for="">账    号:</label><input type="text" placeholder="请输入您的账号" class="admin\_username" maxlength="11" style="color:\#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error error5"></span>  
                        </li>  
                        <li>  
                            <label for="">密    码:</label><input type="password"  class = "admin\_pwd" placeholder="请输入密码" style="color:\#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error error6"></span>  
                        </li>  
                          
                    </ul>  
                    <div class="sub">  
                        <input type="submit" value="登录" />  
                        <input type="reset" value="清空"/>  
                    </div>                      
                </form>  
            </div>  
        </div>  
    </div>  
</div>

<div class="foot">  
<table id="f\_content">  
    <tr><td><h3>关于我们</h3></td><td><h3>友情链接</h3></td></tr>  
    <tr><td><hr size="1" style="color:\#E6E6E6"></td><td><hr size="1" style="color:\#E6E6E6"></td></tr>  
    <tr><td>校企合作企业</td><td><a href="http://www1.jmi.edu.cn">江苏海事职业技术学院</a></td></tr>  
    <tr><td><a href="\#"><b>主办单位:</b>南京龙渊微电子科技公司</a></td><td><a href="">联系我们</a></td></tr>  
    <tr><td><b>单位地址:</b>江苏省南京市江宁区南佑路将军大道千人大厦</td><td><a href="">友情链接</a></td></tr>  
    <tr><td>客服热线：010-82199588</td><td><a>招聘信息</a></td></tr>  
    <tr><td>客服邮箱：kefu\#chsi.com.cn（将\#替换为@）</td><td><a href="">龙渊重创</a></td></tr>  
    <tr><td>京ICP备09057757号</td><td><a href="">中介信息</a></td></tr>  
    <tr><td>京公网安备110402430099号</td><td><a href="">帮助中心</a></td></tr>  
</table>  
</div>  
</div>

</body>  
</html>

--------------------

**2、css**

@charset "UTF-8";  
/\* 初始化CSS \*/  
\*\{  
    margin:0;  
    padding:0;  
\}  
body \{  
background: \#F1F1F1;  
color: \#333333;  
text-align: left;  
font: 14px/25px "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", HELVETICA;  
\}  
.father\{  
    position:realative;  
    width:1024px;  
    margin: 0 auto;  
    border: 1px solid \#E6E6E6;  
    height:auto;  
\}  
.header\{  
    width: 1024px;  
    height:100px;  
    background: \#FFFFFF;  
\}  
\#header\_t\{  
    font-size:24px;  
    font-family:"宋体";  
    font-weight:bold;  
    padding-top:20px;  
    padding-left:20px;  
    vetical-align:middle;  
\}  
\#header\_t b\{color:\#2EAFBB;font-size:12px;\}  
\#header\_t button\{background:\#2EAFBB;color:\#fff;font-size:12px;width:40px; height:23px;font-family:"宋体";\}  
\#header\_t input\{margin-left:400px;border: 1px solid \#E6E6E6;\}  
.content\{  
    margin-top:40px;  
    background: \#FFFFFF;  
    width: 1024px;  
    border: 1px solid \#E6E6E6;  
    font-size: 12px;  
    line-height: 24px;  
    zoom:1;  
    clear:both;  
      
\}

\#c\_left\{  
    width:36%;  
    float:left;  
    background: \#FFFFFF;  
    height:800px;  
    border: 1px solid \#E6E6E6;  
\}  
\#c\_middle\{  
    width:40%;  
    float:left;  
    margin-left:6px;  
        height:800px;  
    background: \#FFFFFF;  
    border: 1px solid \#E6E6E6;  
\}  
 \#c\_right\{  
    width:22%;  
    margin-left:6px;  
    float:left;  
    height:800px;  
    background: \#FFFFFF;  
    border: 1px solid \#E6E6E6;  
\}

a\{text-decoration: none;color: \#fff;\}  
.first\{height: 30px;line-height: 30px;background: \#2EAFBB;text-align: center; margin-top:0px;padding-right:15px ;\}  
.first li\{list-style-type: none;position: relative;float: left;\}  
.first li a\{display: block;height: 30px;width:70px;float: left;margin-left: 12px;\}  
.first li ul\{position: absolute;display: none;\}  
.second\{top: 30px;\}  
.second li a\{width:80px;background:\#2EAFBB;\}  
.second li a:hover\{width: 80px;background:\#2EAFBB;\}  
.third\{left:80px;\}  
\#navlist4 li a\{width:130px;\}  
/\*.first>li:hover>ul \{display: block;\}  
.first>li:hover>ul >li:hover >ul\{display: block;\}\*/  
.nav >div\{position: relative;float: left;left: 50%;\}  
.nav >div>ul\{position: relative;float: left;left:-50%;\}

.foot\{padding:10px;width:1010px;height:230px;zoom:1;background:\#2EAFBB;clear:both;border: 1px solid \#E6E6E6;font-size:14px;margin-top:40px;position:relative;top:20px;\}  
/\*\#foot\_left\{float:left;width:40%;background:\#2EAFBB;color:\#fff;\}  
\#foot\_right\{float:left;width:49%;;background:\#2EAFBB;color:\#fff;\} \*/  
 a:visited\{color:\#fff\}  
 a:hover\{color:\#000;\}

\#f\_content\{  
    width:1000px;  
    margin:0 auto;  
    background:\#2EAFBB;  
    color:\#fff;  
    font-size:12px;  
\}

/\*表单登陆\*/  
\#login\_dialog \{background-color:\#2EAFBB;width: 100%;height:200px;font-family: "黑体";/\*禁止复制粘贴\*/-moz-user-select: none;-webkit-user-select: none;user-select:none;\}  
.register\_dialog\_title \{height: 35px;line-height: 35px;margin: 0 5px;\}  
.register\_dialog\_info \{margin:0 auto;text-align:left;color: \#fff;font-size:18px;\}           
form\{padding:8px;\}  
ul li \{list-style: none;line-height:20px;\}  
.sub input \{width: 50px;background-color: rgb(255, 109, 11); margin-left:25px;color: rgb(255, 255, 255);font-size: 12px;height: 30px;font-family: 黑体;\}  
input\[type = "submit"\]:hover\{cursor: pointer;\}  
.admin\_username\{width:140px; height:20px;\}  
.admin\_pwd\{width:140px; height:20px;\}  
.reg-box li \{ line-height: 44px;font-size:14px;\}

--------------------

3、效果图

--------------------

![70][]

--------------------

![70 1][]

--------------------

ok，还不错吧。

[70]: /images/20210920/deaa80aacb5443b18c19a242e09d281a.png
[70 1]: /images/20210920/f86a82567cef49729d2cd0992483384d.png