某大学计算机科学与技术系网站

原网站:

目前还原效果:

源码

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山东农业大学计算机科学与技术系</title>
    <link rel="stylesheet" href="loser.css">
</head>
<body>
    <!-- 回到顶部 -->
       <div id="backtop">
     <!-- <img src="./回到顶部.png" alt=""> -->
    <button onclick="topFunction()" >
    <span>回到顶部</span>
</button>
</div>     
    <!-- 回到顶部 -->
    <div id="top">
        <!-- 头部左右图标 -->
        <div id="leftright">
            <div id="left">
                <a style="height: 58px;"><img style="color:rgb(136, 0, 255);height:100%;" 
                    src="./logo.png" alt="农大校徽"/></a>
                <a style="height: 58px;"><img style="color:rgb(0, 34, 255);height:100%;" 
                    src="./logo_2.png" alt="南管委"/></a>
            </div>
            <div id="right">
                    <div style="margin-top:23px;" >
                  
                         <form method="post" action="">
                         <input type="text" name="keyword" class="sinput" placeholder="请输入关键字...">
                                <!-- <input type="submit" value="" class="ssubmit" name="btnsearch"> -->
                          </form>    
                    </div>
                  <div style="width:30px;height:50px;margin-top:23px;"> 
                     <a style="height: 25px;">
                     <img style="height: 42%" src="./放大镜图片.png" alt="图片"/>
                     </a>
                  </div> 
                  <div id="search">
                     <a href="javascript:void(0)"
                      style="color: rgb(255, 255, 255); font-size: 10px;">搜索</a>
                  </div>      
            </div>
     </div>
<!-- 上面导航bug太多先不做了 -->
<!-- 轮播图 -->
<div class="carousel">
  <div class="container">
      <a href="#" target="_blank"
          ><img src="./1.jpg"
      /></a>
      <a href="#" target="_blank"
          ><img src="./2.jpg"
      /></a>
      <a href="#" target="_blank"
          ><img src="./3.jpg"
      /></a>
      <a href="#" target="_blank"
      ><img src="./4.jpg"
  /></a>
  <a href="#" target="_blank"
  ><img src="./5.jpg"
/></a>
<a href="#" target="_blank"
><img src="./6.jpg"
/></a>
  </div>
  <div class="shift">
      <div class="btn left" onclick="leftShift()">&lt;</div>
      <div class="btn right" onclick="rightShift()">&gt;</div>
  </div>
  <div class="bottom"></div>
</div>
<!-- 轮播图css-->
<style>
  .carousel {
      width: 100%;
      height: 400px;
      overflow: hidden;
      position: relative;
  }
  .carousel .container {
      width: 100%;
      height: 100%;
      position: relative;
      left: 0;
      display: flex;
      transition: all 1s;
  }

  .carousel .container a {
      width: 100%;
      height: 100%;
      flex-shrink: 0;
  }

  .carousel .container a img {
      width: 100%;
      height: 100%;
  }

  .carousel .shift .btn {
      position: absolute;
      top: 0;
      bottom: 0;
      margin:auto 0;
      color:rgba(0, 0, 255, 0.548);
      width: 25px;
      height: 20px;
      border-radius: 8px;
      font-size: 30px;
      font-weight: bold;
      line-height: 20px;
      text-align: center;
      cursor: pointer;
      user-select: none;   
      margin-left: 50px;
      opacity: 0.4;
      margin-right: 50px;
  }
  .carousel .shift .left {
      left: 20px;

  }
  .carousel .shift .right {
      right: 20px;
  }
  .carousel .bottom {
      position: relative;
      bottom: 20px;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: max-content;
      display: flex;
      gap: 6px;
  }
  .carousel .bottom .indicator {
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.5;
  cursor: pointer;
}

  .carousel:hover .bottom .indicator {
      opacity: 1;
  }
  .carousel:hover .shift .btn {
      opacity: 1;
  }
