原网站:
目前还原效果:
源码
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()"><</div>
<div class="btn right" onclick="rightShift()">></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">
计算机科学与技术系
<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>
<a href="http://jiaowu.sdau.edu.cn/" target=" _blank">山东农业大学教务处 </a>
<a href="http://library.sdau.edu.cn/" target="_blank">图书馆 </a>
<a href="http://youth.sdut.edu.cn" target="_blank">青春在线 </a>
<a href="http://cnki.net/" target="_blank">中国知网</a>
<a href="https://www.chsi.com.cn" target="_blank">学信网 </a>
<a href="http://www.ccyl.org.cn" target="_blank">中国共青团 </a>
<a href="http://www.moe.gov.cn/" target="_blank">教育部 </a>
</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;
}
未完待续..... ....