学院网站的建设
来源：互联网 发布：淘宝二级词是什么 编辑：程序博客网 时间：2024/05/02 02:25
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;}阅读全文
0 0
- 学院网站的建设
- 网站建设的常识
- 网站建设的开始！
- 网站的内部建设
- 网站建设的要素
- 网站建设的发展前景
- 网站建设的流程
- 网站建设的流程
- 应用Struts的网站建设
- WAP网站的建设心得
- 网站建设的相关技巧
- 完整的网站建设教程
- 个人网站的建设方案
- 我们的网站建设流程
- 企业网站建设的误区
- 网站建设的几个细节
- 网站建设的几个步骤
- 网站建设的经验分享
- 简单好玩的算法（二）
- JDBC基础
- CALayer与iOS动画 讲解及使用
- 7.3
- [杜教筛] 51Nod 1244: 莫比乌斯函数之和
- 学院网站的建设
- boost log库学习使用四（关于logger）
- 位操作－leetcode 231 Power of Two
- caffe框架特征提取的dll封装
- href="javascript:xxx(this);"和onclick="javascript:xxx(this);"的区别
- （10）break,continue用法
- 第三章 Redis/SSDB+Twemproxy安装与使用
- Intellij中出现Connot resolve Struts Package 'struts-default'错误的原因
- 【Linux 虚拟机】Windows 7下用VMware Workstation 10虚拟机安装 Ubuntu 14.04
