前端大作业_html5+css3+js学生宿舍管理系统基本框架

^涵梦

于 2023-06-19 23:13:26 发布

阅读量1.3k

点赞数 7

文章标签： javascript 前端课程设计 html5 css3 html

本文链接：https://blog.youkuaiyun.com/qq_54800157/article/details/131297012

版权

这是一个HTML文件，展示了学生宿舍管理系统的前端界面设计，包括搜索框、功能按钮和表格展示。CSS文件定义了页面布局和样式，JavaScript处理了不同搜索框的显示和隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息 管理系统</title>
    <!--引入图标-->
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css1/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="container">
        <div class="navigat">
            <h2>欢迎进入学生宿舍管理系统！</h2>
        </div>
        <div class="main">
            <div class="left">
                <div class="form">
                    <div class="span1">
                    <span class="iconfont">&#xe60e;</span></div>
                   <input type="text" class="keyword" placeholder="首页">
                   <div class="span2">
                    <span class="iconfont">&#xe61c;</span></div>
                   <input type="text" class="keyword1" placeholder="学生管理">
                   <div class="span3">
                    <span class="iconfont">&#xe916;</span></div>
                   <input type="text" class="keyword2" placeholder="楼宇管理">
                   <div class="span4">
                    <span class="iconfont">&#xe604;</span></div>
                   <input type="text" class="keyword3" placeholder="宿舍管理">
                   <div class="span5">
                   <span class="iconfont">&#xe604;</span></div>
                   <input type="text" class="keyword4" placeholder="入住管理">
                   <div class="span6">
                   <span class="iconfont">&#xe60d;</span></div>
                   <input type="text" class="keyword5" placeholder="宿管管理">
                   <div class="span7">
                   <span class="iconfont">&#xe60d;</span></div>
                   <input type="text" class="keyword6" placeholder="管理员管理">
                    <div class="form-search1">
                        <h2> 学生管理界面</h2>
                        <div class="shang">
                            学生管理:<input type="text" placeholder="学生名称">
                           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <button class="iconfont">&#xe60a;<a href=""><input type="button" value="查询"></a></button>
                            <button class="iconfont">&#xe60d;<a href=""><input type="button" value="新增"></a></button>
                            <button class="iconfont">&#xe604;<a href=""><input type="button" value="导出"></a></button>
                            <button class="iconfont">&#xeabf;<a href=""><input type="button" value="导入"></a></button>
                        </div>
                        <div class="zhong">
                            <table class="zhong1" border="1">
                               <tr>
                                <th>学生编号</th>
                                <th>学生姓名</th>
                                <th>学生性别</th>
                                <th>所在楼宇</th>
                                <th>所在楼层</th>
                                <th>所在宿舍</th>
                                <th>操作</th>
                               </tr>
                               <tr>
                                <td>01</td>
                                <td>张三</td>
                                <td>男</td>
                                <td>1号楼</td>
                                <td>三楼</td>
                                <td>1301</td>
                                <td><button class="iconfont">&#xe608; <a href=""><input type="button" value="修改"></a></button>
                               <button class="iconfont">&#xe60b;<a href=""></a><input type="button" value="删除"></a></button> </td>
                               </tr>
                               <tr>
                                <td>02</td>
                                <td>李四</td>
                                <td>男</td>
                                <td>2号楼</td>
                                <td>四楼</td>
                                <td>2403</td>
                                <td><button class="iconfont">&#xe608; <input type="button" value="修改"></button>
                                    <button class="iconfont">&#xe60b;<input type="button" value="删除"></button> </td>
                               </tr>
                               <tr>
                                <td>03</td>
                                <td>王五</td>
                                <td>男</td>
                                <td>4号楼</td>
                                <td>四楼</td>
                                <td>4403</td>
                                <td><button class="iconfont">&#xe608; <input type="button" value="修改"></button>
                                    <button class="iconfont">&#xe60b;<input type="button" value="删除"></button> </td>
                               </tr>
                               <tr>
                                <td>04</td>
                                <td>李华</td>
                                <td>女</td>
                                <td>4号楼</td>
                                <td>四楼</td>
                                <td>4406</td>
                                <td><button class="iconfont">&#xe608; <input type="button" value="修改"></button>
                                    <button class="iconfont">&#xe60b;<input type="button" value="删除"></button> </td>
                               </tr>
                               <tr>
                                <td>05</td>
                                <td>张强</td>
                                <td>男</td>
                                <td>2号楼</td>
                                <td>六楼</td>
                                <td>2606</td>
                                <td><button class="iconfont">&#xe608; <input type="button" value="修改"></button>
                                    <button class="iconfont">&#xe60b;<input type="button" value="删除"></button> </td>
                               </tr>
                               <tr>
                                <td>06</td>
                                <td>刘琴</td>
                                <td>女</td>
                                <td>4号楼</td>
                                <td>七楼</td>
                                <td>4710</td>
                                <td><button class="iconfont">&#xe608; <input type="button" value="修改"></button>
                                    <button class="iconfont">&#xe60b;<input type="button" value="删除"></button> </td>
                               </tr>
                               <tr>
                                <td>07</td>
                                <td>王石</td>
                                <td>男</td>
                                <td>1号楼</td>
                                <td>七楼</td>
                                <td>1711</td>
                                <td><button class="iconfont">&#xe608; <input type="button" value="修改"></button>
                                    <button class="iconfont">&#xe60b;<input type="button" value="删除"></button> </td>
                               </tr>
                               <tr>
                                <td>08</td>
                                <td>张世杰</td>
                                <td>男</td>
                                <td>2号楼</td>
                                <td>六楼</td>
                                <td>2618</td>
                                <td><button class="iconfont">&#xe608; <input type="button" value="修改"></button>
                                    <button class="iconfont">&#xe60b;<input type="button" value="删除"></button> </td>
                               </tr>
                            </table>
                        </div>
                    </div>
                    <div class="form-search2">
                        <h2> 楼宇管理界面</h2>
                    </div>
                    <div class="form-search3">
                        <h2> 宿舍管理界面</h2>
                    </div>
                    <div class="form-search4">
                        <h2>入住管理界面</h2>
                    </div>
                    <div class="form-search5">
                        <h2> 宿管管理界面</h2>
                    </div>
                    <div class="form-search6">
                        <h2> 管理员管理界面</h2>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="right1">
                    <img src="../images/school.jpg">

                </div>
                <div class="right2">
                    <img src="../images/11.jpg">

                </div>
            </div>
           
        </div>
        <div class="bottom"></div>

    </div>
     <!--引入js文件-->
     <script src="./js/index.js"></script>
