您的位置: 首页  >  文章  >  基于HTML+CSS+JS的肇庆学院首页静态页面源码

基于HTML+CSS+JS的肇庆学院首页静态页面源码

分类: 文章 • 2024-06-25 19:22:04

一、HTML静态页面index.html代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>肇庆学院</title>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script type="text/javascript" src="js/imgSlide.js"></script>
    </head>

    <body>
        <!--头部-->
        <div class="head">
            <ul>
                <li>
                    <a href="#">网络导航</a>
                </li>
                <li>
                    <a href="#">校内网</a>
                </li>
                <li>
                    <a href="#">旧版主站</a>
                </li>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <input type="text" class="searchInput" />
                <input type="submit" class="search" value="站内搜索" />
            </ul>
        </div>
        <!--主内容-->
        <div class="contain">
            <img src="img/back2.png" class="con-head1" />
            <img src="img/head.png" class="con-head" />
            <img src="img/back2.png" class="con-head2" />
            <img src="img/back.png" class="con-left" />
            <img src="img/back.png" class="con-right" />
            <!--左连接-->
            <div class="con_left">
                <p class="left-text">
                    <a href="#">"不忘初心 牢记使命" 主题教育网站</a>
                </p>
            </div>
            <!--中心内容-->
            <div class="con_center">
                <div class="cen_head">
                    <ul>
                        <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>
                        <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>
                        <li>
                            <a href="#">国际交流</a>
                        </li>
                        <li>
                            <a href="#">综合服务</a>
                        </li>
                        <li>
                            <a href="#">信息公开</a>
                        </li>
                    </ul>
                </div>
                <div class="cen_contain">
                    <div class="cen-con-left">
                        <b class="tile">学校要闻</b>
                        <a href="#" class="left-a">更多>></a>
                        <hr class="left-hr" />
                        <a href="#" class="left1">我校承办创新创业大赛 &nbsp;&nbsp; 为肇庆人才节贡献力量</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">申硕工作现场推进会要求发挥好典型示范作用</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">学校全员培训党支部书记　 &nbsp;&nbsp;抓实基层党组织主题教育</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">第二十届教职工“园丁杯”篮球赛精彩纷呈</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">校领导到帮扶共建社区调研创文工</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">学工干部听党课&nbsp;&nbsp; 　初心使命促成长</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">李新昌：坚守初心使命　&nbsp;&nbsp; 勇攀农科高峰</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">我校召开主题教育工作推进会　&nbsp;&nbsp; 要求加强统筹兼顾</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">主题教育调研活动在全校范围深入展开</a>
                        <hr class="left-hr1" />
                    </div>
                    <div class="cen-con-right">
                        <div class="imgBox">
                            <img class="img-slide imgOne" src="img/img1.png" alt="1" />
                            <img class="img-slide imgAll" src="img/img2.png" alt="2" />
                            <img class="img-slide imgAll" src="img/img3.png" alt="3" />
                        </div>
                    </div>
                    <div class="con-left2">
                        <b class="tile">学校要闻</b>
                        <a href="#" class="left-a">更多>></a>
                        <hr class="left-hr" />
                        <a href="#" class="left1">我校承办创新创业大赛 &nbsp;&nbsp; 为肇庆人才节贡献力量</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">申硕工作现场推进会要求发挥好典型示范作用</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">学校全员培训党支部书记　 &nbsp;&nbsp;抓实基层党组织主题教育</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">第二十届教职工“园丁杯”篮球赛精彩纷呈</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">校领导到帮扶共建社区调研创文工</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">学工干部听党课&nbsp;&nbsp; 　初心使命促成长</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">李新昌：坚守初心使命　&nbsp;&nbsp; 勇攀农科高峰</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">我校召开主题教育工作推进会　&nbsp;&nbsp; 要求加强统筹兼顾</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">主题教育调研活动在全校范围深入展开</a>
                        <hr class="left-hr1" />
                    </div>
                    <div class="con-center">
                        <b class="tile">通知公告</b>
                        <a href="#" class="left-a2">更多>></a>
                        <hr class="left-hr" />
                        <a href="#" class="left1">我校承办创新创业大赛 &nbsp;&nbsp; 为肇庆人才节贡献力量</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">申硕工作现场推进会要求发挥好典型示范作用</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">学校全员培训党支部书记　 &nbsp;&nbsp;抓实基层党组织主题教育</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">第二十届教职工“园丁杯”篮球赛精彩纷呈</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">校领导到帮扶共建社区调研创文工</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">学工干部听党课&nbsp;&nbsp; 　初心使命促成长</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">李新昌：坚守初心使命　&nbsp;&nbsp; 勇攀农科高峰</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">我校召开主题教育工作推进会　&nbsp;&nbsp; 要求加强统筹兼顾</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">主题教育调研活动在全校范围深入展开</a>
                        <hr class="left-hr1" />
                    </div>
                    <div class="cen-con-right2">
                        <b class="tile">专题网站</b>
                        <hr class="left-hr" />
                        <a href="#" class="left1">我校承办创新创业大赛 &nbsp;&nbsp; 为肇庆人才节贡献力量</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">申硕工作现场推进会要求发挥好典型示范作用</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">学校全员培训党支部书记　 &nbsp;&nbsp;抓实基层党组织主题教育</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">第二十届教职工“园丁杯”篮球赛精彩纷呈</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">校领导到帮扶共建社区调研创文工</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">学工干部听党课&nbsp;&nbsp; 　初心使命促成长</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">李新昌：坚守初心使命　&nbsp;&nbsp; 勇攀农科高峰</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">我校召开主题教育工作推进会　&nbsp;&nbsp; 要求加强统筹兼顾</a>
                        <hr class="left-hr1" />
                        <a href="#" class="left1">主题教育调研活动在全校范围深入展开</a>
                        <hr class="left-hr1" />
                    </div>
                </div>
            </div>
        </div>
        <!--右链接-->
        <div class="con_right">
            <p class="left-right">
                <a href="#">肇庆学院人才招聘</a>
            </p>
        </div>
        </div>
        <!--脚部-->
        <div class="foot">
            <p>粤ICP备05008891号 &nbsp;&nbsp; @2016-2019&nbsp;肇庆学院 &nbsp; 版权所有 </p>
            <p>中国广东省肇庆市端州区肇庆大道 &nbsp;&nbsp; 电话：&nbsp;0758-2716233 &nbsp; 传真：&nbsp;0758-2716586&nbsp; 邮编：&nbsp;526061</p>
        </div>
    </body>

</html>

二、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);

四、效果图：

基于HTML+CSS+JS的肇庆学院首页静态页面源码

基于HTML+CSS+JS的肇庆学院首页静态页面源码

 

相关推荐