简单的网站首页

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网站首页</title>
<style type="text/css">
   body{background:url("images/bg.png") top center no-repeat;font-size:12px;font-family:宋体;color:#999999;}
   #main{width:960px;margin:0 auto;}
   .wb{width:84px;height:20px;}
   header span{margin-left:250px;}
   header{margin-top:20px;}
   input[type="button"]{color:#999999;border:0px;width:56px;height:20px;}
   #content{width:960px;background-color:#FFFFFF;height:680px;margin-top:180px;opactiy:0.5;}
   nav{margin-left: 46px;}
   nav ul li{list-style:none;float:left;line-height:60px;height:60px;width:92px;font-family:微软雅黑;font-size:16px;color:#333333;}
   h1 span{margin-left:370px;font-family:宋体;font-size:12px;color:#999999;}
   h1{font-family:微软雅黑;font-size:16px;color:#ff6633;margin-left:46px;}
   #left{width:530px;float:left;height: 500px}
   /*#left ul li{width:500px;list-style:none;font-family:宋体;font-size:13px;color:#333333;line-height:200%;margin-left: 46px;}
   .rq{font-family:"宋体";font-size:13px;color:#cccccc;display:block;float:right;}*/
   .tp{margin-top:46px;margin-left:45px;}
   img[id="img2"]{margin-left:10px;}
   #right{float:left;width:380px;height:100px;}
   /*#right img{margin-left:50px;margin-top:20px;}*/
   #right h4{margin-left:180px;font-family:宋体;font-size:13px;color:#666666;}
  /* #right ul{margin-left: 50px;margin-top: 30px;}
   #right ul li{list-style:none;font-size:13px;color:#333333;line-height:180%;}*/
   footer img{margin-top:20px;width: 100%;position: relative;}
   #copy{text-align:center;margin-top: 10px;margin-right:300px;}
   a{
				text-decoration: none;
				display: block;
			}
nav	ul li ul {
				display: none;

			}
nav	ul li ul li{
	float: none;
	background-color:#FFFFFF;
}
*{
		margin: 0px;
		padding: 0px;
	}
	.slideBox {
  /*  margin:50px auto;*/
  margin-top: 10px;
  margin-left: 50px;
    width:300px;
    height:280px;
    box-shadow:2px 2px 10px #C38DD4;
    border-radius:20px;
    position:relative;
    overflow:hidden;
}
.slideBox ul {
    position:relative;
    width:2000px;}
.slideBox ul li {
    float:left;
    width:300px;
    height:480px;
    position:relative;
}
.spanBox {
    position:absolute;
    width:300px;
    height:20px;
    bottom:10px;
    left:80px;
}
.spanBox span {
    width:18px;
    height:18px;
    margin-left:5px;
    background-color:rgba(201,178,207,1.00);
    float:left;
    line-height:16px;
    text-align:center;
    text-shadow:2px 2px 2px #C5EBF0;
    font-family:cabin-sketch;
    font-size:15px;
}
.slideBox .spanBox .active {
    background-color:rgba(155,83,244,0.79);
    border:solid 1px #BEEBEC;
    border-radius:4px;
}
.prev {
    position:absolute;
    left:0px;
    top:320px;
    float:left;
    border-left:solid 1px rgba(251,245,246,1.00);
    opacity:0.5;
}
.next {
    width:15px;
    height:50px;
    position:absolute;
    right:0px;
    top:320px;
    float:right;
    border-right:solid 1px rgba(245,237,237,1.00);
    opacity:0.5
}
.notice ul li{list-style:none;font-family:宋体;font-size:13px;color:#333333;line-height:100%;margin-left: 50px;margin-top: 10px;}
</style>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</head>
<body>
    <div id="main">
	   <header>
	       <img src="images/logo.png">
		   <span>班级个人:<input type="text" class="wb" id="name">
		         密码：<input type="password" class="wb" id="mima">
				 <input type="button" value="登陆" id="dl">
				 <input type="button" value="注册" id="zc">
		   </span>
	   </header>
	   <div id="content">
	      <nav>
		      <ul>
			     <li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">首页</a>
                  <ul>
				<li><a href="#">栏目二</a></li>
				<li><a href="#">栏目二</a></li>
				<li><a href="#">栏目二</a></li>
			     </ul>
			     </li>
				 <li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">我们</a>
                <ul>
				<li><a href="#">栏目二</a></li>
				<li><a href="#">栏目二</a></li>
				<li><a href="#">栏目二</a></li>
			     </ul>
				 </li>
				 <li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">班级公告</a>
                 <ul>
	   			<li><a href="#">栏目二</a></li>
				<li><a href="#">栏目二</a></li>
				<li><a href="#">栏目二</a></li>
			     </ul>
				 </li>
				 <li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">班级活动</a>
                 <ul>
	   			<li><a href="#">栏目二</a></li>
				<li><a href="#">栏目二</a></li>
				<li><a href="#">栏目二</a></li>
			     </ul>
				 </li>
				<li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">班级荣誉</a>
                 <ul>
	   			<li><a href="#">栏目二</a></li>
				<li><a href="#">栏目二</a></li>
				<li><a href="#">栏目二</a></li>
			     </ul>
				 </li>
				 <li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">学习交流</a>
                <ul>
				<li><a href="#">栏目二</a></li>
				<li><a href="#">栏目二</a></li>
				<li><a href="#">栏目二</a></li>
			     </ul>
				 </li>
				 <li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">男生区</a>
                 <ul>
	   			<li><a href="#">栏目二</a></li>
				<li><a href="#">栏目二</a></li>
				<li><a href="#">栏目二</a></li>
			     </ul>
				 </li>
				 <li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">女生区</a>
                 <ul>
	   			<li><a href="#">栏目二</a></li>
				<li><a href="#">栏目二</a></li>
				<li><a href="#">栏目二</a></li>
			     </ul>
				 </li>
				<li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">班级相册</a>
                 <ul>
	   			<li><a href="#">栏目二</a></li>
				<li><a href="#">栏目二</a></li>
				<li><a href="#">栏目二</a></li>
			     </ul>
				 </li>
			  </ul>
		  </nav>
		  <div>
		      <img src="images/line.png">
		  </div>
		  <div id="left">
		       <h1>班级公告<span>更多>></span></h1>
           <div id="load"></div>
		       <!-- <ul>
			      <li>机关分工会组织举办“教职工冬季健步走”比赛<span class="rq">2017-12-06</span></li>
			      <li>我校在“全国百强暑期实践团队”评选活动中取得佳绩<span class="rq">2017-12-06</span></li>
				  <li>我校“炫彩中医”短剧曲艺大赛决赛圆满落幕<span class="rq">2017-12-06</span></li>
				  <li>我校2017年教职工乒乓球团体赛圆满落幕<span class="rq">2017-12-07</span></li>
				  <li>谭备战教授为我校业余团校暨学生干部学习十九大培训班作主题讲座<span class="rq">2017-12-07</span></li>
				  <li>我校在2017年郑东新区大学生志愿者防艾知识竞赛中获得一等奖<span class="rq">2017-12-08</span></li>
				  <li>“绿橘子乐队rock演奏之夜”演唱会热火校园 <span class="rq">2017-12-08</span></li>
				  <li>“我校举办“校园文化形象大使”选拔大赛 <span class="rq">2017-12-09</span></li>
				  <li>我校加入全国中医药研究生创新发展联盟<span class="rq">2017-12-09</span></li>
				  <li>我校82级校友王耀献荣获2017年顾氏和平奖 <span class="rq">2017-12-10</span></li>
			   </ul>	 -->
                <div class="tp">
				   <img src="images/nan.png">
				   <img src="images/nv.png" id="img2">
                </div>
		  </div>
		  <div id="right">
		  	<h1>班级活动</h1>
			   <div class="slideBox">
    <ul>
    <li><img src="images/0.png"  width="300" height="280"/></li>
    <li><img src="images/1.gif"  width="300" height="280"/></li>
    <li><img src="images/2.png"  width="300" height="280"/></li>
    </ul>
    <div class="spanBox">
    <span class="active">1</span>
    <span>2</span>
    <span>3</span>
    </div>
    <div class="prev"><img src="images/left_arrow.jpg" width="15" height="50" /></div>
    <div class="next"><img src="images/right_arrow.jpg" width="15" height="50" /></div>
</div>
<div class="notice">
			   <ul>
			      <li>关于召开三门峡市教育系统信息化建设的通知</li>
				  <li>关于召开三门峡市教育系统信息化建设</li>
				  <li>关于召开三门峡市教育系统信息化</li>
				  <li>关于召开三门峡市教育系统信息化建设的通知</li>
				  <li>关于召开三门峡市教育建设的通知</li>
				  <li>关于召开三门峡市教育系统信息化建设的通知</li>
			   </ul>
		  </div>
		   <footer>
	          <div>
		         <img src="images/bottom-line.png" width="960">
		      </div>
			  <div id="copy">
			      主办：河南中医药大学2015级信息管理与信息系统班
			  </div>
	     </footer>
	   </div>
	</div>
	<script type="text/javascript">
	function showsubmenu(li){
		var submenu=li.getElementsByTagName("ul")[0];
		submenu.style.display="block";
	}
	function hidesubmenu(li){
		var submenu=li.getElementsByTagName("ul")[0];
		submenu.style.display="none";
	}
</script>
<script type="text/javascript">

	$(document).ready(function(){
     var slideBox = $(".slideBox");
     var ul = slideBox.find("ul");
     var oneWidth = slideBox.find("ul li").eq(0).width();
     var number = slideBox.find(".spanBox span");            //注意分号 和逗号的用法
     var timer = null;
     var sw = 0;
     //每个span绑定click事件，完成切换颜色和动画，以及读取参数值
     number.on("click",function (){
     $(this).addClass("active").siblings("span").removeClass("active");
     sw=$(this).index();
     ul.animate({
            "right":oneWidth*sw,    //ul标签的动画为向左移动；
               });
     });
     //左右按钮的控制效果
     $(".next").stop(true,true).click(function (){
         sw++;
         if(sw==number.length){sw=0};
         number.eq(sw).trigger("click");
         });
    $(".prev").stop(true,true).click(function (){
        sw--;
        if(sw==number.length){sw=0};
        number.eq(sw).trigger("click");
        });
    //定时器的使用，自动开始
    timer = setInterval(function (){
        sw++;
        if(sw==number.length){sw=0};
        number.eq(sw).trigger("click");
        },2000);
    //hover事件完成悬停和，左右图标的动画效果
    slideBox.hover(function(){
        $(".next,.prev").animate({
            "opacity":1,
            },200);
        clearInterval(timer);
        },function(){
            $(".next,.prev").animate({
                "opacity":0.5,
                },500);
        timer = setInterval(function (){
        sw++;
        if(sw==number.length){sw=0};
        number.eq(sw).trigger("click");
        },2000);
            })
})
</script>
<script type="text/javascript">

  $(document).ready(function(){
      $.ajax({
          type:"get",
          url:"9.xml",
          dataType:"xml",
          timeout:1000,
          cache:false,//禁止缓存
          success:function(data){
            var frag=$("<ul/>");
            $(data).find("notice").each(function(){
                         var content=$(this).children("content");
                         var data=$(this).children("data");
                         content_value=content.text();
                         data_value=data.text();
                         frag.append("<li>"+content_value+"<span>"+data_value+"</span></li>");
            });
                frag.appendTo("#load");
                $("#load ul li").css({
                  "list-style-type":"none",
                  "width":"500px",
                  "font-family":"宋体",
                  "font-size":"13px",
                  "color":"#333333",
                  "line-height":"200%",
                  "margin-left": "46px"
                  });
                      $("#load  span").css({
                       "font-family":"宋体",
                       "font-size":"13px",
                       "color":"#cccccc",
                       "float":"right"
                      });
          }
        });
      })
</script>
</body>

　　

原文地址：https://www.cnblogs.com/qfdy123/p/8151010.html

时间： 2024-07-31 05:22:46

简单的网站首页的相关文章

CSS美化简单网站首页

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网站首页美化版</title> <style> .top{ float: left; width: 33%; height: 65px; } .amenu{ color: white; text-decoration: none; line-height: 50px; } .price

Nginx简单实现网站的负载均衡

在大型网站搭建时,都会考虑如果用户量每日不断增加,大量的并发访问,会不会给网站.数据库带来崩盘的灾难.今天我们就讨论一下,现实中如何解决这些问题的一套最为容易实现的方案. 控制并发,大家都会首先考虑的就是分布式.负载均衡等经常听到的It名词.那网站如何才能实现负载均衡呢,除了世面上的一些负载均衡器外,我们有哪些软件上的解决方案呢,这时候,Nginx.lvs 等名词就会在脑海中浮现.那这些负载均衡的软件如何使用呢,如何读者是.net工程师,大家会选择Nginx,因为它支持Windows服务器,这时

织梦DEDECMS网站首页如何实现分页翻页

织梦DEDECMS模板网站首页如何实现首页分页和翻页 方法如下:(三种方法,自己选择一种来实现分页吧) 第一种:调用ajax和参数的(不推荐)1.必须在DEDE首页模板中的<head></head>中引入(详细看你的默认模板) <script language="javascript" type="text/javascript" src="{dede:global.cfg_cmsurl/}/include/dedeajax2

scrapy带cookie登录简单的网站

在爬数据的时候,登录一直是一个比较麻烦的问题.我也一直在网上找过各种资料,都挺麻烦的,因为需要分析各种http过程,感觉太麻烦了. 不过最近在一个同学的帮助下,找到了使用cookie登录的方法.因为带cookie登录的话,server会认为你是一个已登录的用户,所以就会返回给你一个已登录的内容 本文介绍的方法,是使用python的scrapy框架登录的方法.而且也只能登录一些比较简单的网站,对于那种大型的网站,因为目前我也还没有验证过,所以不敢保证.但是经过验证,登录豆瓣是万试万灵的. 1. 获

保持url唯一性 解决多个网站首页问题

原文地址:http://www.seowhy.com/bbs/thread-2694339-1-1.html 在网站SEO优化过程中,经常会遇到这样或者那样的常见技术型问题,达闻现将此类常见技术问题总结,在接下来的几期内分析此类问题发生的原因影响及具体解决方案,今天达闻要分享的是在SEO优化过程中,网站存在多个首页的解决方案. 什么是多个网站首页? 一般情况下,我们可以通过www.hfssw.com/ 访问网站的首页,但网站在建站时未考虑到SEO元素,因此可能存在以下的地址都对应网站首页,如:

如何增强你的SharePoint 团队网站首页

如何增强你的SharePoint 团队网站首页 团队站点是不是很乏味?只是一个站点,里边有一些文档.列表然后可能一个日历.下面告诉你一个非常简单的方法,可以让你的团队站点变得稍微不错的外观. 比如说现在你的站点可能是这样,首页上放一个日历: 这个外观简单且高效,但是有点儿平淡.并且标题几乎要淡入到背景色里了不是吗? 编辑此Web部件,在高级设置下,设置目录图标图像URL和标题图标图像相同: 保存一下,看看有什么变化没? 哈哈,现在日历上面显示了一个小图标,在标题左侧,然后将标题稍微在页面中突出了

一个优秀的网站首页是如何设计的？

网站首页是用户进入你网站看到的第一面,如果这第一面给用户的印象不好,不够吸引,那样会让用户没有了继续浏览的欲望.一个不够吸引人的网站首页,就算你网站推广做的再好,IP量再高,但是往往就是因为网站首页设计的不够好.不够精致.不够吸引,从而导致了网站转化率不高.网站首页的设计不但在网站建设过程中很重要,在网站优化中也起到了关键作用.那么一个优质的网站首页该怎么样设计呢?一个震撼的网站首页用什么设计呢? 网站首页无论是放在网站设计,还是网站建设和网站优化中都是首要针对的步骤.不管是企业网站.个人网站,

基于jQuery的网站首页宽屏焦点图幻灯片

今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <!-- index-focus begin --> <div class="sliderWrap"> <section class="banner-TAL"> <div class

用Bootstrap知识写简易版Bootstrap官方网站首页

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BootStrap网站首页</title> <link rel="stylesheet" type="text/css" href="js/bootstrap.css"/> <script type="text