</div>
</body>
</html>

css文件

.container{
    height:1000px;
    width:1400px;
    margin:0 auto;
    background-color:ghostwhite;
}
.navigat{
    height:50px;
    text-align:center;
    margin:10px auto;
    color:white;
    line-height:50px;
    background-color: rgb(92, 43, 98);
    
}
.main{
    height:600px;
    margin:10px auto;
}
.left{
    width:300px;
    height:600px;
    border:2px solid black;
    float:left;
    position:relative;
    background-color: rgb(30, 163, 208);
}
.form{
    height:50px;
    width:300px;
    margin:10px auto;
    text-align:center;    
}
.span1{
    position:absolute;
    top:20px;
    left:0;
    
}
.span2{
    position:absolute;
    top:65px;
    left:0;
}
.span3{
    position:absolute;
    top:110px;
    left:0;
}
.span4{
    position:absolute;
    top:155px;
    left:0;
}
.span5{
    position:absolute;
    top:200px;
    left:0;
}
.span6{
    position:absolute;
    top:245px;
    left:0;
}
.span7{
    position:absolute;
    top:290px;
    left:0;
}
.form input{
    position:relative;
    background-color: rgb(30, 163, 208);
}
.form input:hover{
    background-color: white;
    
}
.keyword{
    height:40px;
    width:250px;
    margin-left:30px;
    border:2px solid rgb(30,163,208);
}
.keyword1{
    height:40px;
    width:250px;
    margin-left:30px;
    border:2px solid rgb(30,163,208);
}
.keyword2{
    height:40px;
    width:250px;
    margin-left:30px;
    border:2px solid rgb(30,163,208);
}
.keyword3{
    height:40px;
    width:250px;
    margin-left:30px;
    border:2px solid rgb(30,163,208);
}
.keyword4{
    height:40px;
    width:250px;
    margin-left:30px;
    border:2px solid rgb(30,163,208);
}
.keyword5{
    height:40px;
    width:250px;
    margin-left:30px;
    border:2px solid rgb(30,163,208);
}
.keyword6{
    height:40px;
    width:250px;
    margin-left:30px;
    border:2px solid rgb(30,163,208);
}
.form-search1{
        height:600px;
        width:1080px;
        position:absolute;
        border:2px solid black;
        top:0;
        left:320px;
        overflow:hidden;
        display:none;
    }  
