first commit

历届学生/刘合群/学校官网实战/css/index.css

@@ -0,0 +1,103 @@
+/* 首页的css样式 */
+.school-news {
+  margin-top: 40px;
+
+}
+.school-news-content {
+  height: 500px;
+
+}
+.news-content-left{
+  width: 64%;
+}
+.news-content-right{
+  width: 32%;
+}
+
+.content-left-top {
+  width: 100%;
+  margin-bottom: 24px;
+  border-bottom: 3px solid #8f000b;
+}
+.content-left-top h3 {
+  height: 43px;
+}
+
+.content-left-bottom {
+  width: 100%;
+}
+.left-bottom-img img {
+  max-height: 180px;
+  overflow: hidden;
+}
+.left-bottom-img a {
+  font-size: 16px;
+  line-height: 22px;
+  padding: 6px 0;
+  display: inline-block;
+  cursor: grab !important;
+}
+.left-bottom-img a:hover {
+  color: #EC3C1B;
+}
+.left-bottom-img .news_infos {
+  color: #727272;
+  font-size: 12px;
+  line-height: 20px;
+}
+.left-bottom-img .news_infos:hover{
+  color: #727272;
+}
+.left-bottom-img {
+  width: 39%;
+}
+.left-bottom-new-list {
+  width: 57%;
+}
+.left-bottom-new-list ul li{
+  height: 30px;
+  line-height: 30px;
+}
+.left-bottom-new-list ul li a{
+  width: 80%;
+  display: inline-block;
+  float: left;
+  color: #333;
+}
+.left-bottom-new-list ul li span{
+  display: inline-block;
+  width: 10%;
+  float: right;
+  color: #999;
+}
+.tab-title {
+  width: 100%;
+  height: 43px;
+  border-bottom: 3px solid #ccc;
+  margin-bottom: 24px;
+}
+.tab-title li {
+  display: inline-block;
+  height: 43px;
+  line-height: 43px;
+  float: left;
+  font-size: 14px;
+  color: #333;
+  cursor: default;
+  width: 97px;
+  font-size: 18px;
+  padding-right: 15px;
+  text-align: center;
+}
+.tab-title .selected{
+  color: #2b2b2b;
+  border-bottom: #8f000b 3px solid;
+  background-color: #06C;
+  border-radius: 5px 5px 0 0;
+}
+.tab-content .tab-content-item {
+  display: none;
+}
+.item-active {
+  display: inline-block !important;
+}

历届学生/刘合群/学校官网实战/css/public.css

@@ -0,0 +1,128 @@
+/* 一些公共结构的样式 */
+
+@charset "UTF-8";
+
+body,ul,ol,h3,h2{
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: #EDEADF;
+  font: 14px/1 Microsoft YaHei, STHeiti STXihei, Microsoft JhengHei, Helvetica, Tohoma, Arial;
+}
+
+a {
+  text-decoration: none;
+}
+
+ul li,
+ol li {
+  list-style: none;
+}
+
+
+
+.header-drak-nav {
+  height: 40px;
+  background: #262626;
+}
+.nav-left li{
+  float: left;
+}
+
+.nav-right li{
+  float: right;
+}
+
+.nav-left li,
+.nav-right li{
+  height: 40px;
+  text-align: center;
+  line-height: 40px;
+}
+.nav-left li a,
+.nav-right li a{
+  color: #aaaaaa;
+  padding: 5px 10px;
+}
+.nav-right li a{
+  padding-right: 25px;
+  font-family: "Microsoft Yahei";
+}
+
+.header-red-nav{
+  background: #89010b;
+  padding: 10px 0;
+  height: 70px;
+}
+
+.red-nav-logo img {
+  margin-left: 10px;
+}
+
+.red-nav-menu{
+  height: 72px;
+  line-height: 72px;
+}
+
+.red-nav-menu img,
+.red-nav-menu input{
+  vertical-align: middle;
+}
+
+.search-submit {
+  width: 30px;
+  height: 26px;
+  border: none;
+  outline: none;
+  background: url("./../img/search-btn.png") no-repeat center center;
+}
+
+.red-nav-menu .search {
+  width: 0px;
+  height: 30px;
+  border: none;
+  outline: none;
+  color: #333;
+  font-size: 14px;
+  padding: 0 0 0 0;
+  line-height:30px;
+  background: #fff;
+  transition: all 1s ease 0s;
+}
+
+.header-qred-nav {
+  height: 58px;
+  background-color: #9a0813;
+  border-top: 1px solid #9a0813;
+}
+.header-qred-nav .items {
+  text-align: center;
+  width: 112px;
+  margin-left: 12px;
+  margin-right: 40px;
+  height: 58px;
+  line-height: 58px;
+  background: url("../img/navbar-bg.png")  98px center no-repeat;
+}
+.header-qred-nav .items .item-text{
+  color: #fff;
+  font-size: 18px
+}
+.header-qred-nav li { 
+  float: left;
+}
+.dropdown li {
+  margin: 0 auto;
+  width: 100%;
+}
+
+.dropdown {
+  display: none;
+  text-align: center;
+  width: 112px;
+  position: absolute;
+  z-index: 116;
+  background: #f2f2f2;
+}

