学院网站的建设

最新推荐文章于 2022-10-31 11:01:17 发布
最新推荐文章于 2022-10-31 11:01:17 发布
阅读量647 收藏 5
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NaCl__/article/details/74276080
版权

HTML部分：
head.php

<!DOCTYPE>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<head>
<style type="text/css"> 
/* common styling */ 
.menu {font-family: arial, sans-serif; width:960px; position:relative; margin-left:25px; font-size:14px;} 
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:120px; height:30px; text-align:center; color:#fff;  background:#0061b6; line-height:30px; font-size:14px; overflow:hidden;} 
.menu ul {padding:0; margin:0;list-style-type: none; } 
.menu ul li {float:left; margin-right:0px; position:relative;} 
.menu ul li ul {display: none;} 

.menu ul li:hover a {color:#fff; background:#36f;} 
.menu ul li:hover ul {display:block; position:absolute; top:30px; left:0; width:82px;} 
.menu ul li:hover ul li a.hide {} 
.menu ul li:hover ul li:hover a.hide {background:#36f; color:#000;} 
.menu ul li:hover ul li ul {display: none;} 
.menu ul li:hover ul li a {display:block; background:#0061b6; color:#fff;} 
.menu ul li:hover ul li a:hover {background:#36f; color:#fff;} 
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:82px; top:0;} 
.menu ul li:hover ul li:hover ul.left {left:-105px;} 
</style> 
<!--[if lte IE 6]> 
<style type="text/css"> 
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;} 
.menu ul li a:hover ul li a.hide {display:none;} 
.menu ul li a:hover {color:#fff; background:#36f;} 
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} 
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;} 
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;} 
.menu ul li a:hover ul li a ul {visibility:hidden;} 
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;} 
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;} 
.menu ul li a:hover ul li a:hover ul.left {left:-105px;} 
</style> 
<![endif]--> 
</head>
<link rel="stylesheet" type="text/css" href="head.css">
<link rel="stylesheet" type="text/css" href="reset.css">
<div class="nav clearfloat">
    <div class="head">
        <div class="head_center">
            <div class="search">
                <p><a href="">收藏网站</a>&nbsp;&nbsp;&nbsp<a href="">联系我们</a>&nbsp;&nbsp;&nbsp<a href="">管理员登录</a></p>
                <form action="info.php" name="research" method="post">
                    <input class="search_content" type="text" name="keyword" placeholder="请输入要搜索的内容" /><input type="button" onclick="research.submit()" value="搜索" />
                </form>
            </div>
        </div>
    </div>
    <div class="nav_center">
        <div class="head_nav">

