基于HTML+CSS+JS的肇庆学院首页静态页面源码
一、HTML静态页面index.html代码：
学校要闻
更多>>
我校承办创新创业大赛 为肇庆人才节贡献力量
申硕工作现场推进会要求发挥好典型示范作用
学校全员培训党支部书记 抓实基层党组织主题教育
第二十届教职工“园丁杯”篮球赛精彩纷呈
校领导到帮扶共建社区调研创文工
学工干部听党课 初心使命促成长
李新昌：坚守初心使命 勇攀农科高峰
我校召开主题教育工作推进会 要求加强统筹兼顾
主题教育调研活动在全校范围深入展开
学校要闻
更多>>
我校承办创新创业大赛 为肇庆人才节贡献力量
申硕工作现场推进会要求发挥好典型示范作用
学校全员培训党支部书记 抓实基层党组织主题教育
第二十届教职工“园丁杯”篮球赛精彩纷呈
校领导到帮扶共建社区调研创文工
学工干部听党课 初心使命促成长
李新昌：坚守初心使命 勇攀农科高峰
我校召开主题教育工作推进会 要求加强统筹兼顾
主题教育调研活动在全校范围深入展开
通知公告
更多>>
我校承办创新创业大赛 为肇庆人才节贡献力量
申硕工作现场推进会要求发挥好典型示范作用
学校全员培训党支部书记 抓实基层党组织主题教育
第二十届教职工“园丁杯”篮球赛精彩纷呈
校领导到帮扶共建社区调研创文工
学工干部听党课 初心使命促成长
李新昌：坚守初心使命 勇攀农科高峰
我校召开主题教育工作推进会 要求加强统筹兼顾
主题教育调研活动在全校范围深入展开
专题网站
我校承办创新创业大赛 为肇庆人才节贡献力量
申硕工作现场推进会要求发挥好典型示范作用
学校全员培训党支部书记 抓实基层党组织主题教育
第二十届教职工“园丁杯”篮球赛精彩纷呈
校领导到帮扶共建社区调研创文工
学工干部听党课 初心使命促成长
李新昌：坚守初心使命 勇攀农科高峰
我校召开主题教育工作推进会 要求加强统筹兼顾
主题教育调研活动在全校范围深入展开
粤ICP备05008891号 @2016-2019 肇庆学院 版权所有
中国广东省肇庆市端州区肇庆大道 电话： 0758-2716233 传真： 0758-2716586 邮编： 526061
二、CSS样式index.css代码：
body {
margin: 0px;
padding: 0px;
}
a:hover {
color: red;
}
/*头部*/
.head {
height: 30px;
background-color: #f3f3f3;
}
.head ul {
list-style-type: none;
margin: 0px;
padding: 0px;
position: relative;
left: 860px;
top: 0px;
}
.head ul li {
display: inline;
}
.head ul li a {
color: gray;
text-decoration: none;
font-family: "微软雅黑";
font-size: 14px;
padding-right: 10px;
}
.searchInput {
height: 23px;
width: 250px;
margin: 0px;
}
.search {
color: gray;
}
/*主内容*/
.contain {
}
/*左连接*/
.con_left {
background-color: red;
width: 155px;
height: 80px;
position: absolute;
left: 0px;
top: 30px;
}
.left-text {
text-align: center;
background-color: red;
}
.left-text a {
color: yellow;
text-decoration: none;
}
/*背景图片*/
.con-head1 {
width: 100px;
height: 151px;
position: absolute;
left: 0px;
top: 30px;
}
.con-head {
width: 1320px;
height: 151px;
position: absolute;
left: 100px;
top: 30px;
background-repeat: no-repeat;
}
.con-head2 {
width: 100px;
height: 151px;
position: absolute;
right: 0px;
top: 30px;
}
.con-left {
width: 110px;
height: 100%;
position: absolute;
left: 0px;
top: 180px;
background-repeat: no-repeat;
}
.con-right {
width: 110px;
height: 100%;
position: absolute;
right: 0px;
top: 180px;
background-repeat: no-repeat;
}
/*中心内容*/
.con_center {
width: 87%;
height: 100%;
position: absolute;
left: 100px;
top: 180px;
}
.cen_head {
width: 100%;
height: 6%;
background-color: #06549F;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
line-height: 250%;
}
.cen_head ul {
text-align: center;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.cen_head ul li {
display: inline;
}
.cen_head ul li a {
color: white;
text-decoration: none;
font-family: "微软雅黑";
font-size: 18px;
padding-right: 25px;
}
/*右链接*/
.con_right {
background-color: red;
width: 155px;
height: 80px;
position: absolute;
right: 0px;
top: 30px;
}
.left-right {
text-align: center;
background-color: red;
padding: 10px;
}
.left-right a {
color: yellow;
text-decoration: none;
}
.cen-con-left {
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
width: 36%;
height: 420px;
background-color: white;
}
.tile {
color: #06549F;
font-size: 18px;
padding-left: 30px;
}
.left-a {
color: #06549F;
text-decoration: none;
position: relative;
left: 300px;
top: 3px;
}
.left-hr {
background-color: #06549F;
}
.left1 {
color: black;
text-decoration: none;
}
.left-hr1 {
background-color: grey;
height: 0.01px;
}
/*图片轮播*/
.imgOne {
display: block;
width: 97%;
height: 430px;
padding-top: 10px;
padding-left: 10px;
}
.imgAll {
display: none;
width: 97%;
height: 430px;
padding-top: 10px;
padding-left: 10px;
}
.con-left2 {
width: 36%;
height: 100%;
position: relative;
left: 10px;
top: 20px;
}
.con-center {
width: 30%;
height: 100%;
position: absolute;
left: 38%;
top: 493px;
}
.cen-con-right2 {
width: 30%;
height: 100%;
position: absolute;
left: 69%;
top: 493px;
}
.left-a2 {
color: #06549F;
text-decoration: none;
position: relative;
left: 230px;
top: 3px;
}
.cen-con-right {
width: 63%;
height: 430px;
position: absolute;
background-color: white;
right: 0px;
top: 6%;
}
/*脚部*/
.foot {
margin-top: 1100px;
text-align: center;
}
三、js事件imgSlide.js代码：
var index = 0;
//改变图片
function ChangeImg() {
index++;
var a = document.getElementsByClassName("img-slide");
if(index >= a.length)
index = 0;
for(var i = 0; i < a.length; i++) {
a[i].style.display = 'none';
}
a[index].style.display = 'block';
}
//设置定时器，每隔两秒切换一张图片
setInterval(ChangeImg,2000);
四、效果图：