历届学生/刘合群/学校官网实战/css/swiper.css

@@ -0,0 +1,70 @@
+/* 轮播图的样式 */
+.banner {
+  position: relative;
+  width: 100%;
+  height: 399.38px;
+  overflow: hidden;
+}
+.swiper-content {
+  position: relative;
+  height: 100%;
+  width: 2000%;
+  transition: all .7s;
+}
+
+.swiper-content li {
+  position: relative;
+  height: 399.38px;
+  float: left;
+}
+
+.swiper-content li img{
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-spot {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+}
+.swiper-spot li{
+  float: left;
+  width: 10px;
+  height: 10px;
+  border-radius: 100%;
+  background: #999;
+  margin-right: 5px;
+}
+.swiper-action {
+  position: absolute;
+  top: 50%;
+  margin-top: -25px;
+  width: 100%;
+  display: none;
+}
+.banner:hover .swiper-action {
+  display: inline-block;
+}
+
+.swiper-action .action-left,
+.swiper-action .action-right{
+  width: 30px;
+  height: 50px;
+  line-height: 50px;
+  background: #000;
+  text-align: center;
+  color: #fff;
+  cursor: pointer;
+}
+.swiper-action .action-left {
+  float: left;
+}
+
+.swiper-action .action-right {
+  float: right;
+}
+
+.active {
+  background: #ff4019 !important;
+}

历届学生/刘合群/学校官网实战/css/utils.css

@@ -0,0 +1,19 @@
+@charset "UTF-8";
+
+.width-100 {
+  width: 100%;
+}
+
+.wp-inner {
+  width: 1115px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.left {
+  float: left;
+}
+
+.right {
+  float: right;
+}

历届学生/刘合群/学校官网实战/index.html

@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>安徽工商职业学院</title>
+  <link rel="stylesheet" href="css/public.css">
+  <link rel="stylesheet" href="css/utils.css">
+
+  <link rel="stylesheet" href="./css/swiper.css">
+
+  <link rel="stylesheet" href="css/index.css">
+  <style>
+    .ShowSearch {
+      width: 142px !important;
+      padding: 0 0 0 5px !important;
+    }
+  </style>
+</head>
+<body>
+  
+  <!-- 头部 -->
+  <div class="header width-100">
+    <!-- 最顶部黑色导航 -->
+    <div class="header-drak-nav width-100">
+      <div class="wp-inner">
+        <ul class="nav-left">
+          <li><a target="_blank" href="http://www.ahbvc.cn/1372/list.htm" title="学生">学生</a></li>
+          <li><a target="_blank" href="http://www.ahbvc.cn/1373/list.htm" title="教工">教工</a></li>
+          <li><a target="_blank" href="http://www.ahbvc.edu.cn/xqhzc/2014/1224/c1212a14257/page.htm" title="校友">校友</a></li>
+          <li><a target="_blank" href="http://www.ahbvc.edu.cn/" title="访客">访客</a></li>
+          <li><a target="_blank" href="http://wxpt.ahbvc.cn:8080/wxpt/a/xzxx/XxXjxxb/getXjmhckList" title="校长信箱">校长信箱</a></li>
+        </ul>
+        <ul class="nav-right">
+          <li><a target="_blank" href="" title="English">English</a></li>
+        </ul>
+      </div>
+    </div>
+    <!-- 最顶部深红色导航 -->
+    <div class="header-red-nav">
+      <div class="wp-inner">
+          <!-- 版权logo -->
+          <div class="red-nav-logo left">
+            <img src="./img/logo.png" alt="" srcset="">
+          </div>
+          <!-- 搜索框 -->
+          <div class="red-nav-menu right">
+            <img src="./img/xiaoxun2.png" alt="">
+            <input class="search" type="text" name="" id="" placeholder="Search...">
+            <input onfocus="getShowSearch()" onblur="leaveShowSearch()" type="submit" class="search-submit" value="">
+          </div>
+
+
+
+          
+      </div>
+    </div>
+
+    <!-- 最顶部浅红色导航 -->
+    <div class="header-qred-nav">
+      <div class="wp-inner">
+          <ul>
+              <li class="items">
+                <a href="" class="item-text">学校概况</a>
+                <ol class="dropdown">
+                  <li><a href="">学校简介</a></li>
+                  <li><a href="">历史沿革</a></li>
+                  <li><a href="">历任领导</a></li>
+                  <li><a href="">现任领导</a></li>
+                  <li><a href="">组织机构</a></li>
+                </ol>
+              </li>
+            
+            </ul>
+      </div>
+  
+    </div>
+
+  </div>
+
+  <!-- 中间内容 -->
+  <div class="main-content">
+    <!-- banner轮播图 -->
+    <div class="banner width-100">
+
+          <ul class="swiper-content" style="left:0">
+            <li class="swiper-item"><img src="./img/1.jpg" alt=""></li>
+            <li class="swiper-item"><img src="./img/2.jpg" alt=""></li>
+            <li class="swiper-item"><img src="./img/3.jpg" alt=""></li>
+            <li class="swiper-item"><img src="./img/4.jpg" alt=""></li>
+            <li class="swiper-item"><img src="./img/5.jpg" alt=""></li>
+            <li class="swiper-item"><img src="./img/6.jpg" alt=""></li> 
+          </ul>
+      
+       
+  
+
+      <ul class="swiper-spot">
+        <li class="active"></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ul>
+
+      <div class="swiper-action">
+        <div class="action-left">&lt;</div>
+        <div class="action-right">&gt;</div>
+      </div>
+    </div>
+
+
+    <!-- 学校新闻 -->
+    <div class="school-news width-100">
+      <div class="school-news-content wp-inner">
+        <!-- 左边的新闻 -->
+        <div class="news-content-left left">
+          <div class="content-left-top">
+            <h3>学校新闻</h3>
+          </div>
+          <div class="content-left-bottom">
+            <div class="left-bottom-img left">
+              <img src="./img/bcfd983.jpg" alt="" srcset="">
+              <a>
+                  学校2018年大学生骨干培训班暨“青马工程”培训班圆满结束
+              </a>
+              <a href="" class="news_infos">
+                  12月20日中午，我校大学生骨干培训班暨“青马工程”培训班结业仪式在学术报告厅隆重举行。马克思主义学院院长喻小红，校团委常务副书记赵艳...
+              </a>
+            </div>
+            <div class="left-bottom-new-list right">
+              <ul>
+                <li>
+                  <a href="">学校2018年大学生骨干培训班暨“青马工程”培训班...</a>
+                  <span>12-21</span>
+                </li>
+                <li>
+                  <a href="">学校组织《中国共产党纪律处分条例》知识竞赛</a>
+                  <span>12-21</span>
+                </li>
+                <li>
+                    <a href="">学校组织《中国共产党纪律处分条例》知识竞赛</a>
+                    <span>12-21</span>
+                  </li>
+                  <li>
+                      <a href="">学校组织《中国共产党纪律处分条例》知识竞赛</a>
+                      <span>12-21</span>
+                    </li>
+                    <li>
+                        <a href="">学校组织《中国共产党纪律处分条例》知识竞赛</a>
+                        <span>12-21</span>
+                      </li>
+                      <li>
+                          <a href="">学校组织《中国共产党纪律处分条例》知识竞赛</a>
+                          <span>12-21</span>
+                        </li>
+                        <li>
+                            <a href="">学校组织《中国共产党纪律处分条例》知识竞赛</a>
+                            <span>12-21</span>
+                          </li>
+                          <li>
+                              <a href="">学校组织《中国共产党纪律处分条例》知识竞赛</a>
+                              <span>12-21</span>
+                            </li>
+                            <li>
+                                <a href="">学校组织《中国共产党纪律处分条例》知识竞赛</a>
+                                <span>12-21</span>
+                              </li>
+                              <li>
+                                  <a href="">学校组织《中国共产党纪律处分条例》知识竞赛</a>
+                                  <span>12-21</span>
+                                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <!-- 右边tab切换 -->
+        <div class="news-content-right right">
+          <!-- tab切换的标题 -->
+          <ul class="tab-title">
+            <li class="selected">
+              通知公告
+            </li>
+            <li>
+              学生公告
+            </li>
+            <li>
+              招标公告
+            </li>
+          </ul>
+          <!-- tabs切换对应的内容 -->
+          <ol class="tab-content">
+              <li class="tab-content-item item-active">
+                <p>通知公告</p>
+                <p>通知公告</p>
+              </li>
+              <li class="tab-content-item">
+                <p>学生公告</p>
+                <p>学生公告</p>
+              </li>
+              <li class="tab-content-item">
+                <p>招标公告</p>
+                <p>招标公告</p>
+              </li>
+          </ol>
+        </div>
+      </div>
+    </div>
+
+  </div>
+  <!-- 底部版权 -->
+  <div class="footer">
+    
+  </div>
+
+
+  <!-- 轮播图的js -->
+  <script src="./js/swiper.js"></script>
+  <!-- 首页的js -->
+  <script src="./js/index.js"></script>
+  <script>
+
+    // 为每一个动态设置宽度，等于浏览器的宽度
+    var li = document.getElementsByClassName("swiper-item")
+    for(var i = 0;i<li.length;i++){
+      li[i].style.width = document.body.clientWidth + 'px'
+    }
+  
+
+    var searchInput = document.getElementsByClassName("search")[0]
+    function getShowSearch() {
+      searchInput.className = "search ShowSearch"
+    }
+
+    function leaveShowSearch() {
+      searchInput.className = "search"
+    }
+
+
+  </script>
+
+</body>
+</html>

历届学生/刘合群/学校官网实战/js/index.js

@@ -0,0 +1,31 @@
+(function() {
+
+
+  var tabTitle = (document.getElementsByClassName("tab-title")[0]).getElementsByTagName("li");
+  var tabContent = (document.getElementsByClassName("tab-content")[0]).getElementsByTagName("li");
+
+  /**
+   *  index.js 和 swiper.js 中变量 i 冲突
+   *  1: 更换index.js中变量i的名称，例如：ff
+   *  2: (function(){  })() 自执行函数+闭包 防止变量污染
+   */
+
+  // 第一次for循环主要作用是为了给标题绑定 onmousemove 事件
+  for(let i = 0;i<tabTitle.length;i++) {
+    tabTitle[i].onmousemove = function () {
+      
+      // 第二次for是为了清除标题和内容的激活样式
+      for(let j = 0;j<tabTitle.length;j++) {
+        tabTitle[j].className = ""
+        tabContent[j].className = "tab-content-item"
+      }
+
+      // 为当前悬浮的对象设置 激活样式
+      tabTitle[i].className = "selected"
+      tabContent[i].className = "tab-content-item item-active"
+    }
+    
+  }
+
+  
+})()

历届学生/刘合群/学校官网实战/js/swiper.js

@@ -0,0 +1,136 @@
+// 自执行函数 形成闭包
+
+(function () {
+
+
+  var left = $("action-left"),
+    right = $("action-right"),
+    timer,
+    index = 1,
+    offsetWidths = document.body.clientWidth;
+
+
+left.onclick = function () {
+  if(index<=1) {
+    index = 6
+  }else {
+    index--
+  }
+  animation(offsetWidths)
+  clickChangeStop()
+}
+
+right.onclick = function () {
+  //alert("下一页")
+  if(index>5) {
+    index = 1
+  }else {
+    index++
+  }
+  animation(-offsetWidths)
+  clickChangeStop()
+}
+
+/**
+ * 切换小圆点样式
+ */
+function clickChangeStop(){
+  var li = $("swiper-spot").getElementsByTagName("li")
+  clearSpotActive()
+  li[index - 1].className = "active"
+}
+
+/**
+ * 鼠标悬浮的时候，清除自动播放
+ */
+$("banner").onmouseover = function () {
+  clearInterval(timer)
+}
+
+/**
+ * 鼠标离开的时候，开始自动播放
+ */
+$("banner").onmouseout = function () {
+  autoPlay()
+}
+
+/**
+ * 自动播放
+ */
+function autoPlay() {
+  timer = setInterval(function(){
+    right.onclick()
+  },2000)
+}
+
+/**
+ * 小圆点被点击时候切换轮播图
+ */
+function spotClick() {
+  var li = $("swiper-spot").getElementsByTagName("li")
+  for(let i = 0;i<li.length;i++){
+    
+    li[i].onclick = function () {
+      index = i + 1
+      $("swiper-content").style.left = ( i * -offsetWidths ) + 'px'
+      // 先把所有的li的激活样式 active 都清除
+      clearSpotActive()
+      // 然后为你点击的元素li单独设置激活样式
+      li[i].className = "active"
+    }
+  }
+}
+
+/**
+ * 清除所有小圆点上的激活样式
+ */
+function clearSpotActive() {
+  var li = $("swiper-spot").getElementsByTagName("li")
+  for(let i = 0;i<li.length;i++){
+    li[i].className = ""
+  }
+}
+
+/**
+ * 动画切换函数
+ * @param {*} offset 
+ */
+function animation (offset) {
+  var juli = parseInt($("swiper-content").style.left) + offset;
+  if(juli < getFullWidth()){
+    $("swiper-content").style.left = "0px"
+  } else if (juli > 0) {
+    $("swiper-content").style.left = getFullWidth() + 'px'
+  }else {
+    $("swiper-content").style.left = juli + 'px'
+  }
+} 
+
+
+
+/**
+ * 获取最后一张图片的距离 图片数量 * 单个图片宽度
+ */
+function getFullWidth () {
+  let len = ($("swiper-content").getElementsByTagName("li").length) - 1
+  return len * - offsetWidths
+}
+
+
+/**
+ * 获取元素
+ * @param {*} className 
+ */
+function $(className){
+  return document.getElementsByClassName(className)[0]
+}
+
+
+
+autoPlay()
+spotClick()
+
+
+})()
+
+