.shang{
    height:50px;
    border:2px solid #ccc;
    line-height:50px;

}
.zhong{
    height:400px;
    border:2px solid #ccc;

}
.zhong1{
    width:800px;
    height:400px;
    margin:0 auto;
}
.form-search2{
        height:600px;
        width:1080px;
        position:absolute;
        border:2px solid black;
        top:0;
        left:320px;
        overflow:hidden;
        display:none;
    }  
.form-search3{
        height:600px;
        width:1080px;
        position:absolute;
        border:2px solid black;
        top:0;
        left:320px;
        overflow:hidden;
        display:none;
    }  
.form-search4{
        height:600px;
        width:1080px;
        position:absolute;
        border:2px solid black;
        top:0;
        left:320px;
        overflow:hidden;
        display:none;
    } 
.form-search5{
        height:600px;
        width:1080px;
        position:absolute;
        border:2px solid black;
        top:0;
        left:320px;
        overflow:hidden;
        display:none;
    } 
.form-search6{
        height:600px;
        width:1080px;
        position:absolute;
        border:2px solid black;
        top:0;
        left:320px;
        overflow:hidden;
        display:none;
    } 
.right{
    width:1080px;
    height:600px;
    border:2px solid black;
    float:right;
}
.right1{
    height:500px;
    width:520px;
    float:left;
    border:2px solid black;
    margin-top:50px;
    margin-left:10px;

}
.right2{
    height:500px;
    width:520px;
    float:right;
    border:2px solid black;
    margin-top:50px;
    margin-right:10px;
}
img{
    height:500px;
    width:520px;
}
.bottom{
    height:80px;
    width:1400px;
    background-color: rgb(47, 77, 167);
}

js文件

var keyword=document.querySelector('.keyword');
var right=document.querySelector('.right');
//首页
//鼠标获得焦点
keyword.onfocus=function(){
    right.style.display="block";
}

//学生管理
var keyword1=document.querySelector('.keyword1');
var formSearch1=document.querySelector('.form-search1');
//鼠标获得焦点
keyword1.onfocus=function(){
    formSearch1.style.display="block";
    right.style.display="none";

}
//鼠标失焦
keyword1.onblur=function(){
    formSearch1.style.display="none";
}
//楼宇管理
var keyword2=document.querySelector('.keyword2');
var formSearch2=document.querySelector('.form-search2');
keyword2.onfocus=function(){
    formSearch2.style.display="block";
    right.style.display="none";

}
keyword2.onblur=function(){
    formSearch2.style.display="none";
}
//宿舍管理
var keyword3=document.querySelector('.keyword3');
var formSearch3=document.querySelector('.form-search3');
keyword3.onfocus=function(){
    formSearch3.style.display="block";
    right.style.display="none";

}
keyword3.onblur=function(){
    formSearch3.style.display="none";
}
//入住管理
var keyword4=document.querySelector('.keyword4');
var formSearch4=document.querySelector('.form-search4');
keyword4.onfocus=function(){
    formSearch4.style.display="block";
    right.style.display="none";

}
keyword4.onblur=function(){
    formSearch4.style.display="none";
}
//宿管管理
var keyword5=document.querySelector('.keyword5');
var formSearch5=document.querySelector('.form-search5');
keyword5.onfocus=function(){
    formSearch5.style.display="block";
    right.style.display="none";

}
keyword5.onblur=function(){
    formSearch5.style.display="none";
}
//管理员管理
var keyword6=document.querySelector('.keyword6');
var formSearch6=document.querySelector('.form-search6');
keyword6.onfocus=function(){
    formSearch6.style.display="block";
    right.style.display="none";

}
keyword6.onblur=function(){
    formSearch6.style.display="none";
}

截图如下：