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

其他 2020-10-15 10:51:15 阅读次数: 0

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

四、效果图：

猜你喜欢

转载自blog.csdn.net/weixin_40914842/article/details/102709764
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022