<div class="menu"> 
    <ul> 
    <li><a class="hide" href="index.php">首页</a></li> 
    <li><a class="hide">部门简介</a> 
    <!--[if lte IE 6]> 
    <a href="index.html">MENUS 
    <table><tr><td> 
    <![endif]--> 
        <ul> 
            <li><a href="info.php?type=2&notice=true">学院简介</a></li>
            <li><a href="info.php?type=3&notice=true">现任领导</a></li>
            <li><a href="info.php?type=5&notice=true">机构设置</a></li>
            <li><a href="info.php?type=4&notice=true">联系我们</a></li>

        </ul> 
    <!--[if lte IE 6]> 
    </td></tr></table> 
    </a> 
    <![endif]--> 
    </li> 
    <li><a class="hide">学历教育</a> 
    <!--[if lte IE 6]> 
    <a href="../layouts/index.html">LAYOUTS 
    <table><tr><td> 
    <![endif]--> 
        <ul> 
            <li><a href="info.php?type=1">成人教育</a></li> 
            <li><a href="info.php?type=95">网络教育</a></li> 
        </ul> 
    <!--[if lte IE 6]> 
    </td></tr></table> 
    </a> 
    <![endif]--> 
    </li> 
    <li><a class="hide" >技能考证培训</a> 
    <!--[if lte IE 6]> 
    <a href="../boxes/index.html">BOXES 
    <table><tr><td> 
    <![endif]--> 
        <ul> 
            <li><a href="info.php?type=35">初级工程师</a></li> 
            <li><a href="info.php?type=12">高级工程师</a></li> 
        </ul> 
    <!--[if lte IE 6]> 
    </td></tr></table> 
    </a> 
    <![endif]--> 
    </li> 
    <li><a class="hide" >职业资格培训</a> 
    <!--[if lte IE 6]> 
    <a href="../mozilla/index.html">MOZILLA 
    <table><tr><td> 
    <![endif]--> 
    <ul> 
    <li><a href="info.php?type=8">就业指导规划</a></li> 
    <li><a href="info.php?type=39">就业培训</a></li> 
    </ul> 
    <!--[if lte IE 6]> 
    </td></tr></table> 
    </a> 
    <![endif]--> 
    </li> 
    <li><a class="hide" >创业指导</a> 
    <!--[if lte IE 6]> 
    <a href="../ie/index.html">EXPLORER 
    <table><tr><td> 
    <![endif]--> 
    <ul> 
        <li><a href="info.php?type=17">创业指导规划</a></li> 
        <li><a href="info.php?type=18">创业培训</a></li> 

    </ul> 
    <!--[if lte IE 6]> 
    </td></tr></table> 
    </a> 
    <![endif]--> 
    </li> 
    <li><a class="hide">特色培训</a> 
    <!--[if lte IE 6]> 
    <a href="../ie/index.html">EXPLORER 
    <table><tr><td> 
    <![endif]--> 
    <ul> 
        <li ><a href="info.php?type=6">特色培训指南</a></li>
        <li ><a href="info.php?type=38">特色培训通道</a></li>
    </ul> 
    <!--[if lte IE 6]> 
    </td></tr></table> 
    </a> 
    <![endif]--> 
    </li> 

    <li><a class="hide">企业定制培训</a> 
    <!--[if lte IE 6]> 
    <a href="../ie/index.html">EXPLORER 
    <table><tr><td> 
    <![endif]--> 
    <ul> 
        <li class="li-two"><a href="info.php?type=16">企业定制培训指南</a></li>
    </ul> 
    <!--[if lte IE 6]> 
    </td></tr></table> 
    </a> 
    <![endif]--> 
    </li>

    </ul> 
</div> 

        </div>
    </div>
</div>
<head>

<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div id="box">
        <ul class="list">
            <li class="current" style="opacity: 1;"><img src="pic1.jpg" width="600" height="300"></li>
            <li style="opacity: 0;"><img src="pic2.jpg" width="600" height="300"></li>
            <li style="opacity: 0;"><img src="pic3.jpg" width="600" height="300"></li>
        </ul>
    </div>
    <div id="box1">
        <ul class="count">
            <li class="current"><img src="pic1.jpg" width="50" height="50"></li>
            <li class=""><img src="pic2.jpg" width="50" height="50"></li>
            <li class=""><img src="pic2.jpg" width="50" height="50"></li>
        </ul>
    </div>

    <script>
        var box=document.getElementById('box');
        var uls=document.getElementsByTagName('ul');
        var imgs=uls[0].getElementsByTagName('li');
        var btn=uls[1].getElementsByTagName('li');
        var i=index=0; //中间量，统一声明；
        var play=null;
        console.log(box,uls,imgs,btn);//获取正确

        //图片切换, 淡入淡出效果（transition: opacity 0.8s linear）做的
        function show(a){        //方法定义的是当传入一个下标时，按钮和图片做出对的反应
            for(i=0;i<btn.length;i++ ){
                btn[i].className='';    //每个缩略图都先设置成看不见，然后把当前缩略图设置成可见。
                btn[a].className='current';
            }
            for(i=0;i<imgs.length;i++){ //把图片的效果设置和缩略图片相同
                imgs[i].style.opacity=0;
                imgs[a].style.opacity=1;
            }
        }
        //切换按钮功能，响应对应图片
        for(i=0;i<btn.length;i++){
            btn[i].index=i;  
            btn[i].onmouseover=function(){
                show(this.index);
                clearInterval(play); 
            }
        }

        //自动轮播方法
        function autoPlay(){
            play=setInterval(function(){ //这个paly是为了保存定时器的，变量必须在全局声明
                index++;
                index>=imgs.length&&(index=0);//可能有优先级问题，所以用了括号
                show(index);
            },1000)
        }
        autoPlay();//调用自动轮播的方法

        //div的鼠标移入移出事件
        box.onmouseover=function(){
            clearInterval(play);
        };
        box.onmouseout=function(){
            autoPlay();
        };
    </script>
