503.大学生HTML5期末大作业 —【水墨风小学学校网站(页)】 Web前端网页制作 html5+css3+js-优快云博客

欢迎来到我的优快云主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-优快云博客

5000+网页案例完整代码，主题涵盖30+种类型:

一、网页简介

本实例应用html5+css3+js：导航菜单、图片轮翻、图片特效等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含6个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>某某学校网站模板</title>
<mvc:annotation-driven enable-matrix-variables="true"></mvc:annotation-driven>
<context:component-scan base-package="com.th.action"></context:component-scan>
<mvc:default-servlet-handler/>
<link href="css/common.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide2.js"></script>
<script type="text/javascript">
$(function(){
   $('#index-news-focus').owlCarousel({
       items: 1,
       navigation: true,
       navigationText: ["上一个","下一个"],
       autoPlay: true,
       stopOnHover: true
   }).hover(function(){
       $('.owl-buttons').show();
   }, function(){
       $('.owl-buttons').hide();
   });
});
</script>

<link rel="stylesheet" href="wow/animate.min.css"/>
<script type="text/javascript" src="wow/wow.min.js"></script>
<script>
   if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
       new WOW().init();
   };
   $(function(){

   });
</script>

</head>

<body>

<header>
   
<nav>
<div class="top">
   <div class="text">
   <span class="l">欢迎光临某某学校网站！</span>
<span class="r">咨询电话：010-0000000</span>
</div>
</div>
<div class="hn-main">
   <ul>
   <li>
   <a href="index.html">网站首页</a>
<a href="about.html">关于我们</a>
<a href="images-list.html">校园风采</a>
<a href="about.html">校园文化</a>
</li>
<a href="index.html" class="logo"><span><img src="images/logo.png"></span></a>
<li>
   <a href="title-list.html">新闻资讯</a>
<a href="about.html">荣誉资质</a>
<a href="about.html">招生介绍</a>
<a href="contact.html">联系我们</a>
</li>
</ul>
</div>
   </nav>


<div class="index-banner-slide">
<div class="banner-content">
<div class="banner-slide">
<div class="banner-slide-circle hd">
<ul>
<li class="on"></li>
<li></li>
<li></li>
</ul>
</div>
<div class="banner-slide-image bd">
<ul>
<li>
<a href="#">
<img src="images/banner1.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/banner2.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="images/banner3.jpg" alt="">
</a>
</li>
</ul>
</div>
</div>
<div class="banner-hidden">
<div class="banner-background-01"></div>
<div class="banner-background-02"></div>
</div>
</div>
</div>

</header>

<div class="index-news">

   <div class="in-text">
   <h2>站内资讯</h2>
<a href=""><span>重磅!2019年保定主城区中小学招生划片方案出台!你想知道的都在这!</span><em>06/18</em></a>
<a href=""><span>布基纳法索总统出席中国援布100所小学项目开工仪式</span><em>06/18</em></a>
<a href=""><span>大山深处的小学老师:39年来培养200位学生走出大山</span><em>06/18</em></a>
<a href=""><span>北京小学入学不是难题,家门口多了不少好学校</span><em>06/18</em></a>
<a href=""><span>家长注意!南昌22所小学招生学区范围公布!今年有变</span><em>06/18</em></a>
<a href=""><span>今年九月将投入使用!金山小学新建项目已完成竣工验收</span><em>06/18</em></a>
<a href=""><span>合肥包河区学区出炉 2019年中小学招生方案发布(图)</span><em>06/18</em></a>
<a href=""><span>重要提醒!杭州公办、民办小学录取时间表来了</span><em>06/18</em></a>
</div>

<div class="in-text">
   <h2>相关新闻</h2>
<a href=""><span>钱塘新区年度小学招生方案出炉,20余盘密集领证,新房供应开启火热</span><em>06/18</em></a>
<a href=""><span>青岛新建学校再传好消息!36班双山小学年底开建</span><em>06/18</em></a>
<a href=""><span>注意啦!金凤区中小学学区划片、入学办法来了!银川...</span><em>06/18</em></a>
<a href=""><span>小学教室也去“抖”? 人民日报怒了</span><em>06/18</em></a>
<a href=""><span>明天开始,柯城区小学入学网上报名!这份操作手册不能不看~</span><em>06/18</em></a>
<a href=""><span>2019年社会学年会性别论坛 “回溯与前瞻</span><em>06/18</em></a>
<a href=""><span>渭南高新小学开展“文明从排队礼让开始 ”系列教育活动</span><em>06/18</em></a>
<a href=""><span>中小学老师“阴盛阳衰”,校外培训机构却“阳盛阴衰”,原因为何</span><em>06/18</em></a>
</div>