</style>
<script>
// 轮播图需要的js
  let index = 0
  let imageCount = document.querySelectorAll(
      ".carousel .container img"
  ).length

  const bottom = document.querySelector(".carousel .bottom")
  for (let i = 0; i < imageCount; i++) {
      const indicator = document.createElement("div")
      indicator.classList.add("indicator")
      indicator.onclick = () => setIndex(i)

      bottom.append(indicator)
  }
  function createAuto() {
      return setInterval(() => {
          index++
          refresh()
      }, 3000)
  }

  let autoTimer = createAuto()

  function refresh() {
  if (index < 0) {
      index = imageCount - 1
  } else if (index >= imageCount) {
      index = 0
  }

        // 获取轮播框元素
        let carousel = document.querySelector(".carousel")

        //获取轮播框的宽度
        let width = getComputedStyle(carousel).width
        width = Number(width.slice(0, -2))

        carousel.querySelector(".container").style.left =
            index * width * -1 + "px"
    }

    let refreshWrapper = (func) => {
        // refresh 装饰器
        return function (...args) {
            let result = func(...args)
            refresh()
            // 重置自动滚动
            clearInterval(autoTimer)
            autoTimer = createAuto()
            return result
        }
    }

    let leftShift = refreshWrapper(() => {
        index--
    })
    let rightShift = refreshWrapper(() => {
        index++
    })

    let setIndex = refreshWrapper((idx) => {
        index = idx
    })
    refresh()

// window.onscroll = function() {scrollFunction()};
 
// function scrollFunction() {console.log(121);
//     if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
//         document.getElementById("backtop").style.display = "block";
//     } else {
//         document.getElementById("backtop").style.display = "none";
//     }
// }
 
// 点击按钮,返回顶部
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

</script>
<!-- 中间部分 -->
<div class="body">
 <!-- 左边的 -->
    <div class="bbbody">
        <div class="box1">
            师资队伍
        </div>
        <ul style="color:#fff">
            <li><a href="#">计算机科学与技术系</a></li>
            <hr >
            <li><a href="#">公共数学系</a></li>
            <hr>
            <li><a href="#">应用物理系</a></li>
            <hr>
            <li><a href="#">测绘科学与工程系</a></li>
            <hr>
            <li><a href="#">电子与通信工程系</a></li>
            <hr>
            <li><a href="#">计算机实验教学中心</a></li>
            <hr>
            <li><a href="#">物理实验教学中心</a></li>
            <hr>
            <li><a href="#">测绘实验教学中心</a></li>
            <hr>
            <li><a href="#">大数据系</a></li>
            <hr>
            <li><a href="#">应用数学系</a></li>
            <hr>
            <li> <a href="#">数据科学系</a></li>
            <hr>
        </ul>
    </div>
 <!-- 右边的 -->
    <div class="bbody">
    <table class="tabbe">
    <div class="box2">
        计算机科学与技术系&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <a class="aa" href="#">首页</a> <a class="aa" href="#">
        师资队伍</a> <a class="aa" href="#">计算机科学与技术系</a>
    </div>
     <div>
     <thead>
        <tr>
            <th>姓名</th>
            <th>职称</th>
            <th>姓名</th>
            <th>职称</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>费玉奎</td>
            <td>教授</td>
            <td><a href="http://xinxi.sdau.edu.cn/_upload/article/files/64/d9/3c484b92445fa64e98eb9191f352/6270b9d9-72b7-49bd-97a6-28aa2abdda15.pdf"
                    target="_self">朱红梅</a></td>
            <td>副教授</td>
        </tr>
        <tr>
            <td><a
                    href="http://xinxi.sdau.edu.cn/_upload/article/files/82/74/933da31a49af9275da17da0b4b55/908617c2-772b-4186-8056-4d992e33d705.pdf">高华</a>
            </td>
            <td>教授</td>
            <td><a href="#">徐洪丽</a></td>
            <td>副教授</td>
        </tr>
        <tr>
            <td><a href="#">王雅琴</a></td>
            <td>教授</td>
            <td><a href="#">杨晓霞</a></td>
            <td>副教授</td>
        </tr>
        <tr>
            <td><a href="#">张继军</a></td>
            <td>教授</td>
            <td><a href="#">于群</a></td>
            <td>副教授</td>
        </tr>
        <tr>
            <td><a href="#">柳平增</a></td>
            <td>教授</td>
            <td><a href="#">张艳</a></td>
            <td>副教授</td>
        </tr>
        <tr>
            <td><a href="#">葛平俱</a></td>
            <td>教授</td>
            <td><a href="#">郭华</a></td>
            <td>副教授</td>
        </tr>
        <tr>
            <td><a href="#">岳训</a></td>
            <td>教授</td>
            <td><a href="#">王媛媛</a></td>
            <td>副教授</td>
        </tr>
        <tr>
            <td><a href="#">吴秋兰</a></td>
            <td>教授</td>
            <td><a href="#">孙倩</a></td>
            <td>讲师</td>
        </tr>
        <tr>
            <td><a href="#">巩君华</a></td>
            <td>副教授</td>
            <td><a href="#">付晓翠</a></td>
            <td>讲师</td>
        </tr>
        <tr>
            <td><a href="#">姜红花</a></td>
            <td>教授</td>
            <td><a href="#">孙未</a></td>
            <td>讲师</td>
        </tr>
        <tr>
            <td>李光忠</td>
            <td>副教授</td>
            <td><a href="#">孙博</a></td>
            <td>讲师</td>
        </tr>
        <tr>
            <td><a href="#">李蔚妍</a></td>
            <td>副教授</td>
            <td><a href="#">王秀丽</a></td>
            <td>讲师</td>
        </tr>
        <tr>
            <td><a href="#">孙永香</a></td>
            <td>副教授</td>
            <td><a href="#">苏平</a></td>
            <td>讲师</td>
        </tr>
        <tr>
            <td><a href="#">王鲁</a></td>
            <td>教授</td>
            <td><a href="#">高葵</a></td>
            <td>讲师</td>
        </tr>
        <tr>
            <td><a href="#">王志军</a></td>
            <td>教授</td>
            <td><a href="#">姚继美</a></td>
            <td>讲师</td>
        </tr>
        <tr>
            <td><a href="#">陈江林</a></td>
            <td>副教授</td>
            <td><a href="#">李雨</a></td>
            <td>讲师</td>
        </tr>
        <tr>
            <td><a href="#">武装</a></td>
            <td>副教授</td>
            <td><a href="#">周倩</a></td>
            <td>讲师</td>
        </tr>
        <tr>
            <td><a href="#">王玉存</a></td>
            <td>副教授</td>
            <td><a href="#">高磊</a></td>
            <td>讲师</td>
        </tr>
        <tr>
            <td><a href="#">范昊</a></td>
            <td>副教授</td>
            <td>郝霞</td>
            <td>校聘副教授</td>
        </tr>
        <tr>
            <td><a href="#">张承明</a></td>
            <td>教授</td>
            <td>朱珂</td>
            <td>校聘副教授</td>
        </tr>
        <tr>
            <td><a href="#">张广梅</a></td>
            <td>副教授</td>
            <td>郭旭超</td>
            <td></td>
        </tr>
       </tbody>
    </div>