</body>

Login界面


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <link type="text/css" rel="stylesheet" href="css/reset.css">
        <link type="text/css" rel="stylesheet" href="css/login.css">

        <title>后台登陆</title> 
    </head>
    <body>
        <div class="center" >
            <div class="login">
                <form name="login_form" action="admin/admin.php" method="post">
                    <p>湖南工业大学外国语学院登陆系统</p>
                    <input type="text" name="name" placeholder="Login Name" />
                    <input type="password" name="password" placeholder="Password" />
                    <input type="button" value="SIGN IN" onClick="login_form.submit()" />
                    <input type="checkbox" name="remember" /> Remeber Me
                </form>
            </div>
        </div>
    </body>
</html>

CSS部分
head.css

.nav{
    width:100%;
    height:188px;
    background:#f5f5f5;
}
.nav .head{
    width:100%;
    height:155px;
    background:#f5f5f5;
}
.nav_center{
    width:100%;
    height:33px;
    z-index:333;
    position:absolute;
}
.head_nav{
    width:960px;
    height:33px;
    margin:0 auto;
    background:#f5f5f5;
    border-bottom-left-radius:9px;
    border-bottom-right-radius:9px;
}
.nav .head .head_center{
    margin:0px auto;
    width:960px;
    height:155px;
    /*background:url("logo.jpg");*/
}
.head banner
{
        margin-top:10px;
        margin-left:20px;
        width:200px;
        height:100px;
}
.nav .head .head_center .search{
    width:215px;
    height:155px;
    float:right;

}
.search form{
    display:block;
    margin-top:70px;
    height:25px;
    background:#fff;
    width:212px;
}
.search p{
    margin-top:20px;
    margin-left:0px;
    color:#000000;
    font-family:"微软雅黑";
    font-size:14px;
}
.search a{
    color:#000000;
}
.search banner
{
     margin-left:0px;
     margin-top:0px;
     width:200px;
    height:150px;
}
.search form img{
    margin-top:-1px;
}
.search form img,
.search form input{
    float:left;
}
.search_content{
    width:160px;
    height:25px;
    margin-top:-1px;
    padding-left:27px;
    outline:none;
    background:url('../image/search.png') no-repeat;
    border:solid 1px #dcdcdc;

}
.search input[type="button"]{
    width:52px;
    height:25px;
    color:#fff;
    /*background:url("../image/search_back.png");*/
    background:-webkit-linear-gradient(top,#2699f2,#0061b7);
    background:-o-linear-gradient(top,#2699f2,#0061b7);
    background:-moz-linear-gradient(top,#2699f2,#0061b7);
    background:-ms-linear-gradient(top,#2699f2,#0061b7);
    border:none;
    outline:none;

}
.search input[type="button"]:hover{
    /*background:url("../image/search_back.png");
    background:-webkit-linear-gradient(top,#0061b7,#2699f2);
    background:-o-linear-gradient(top,#0061b7,#2699f2);
    background:-moz-linear-gradient(top,#0061b7,#2699f2);
    background:-ms-linear-gradient(top,#0061b7,#2699f2);*/
}
.search input[type="button"]:active{
    background:-webkit-linear-gradient(top,#0c73df,#1767c4);
    background:-o-linear-gradient(top,#0c73df,#1767c4);
    background:-moz-linear-gradient(top,#0c73df,#1767c4);
    background:-ms-linear-gradient(top,#0c73df,#1767c4);
}
#box {
            position: relative;
            width: 600px;
            height: 300px;
            background: #fff;
            border-radius: 5px;
            border: 8px solid #fff;
            margin: 50px auto;
        }

        #box .list {
            margin-top:50px;
            position: relative;
            width: 600px;
            height: 300px;
            overflow: hidden;
            border: 1px solid #ccc;
        }

        #box .list li {
            position: absolute;
            top: 0;
            left: 0;
            width: 490px;
            height: 170px;
            opacity: 0;
            transition: opacity 0.5s linear
        }

        #box .list li.current {
            opacity: 1;
        }

        #box1 .count {
            position: relative;
            margin-top:50px;
            right: 0;
            left:500;
            bottom: 5px;
        }

        #box1 .count li {
            color: #fff;
            float: left;
            width: 50px;
            height: 50px;
            cursor: pointer;
            margin-right: 5px;
            opacity: 0.5;
        }

        #box1 .count li.current {
            color: #fff;
            opacity: 1;
            font-weight: 700;
        }

reset.css

*{
    margin:0;
    padding:0;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
ol,ul,li{
    list-style:none;
}
a{
    text-decoration:none;
    color:#000;
}
a:hover{
    color:#63B8FF;
}
img{
    border:none;
    display:block;
}
.clearfloat{
    zoom:1;
}
.clearfloat:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0;
}
NaCl__
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java/php/net/pythont高校实验室管理系统设计
计算机程序设计
08-26 475
本系统带文档lw万字以上+答辩PPT+查重 如果这个题目不合适，可以去我上传的资源里面找题目，找不到的话，评论留下题目，或者站内私信我， 有时间看到机会给您发 本课题要求实现一套高校实验室管理系统的设计与实现，系统主要包括管理员：系统用户管理、高校新闻管理、教师信息管理、实验课程管理、预约实验课、实验室管理、设备信息管理、通告公告管理、报表统计管理、系统管理。用户：个人资料管理、实验室管理、预约实验课、系统简介、高校新闻、教师信息、实验设备、在线留言。教师：个人资料管理、实验课程管理、预约实验课等功能。 （
校园网建设
2201_75828890的博客
01-10 991
简单说来，网络拓扑就是网络的形状，用来描述网络设备的连通性。分层思想使得网络有一个系统化.结构化的设计，可针对不同的层次进行模块化分析，且能够支持任何拓扑结构，极大地减轻核心层交换机的负载，保证网络的整体性能，对校园网的管理和维护提供很大的便捷。另外，还要强化校园网各种应用平台的操作水平，使教师能够高效、便捷地使用校园网资源，并将现代教育技术应用到传统教学实践中，提高教学质量，达到素质教育的要求，只有提高了教师的信息素养和实践操作能力，才能够发挥出校园网的巨大潜能，使校园网的建设具有更深远的实际意义。
手把手教你用Java搭建自己的网站
热门推荐
csnewdn的专栏
11-28 3万+
手把手教你用Java搭建自己的网站 原创 2016-09-21 张昀 新浪云计算 经过一段时间的开发，更新，迭代，新浪云容器 Java 环境逐渐成熟起来，相比过去的 Java 运行环境，可用性和易用性都得到了大量的提升。同时也收到了不少用户反馈的使用问题，特此在这篇文章里综合介绍一下容器 Java 使用以及相关服务的整合。 环境说明 新浪云容器 Java 环境基
基于Nodejs+vue开发实现高校学院网站系统
BS009的博客
10-31 2498
本项目基于纯前端技术为学院开发实现了一个学院网站系统，界面美观大方，采用Nodejs+Vue+ElemenetUI开发实现，主要包含：首页展示、系部新闻、系部概况、教学科研、党建工作、学生工作、招生就业、教师风采、制度建设、技能竞赛、学院首页等功能模块。语言环境：nodejs数据库：无应用服务器：nodejs开发工具：IDEA或vscode开发技术：nodejs+vue+elementUI。
学校网站建设网站制作方案
07-14 2341
学校网站是学校的对外宣传名片，每一所学校都有自己的个性特色。建立自己学校网站是最直接的宣传手段。学校网站可以让地区内的人们了解学校，加强家校沟通和了解。同时学校网站也是师生展示风采风貌、建设校园文化的重要途径。...
杭州电子工业学院网站建设方案样本.doc
12-06
2. 在学院局域网建立基本上，将此网站办成为面向师生多功能网站，可使学校教学电脑化、网络化，能使信息更迅速、安全、精确流通。 3. 分环节建成全院行政机关工作网络体系，此体系建设体现网站功能模块、硬件设备、...
邯郸学院网站建设与管理办法.doc
07-08
首先，邯郸学院网站建设的目标是建立全面的网络信息资源，实现资源共享，提升教学、科研和管理的信息化水平，使校园网成为信息的宝库、学院形象的窗口、网络教育的基地和师生互动的平台。这一目标强调了网络在教育和...
某工程职业学院网站建设方案.doc
07-08
【某工程职业学院网站建设方案】 该文档主要涵盖了某工程职业学院的网站建设计划，旨在为学院构建一个专业且功能完善的在线平台。以下是从标题、描述以及部分内容中提炼出的关键知识点： 1. **网站目标与定位**：...
学院网站建设项目的工作分解结构
04-27
对于初学网络工程的同学，在掌握学院网站建设项目的工作分解结构很有帮助
利用MS_Project2007管理学院网站建设项目.pdf
12-12
利用MS_Project2007管理学院网站建设项目.pdf
JavaScript 音乐播放器及其源代码.zip
07-22
项目：带有源代码的 JavaScript 音乐播放器 JavaScript 音乐播放器是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这个项目很有趣。在这里，用户可以通过单击不同颜色的图块来播放不同类型的曲调，并欣赏音乐的声音。此外，用户可以像钢琴一样使用它们来生成不同的曲调。   项目制作 音乐播放器项目仅包含 HTML、CSS 和 JavaScript。谈到该系统的功能，用户可以播放不同类型的音乐。您只需单击不同颜色的图块即可收听音乐。该项目包含大量 JavaScript，用于使项目正常运行。 如何运行该项目？ 要运行此项目，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要运行此系统，首先，通过单击 index.html 文件在浏览器中打开项目。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
鸿蒙开发健康app案例
07-22
该项目是记录用户日常饮食情况，以及针对不同食物摄入营养不同会有对应的营养摄入情况和日常运动消耗情况，用户可以自己添加食品以及对应的热量。 主要有登陆界面，饮食统计页面，食物列表页 登陆界面首先是进入欢迎界面，然后加载首选项，用户同意授权进入首页，否则弹出用户协议，同意保存首选项，否则就跳出app 饮食统计界面，进入首页之后，用户可以选择日期和获取当前日期来加载饮食记录，饮食记录会展示热量统计，营养统计和分组展示饮食记录 食物列表页展示食物列表以及可以填写食物数量和跳转到食物详情页
1_2_1_pointcloud_based_occupancy_gride_map.launch.py
07-22
1_2_1_pointcloud_based_occupancy_gride_map.launch.py
USB教程与源码.rar
07-22
USB教程与源码.rar
巴比达内网穿透技术-内网穿透
07-22
巴比达内网穿透技术-内网穿透
基于python的网页自动化工具 既能控制浏览器，也能收发数据包
07-22
基于python的网页自动化工具。既能控制浏览器，也能收发数据包。可兼顾浏览器自动化的便利性和requests的高效率。功能强大，内置无数人性化设计和便捷功能。语法简洁而优雅，代码量少。
ppp协议实验路由器中的一种实验
最新发布
07-22
ppp协议实验路由器中的一种实验
Matplotlib styles for scientific plotting
07-22
Matplotlib styles for scientific plotting
玩机社区系统源码 2024年最美社区源码 全开源 带后端.zip
07-22
玩机社区系统源码 | 2024年最美社区源码 全开源 带后端

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值