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>  <a href="">联系我们</a>  <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¬ice=true">学院简介</a></li>
<li><a href="info.php?type=3¬ice=true">现任领导</a></li>
<li><a href="info.php?type=5¬ice=true">机构设置</a></li>
<li><a href="info.php?type=4¬ice=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;
}