</table>
    </div>
</div>
<!-- bug多发区(底部) -->
   <div id="bottom" style="margin-top: 22px">
    <div class="box4">
    <div class="link">
    <h2>-----友情链接-----</h2>
      <div class="links">
        <a href="http://www.sdau.edu.cn/" target="_blank">山东农业大学 </a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="http://jiaowu.sdau.edu.cn/" target=" _blank">山东农业大学教务处 </a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="http://library.sdau.edu.cn/" target="_blank">图书馆 </a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="http://youth.sdut.edu.cn" target="_blank">青春在线 </a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="http://cnki.net/" target="_blank">中国知网</a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="https://www.chsi.com.cn" target="_blank">学信网 </a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="http://www.ccyl.org.cn" target="_blank">中国共青团 </a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="http://www.moe.gov.cn/" target="_blank">教育部 </a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </div>
      <hr>
     </div>
     <div class="box6">
    <a href="http://www.sdau.edu.cn/main.htm"><img src="./logo.png" alt="sdau校徽"></a>
    </div>
    <div class="box5">
    <dt>学院概括</dt>
    <dd><hr></dd>
    <p></p>
    <dd>
        学院简介
    </dd>
    <dd>
       现任领导
    </dd>
    <dd>
       机构设置
    </dd>
    <dd>
      系部简介
    </dd>
    </div>
    <div class="box5">
    <dt>师资队伍</dt>
    <dd><hr></dd>
    <p></p>
    <dd>
      师资概况
    </dd>
    <dd>
        教师名录
    </dd>
    <dd>
       名师风采
    </dd>
    <dd>
       人才引进
    </dd> 
    </div>
    <div class="box5">
    <dt>学科科研</dt>
    <dd><hr></dd>
    <p></p>
    <dd>
        <a href="http://xinxi.sdau.edu.cn/3410/list.htm">学科建设</a>
    </dd>
    <dd>
        <a href="http://xinxi.sdau.edu.cn/3417/list.htm">方向与团队</a>
    </dd>
    <dd>
        <a href="http://xinxi.sdau.edu.cn/3420/list.htm">项目与成果</a>
    </dd>
    <dd>
        <a href="http://xinxi.sdau.edu.cn/3411/list.htm">条件与平台</a>
    </dd>
    </div>
    <div class="box5">
    <dt>联系我们</dt>
    <dd><hr></dd>
    <p></p>
    <dd>地址:岱宗校区文理大楼1201</dd>
    <dd>邮编:271018</dd>
    <dd>电话:0538-8249275</dd>
    <dd>邮箱:xxxy@sdau.edu.cn</dd>
    </div> 