<div class="in-flashbox">
<div class="focusNew_out flashlist">
<div class="f_out">
<span class="f_out_txt"><a href="http://www.17sucai.com/">忠庄镇忠庄小学乡村学校少年宫的孩子在学校练习口风琴</a></span>
<a href="http://www.17sucai.com/"><img alt="忠庄镇忠庄小学乡村学校少年宫的孩子在学校练习口风琴" src="images/01.jpg" /></a>
</div>
<div class="f_out">
<span class="f_out_txt"><a href="http://www.17sucai.com/">内马尔飞了起来</a></span>
<a href="http://www.17sucai.com/"><img alt="内马尔飞了起来" src="images/02.jpg" /></a>
</div>
<div class="f_out">
<span class="f_out_txt"><a href="http://www.17sucai.com/">曼朱基齐侧身凌空</a></span>
<a href="http://www.17sucai.com/"><img alt="曼朱基齐侧身凌空" src="images/03.jpg" /></a>
</div>
</div>

<div class="f_tabs">
<span class="hover">1</span>
<span>2</span>
<span>3</span>
</div>
</div>
</div>

<div class="index-show">
<div class="main">
<h2>校园风采</h2>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */

/**/
.index-news{
   width:1240px;
   height:auto;
   overflow:hidden;
   margin:0 auto 0 auto;
   padding-top:622px;
}
/* in-flashbox */
.in-flashbox{width:460px;height:335px;overflow:hidden;position:relative; float:right;}
.in-flashbox .focusNew_out{width:460px;height:335px;position:relative;z-index:2}
.in-flashbox .focusNew_out .f_out_txt{height:50px;width:536px;display:block;position:absolute;bottom:0;left:0;background-color:#000000;opacity:0.8;color:#d6d6d6;font-size:20px;font-family:"微软雅黑";line-height:50px;padding:0 150px 0 20px;overflow:hidden}
.in-flashbox .focusNew_out .f_out_txt a{color:#d6d6d6;}
.in-flashbox .f_tabs{width:140px;height:35px;position:absolute;bottom:15px;right:0px;z-index:100;}
.in-flashbox .f_tabs span{width:23px;height:19px;background-color:#474747;float:left;margin-right:3px;text-align:center;color:#f0f0f0;margin-top:15px;cursor:pointer}
.in-flashbox .f_tabs span.hover{height:19px;background-color:#B51017;margin-top:0;padding-top:15px;cursor:pointer}

/* in-text */
.in-text{
   width:360px;
   height:335px;
   float:left;
   margin-right:30px;
}
.in-text h2{
   display:block;
   width:130px;
   height:42px;
   margin-bottom:10px;
   background-image: url(img/lanmu-bj.png);
   text-align:center;
   font:16px/42px 'microsoft yahei';
   color:#333;
   font-weight: bold;
}
.in-text a{
   display:block;
   width:360px;
   height:34px;
   overflow:hidden;
   border-bottom:1px dashed #CCC;
   transition-duration:0.2s;
}
.in-text a:hover{
   border-bottom:1px dashed #ce2f2b;
}
.in-text a span{
   display:block;
   width:300px;
   height:34px;
   float:left;
   overflow:hidden;
   font:15px/34px 'microsoft yahei';
   color:#333;
   transition-duration:0.2s;
}
.in-text a:hover span{
   color:#ce2f2b;
}
.in-text a em{
   display:block;
   width:60px;
   height:34px;
   float:left;
   font:14px/34px 'microsoft yahei';
   color:#666;
   text-align:right;
   transition-duration:0.2s;
}
.in-text a:hover em{
   font:18px/34px 'microsoft yahei';

}

/*index-show*/
.index-show{
   width:100%;
   height:795px;
   overflow:hidden;
   margin:20px auto 0 auto;
   background:url(img/index-show-bj.jpg) no-repeat center top;
}
.index-show .main{
   width:1240px;
   height:795px;
   margin:0 auto;
}
.index-show .main h2{
   display:block;
   width:130px;
   height:42px;
   margin-bottom:10px;
   background-image: url(img/lanmu-bj.png);
   text-align:center;
   font:16px/42px 'microsoft yahei';
   color:#333;
   font-weight: bold;
}

.colee-item{
   display:block;
   width:260px;
   height:240px;
   overflow:hidden;
   margin-right:10px;
}

.class-list{
   width:1240px;
   height:382px;
   margin:60px auto 0 auto;
   text-align:center;
}
.class-list .item{
   display:inline-block;
   vertical-align: middle;
   width:280px;
   height:372px;
   margin:0 12px;
   background: rgba(255,255,255, 0.8);

...