<hr>
<p style=" color: #a3aebf;text-align: center; font-size: 14px;">技术支持:启航科技</p>



css:

div,table { font-size: 14px; }

a {text-decoration:none;}

/* #myBtn {

  display: none;

  position: fixed;

  bottom: 20px;

  right: 30px;

  border: none;

  outline: none;

  color: white;

  cursor: pointer;

  padding: 15px;

  border-radius: 10px;

  background: url(./回到顶部.png)

}

#myBtn image{

  width: 40%;

}

#myBtn a :hover {

  background-color: #555;

  background: none;



} */

#backtop {

  width: 40px;

  height: 20px;

  /* text-align: center; */

  position: fixed;

  right: 10px;

  bottom: 30px;

}



#backtop button{

  cursor: pointer;

  /* background-image: url(./回到顶部.png); */

  border: none;

}

/* #backtop a {

  text-decoration: none;

  color: white;

}*/

/* #backtop img {

  width: 100%;

}

#backtop:hover img

{

  visibility: hidden;

} */

/* #backtop button:hover {

  background-image:hidden;

} */

#backtop:hover span {

  visibility: visible;

}

#backtop span {

  visibility: hidden;

  font-size: 14px;

  font-family: "";

  line-height: 20px;

  height: 45px;

  display: flex;

  justify-content: space-around;

  color: grey;

}



#top {

    width: 100%;

    background: #0168b7 no-repeat;

    height: 128px;

}

#left {

    margin-left: 260px;

    margin-top: 10px;

    width: 40%;

    display: flex;

    float: left;

}

#right {

    width: 25%;

    display: flex;

    float: right;

    padding-top: 15px;

}

#search {

    width: 60px;

    height: 25px;

    float: right;

    background-color: #bb0102;

    color: #fff;

    text-align: center;

    line-height: 20px;

    margin-top: 20px;

}

#cin{

    color: #0168b7;

}

/* 中间部分 */

.body

{

    width: 1000px;

    height: 950px;

    margin: 10px auto 0;

    background-color: aliceblue;

}

.bbody{

  float: right;

  width:800px;

  height: 800px;

  }

  .bbody a{text-decoration: none;

    color:dimgray;

  }

  .tabbe{

    text-align: center;

    border-collapse:collapse;

    margin-left: 100px;

    margin-top: 15px;

  }

  .bbody a:hover{

    color:#0168b7 ;

  }

  .bbody th{

    width: 150px;

    height: 37px;

    border: 1px solid black;

  }

  .bbody td{

    width: 150px;

    height: 37px;

    border: 1px solid black;

  }

.bbbody

{

float: left;

width: 180px;

height: 925px;

background-color: #0168b7;

margin-right: 0px;

}

.bbbody a{

  color: white;

  text-decoration: none

}

.bbbody a:hover{

  color: #bb0102;

}

.box1{

  width: 150px;

  height: 20px;

  margin: 10px auto;

  background-color: #fff;

  text-align: center;

  color:#0159b7;

  /* 边角圆化 */

  -webkit-border-radius: 10x / 5px;

  -moz-border-radius: 10px / 5px;

  border-radius: 10px / 5px;

  /* 边角圆化 */

  }

.box2{

  width:780px;

  height:15px;

  background-color: #0168b7;

  padding: 10px;

  color: white;

}



a.aa{

  color: white;

}

a.aa:hover{

  font-size: 120%;

  color:white;

}

/* 底部 */

#bottom {

  width: 100%;

  background-image: url(./底部.jpg);

  position: absolute;

  background-size: cover;

}

.box4{

width: 1400px;

margin-top: 25px;

margin-left: 200px;

margin-right: 400px;

overflow: hidden;

}

.link

{

  color: white;

}

.links a{

color: white;

}

.box6 {

  width: 300px;

  height:100px;

  float: left;

  /* display: inline-block; */

  /* margin-left: 350px; */

}

.box5 {

  color:rgba(255, 255, 255, 0.637);

  width:150px;

  height: 150px;

  display: inline-block;

  /* display: inline-block; */

  /* margin-left: 350px; */

}

.box5 hr{

  width: 20px;

  float: left;

}

.box5 dt{

  font-size: 14px;

  margin-left: 38px;

  text-align: left;

}

.box5 dd{

  color:rgba(255, 255, 255, 0.637);

  font-size: 13px;

    text-align: left;

}

.box5 a:link{

  color:rgba(255, 255, 255, 0.637);

}

.box5 a :hover{

  color: white;

}

未完待续..... ....

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值