HTML+CSS+JS实现学校官网静态页面

AaaKing
147 阅读10分钟

首先是html文件 `

杭州职业技术学院后勤服务 
            </div>
        </div>
    </div>
</div>
<div class="nav-box">
    <div class="nav center ">
        <ul class="nav1 clear">
            <li class="list1"><a href="#">学校首页</a>
                <ul class="nav2">
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li class="list1"><a href="#">学校首页</a>
                <ul class="nav2">
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li class="list1"><a href="#">学校首页</a>
                <ul class="nav2">
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li class="list1"><a href="#">学校首页</a>
                <ul class="nav2">
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li class="list1"><a href="#">学校首页</a>
                <ul class="nav2">
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li class="list1"><a href="#">学校首页</a>
                <ul class="nav2">
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li class="list1"><a href="#">学校首页</a>
                <ul class="nav2">
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <div class="clear"></div>
        </ul>
    </div>
</div>
<div class="banner-box">
    <div class="banner">
        <div class="slick">
            <div><a href="#"><img src="./images/banner-1.jpg" alt=""></a></div>
            <div><a href="#"><img src="./images/banner-2.jpg" alt=""></a></div>
            <div><a href="#"><img src="./images/banner-3.jpg" alt=""></a></div>
            <div><a href="#"><img src="./images/banner-4.jpg" alt=""></a></div>
        </div>
    </div>
</div>
<div class="meeting-box">
    <div class="houqin center">
        <div class="meeting">
            <div class="meeting-tit"><img src="./images/dongtai.png" alt="">
                <h2>后勤动态</h2>
            </div>
            <div class="lingxin"><img class="jiantou" src="./images/more-jiantou.png" alt=""></div>
            <div class="meeting-more"><a class="more" href="#"><span>更多</span></a>
            </div>
            <div class="meeting-banner">

                <div class="slick-meeting">
                    <div>
                        <a href="javascript:;"><img src="./images/houqin-2.jpg" alt="">
                            <div class="meeting-text">
                                <h2>学校召开常态化防控工作会议</h2>
                                <p>为贯彻省防控办《关于一步精准实施新冠肺炎疫情防控工作的通知》（2021年【35】号）文件精神，研究部署当前疫情防控工作...</p>
                                <div class="text-data">
                                    <p>06-22</p><span>2022</span>
                                </div>
                                <img src="./images/xiexian.png" alt="">
                            </div>
                        </a>
                    </div>
                    <div><a href="javascript:;"><img src="./images/houqin.jpg" alt="">
                            <div class="meeting-text">
                                <h2>学校召开常态化防控工作会议</h2>
                                <p>为贯彻省防控办《关于一步精准实施新冠肺炎疫情防控工作的通知》（2021年【35】号）文件精神，研究部署当前疫情防控工作...</p>
                                <div class="text-data">
                                    <p>06-22</p><span>2022</span>
                                </div>
                                <img src="./images/xiexian.png" alt="">
                            </div>
                        </a></div>
                    <div><a href="javascript:;"><img src="./images/houqin-2.jpg" alt="">
                            <div class="meeting-text">
                                <h2>学校召开常态化防控工作会议</h2>
                                <p>为贯彻省防控办《关于一步精准实施新冠肺炎疫情防控工作的通知》（2021年【35】号）文件精神，研究部署当前疫情防控工作...</p>
                                <div class="text-data">
                                    <p>06-22</p><span>2022</span>
                                </div>
                                <img src="./images/xiexian.png" alt="">
                            </div>
                        </a></div>

                </div>
            </div>
        </div>
        <div class="meeting-list">
            <ul>
                <img class="bianjiao" src="./images/bianjiao.png" alt="">
                <li> <a href="#">
                        <div class="meeting-data">
                            <p>06-30</p><span>2022</span>
                        </div>
                        <div class="meeting-title">
                            <h2>学校召开期末疫情防控专题会议</h2>
                            <p>为慎终如始做好疫情防控，确保寒假期间校园安全，1月4日上午，校防控办在...</p>
                        </div>
                    </a></li>
                <li> <a href="#">
                        <div class="meeting-data">
                            <p>06-30</p><span>2022</span>
                        </div>
                        <div class="meeting-title">
                            <h2>学校召开期末疫情防控专题会议</h2>
                            <p>为慎终如始做好疫情防控，确保寒假期间校园安全，1月4日上午，校防控办在...</p>
                        </div>
                    </a></li>
                <li> <a href="#">
                        <div class="meeting-data">
                            <p>06-30</p><span>2022</span>
                        </div>
                        <div class="meeting-title">
                            <h2>学校召开期末疫情防控专题会议</h2>
                            <p>为慎终如始做好疫情防控，确保寒假期间校园安全，1月4日上午，校防控办在...</p>
                        </div>
                    </a></li>
                <li> <a href="#">
                        <div class="meeting-data">
                            <p>06-30</p><span>2022</span>
                        </div>
                        <div class="meeting-title">
                            <h2>学校召开期末疫情防控专题会议</h2>
                            <p>为慎终如始做好疫情防控，确保寒假期间校园安全，1月4日上午，校防控办在...</p>
                        </div>
                    </a></li>
                <li> <a href="#">
                        <div class="meeting-data">
                            <p>06-30</p><span>2022</span>
                        </div>
                        <div class="meeting-title">
                            <h2>学校召开期末疫情防控专题会议</h2>
                            <p>为慎终如始做好疫情防控，确保寒假期间校园安全，1月4日上午，校防控办在...</p>
                        </div>
                    </a></li>



            </ul>
        </div>
    </div>
</div>
<div class="notice-box">
    <div class="notice center">
        <img src="./images/yuan.png" alt="" class="xiaoyuan">
        <a href="#"><img src="./images/more→.png" alt="" class="gengduo"></a>
        <img class="guasheng" src="./images/notice-guasheng.png" alt="">
        <div class="gonggao">
            <img src="./images/gonggao.png" alt="">
        </div>
        <div class="notice-list">
            <ul>
                <li><a href="#">
                        <p class="notice-p">杭州职业技术学院新冠肺炎疫情防控领导</p>
                        <span>06-15</span>
                        <img src="./images/xiabiao.png" alt="" class="xiabiao">
                    </a>
                </li>
                <li><a href="#">
                        <p class="notice-p">杭州职业技术学院新冠肺炎疫情防控领导小组办公室提醒函（2022第2号）</p>
                        <span>06-15</span>
                        <img src="./images/xiabiao.png" alt="" class="xiabiao">
                    </a>
                </li>
                <li><a href="#">
                        <p class="notice-p">杭州职业技术学院新冠肺炎疫情防控领导小组办公室提醒函（2022第2号）</p>
                        <span>06-15</span>
                        <img src="./images/xiabiao.png" alt="" class="xiabiao">
                    </a>
                </li>
                <li><a href="#">
                        <p class="notice-p">杭州职业技术学院新冠肺炎疫情防控领导小组办公室提醒函（2022第2号）</p>
                        <span>06-15</span>
                        <img src="./images/xiabiao.png" alt="" class="xiabiao">
                    </a>
                </li>
                <li><a href="#">
                        <p class="notice-p">杭州职业技术学院新冠肺炎疫情防控领导小组办公室提醒函（2022第2号）</p>
                        <span>06-15</span>
                        <img src="./images/xiabiao.png" alt="" class="xiabiao">
                    </a>
                </li>
                <li><a href="#">
                        <p class="notice-p">杭州职业技术学院新冠肺炎疫情防控领导小组办公室提醒函（2022第2号）</p>
                        <span>06-15</span>
                        <img src="./images/xiabiao.png" alt="" class="xiabiao">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="ser-box">
    <div class="ser center">
        <div class="ser-title">
            <h2 class="fuwu">服务指南</h2>
            <div class="ser-yiqing">
                <span class="yiqing current">信息公开</span><span>/</span><span class="yiqing">党务公开</span>
            </div>
            <a href="#" class="fk-more"><img src="./images/more→.png" alt=""></a>
        </div>
        <div class="ser-left">
            <ul>
                <li><a href="">
                        <div class="icon"><img src="./images/icon1.png" alt=""></div>
                        <p>国资管理</p>
                    </a></li>
            </ul>
            <ul>
                <li><a href="">
                        <div class="icon"><img src="./images/icon2.png" alt=""></div>
                        <p>国资管理</p>
                    </a></li>
            </ul>
            <ul>
                <li><a href="">
                        <div class="icon"><img src="./images/icon3.png" alt=""></div>
                        <p>国资管理</p>
                    </a></li>
            </ul>
            <ul>
                <li><a href="">
                        <div class="icon"><img src="./images/icon4.png" alt=""></div>
                        <p>国资管理</p>
                    </a></li>
            </ul>
            <ul>
                <li><a href="">
                        <div class="icon"><img src="./images/icon5.png" alt=""></div>
                        <p>国资管理</p>
                    </a></li>
            </ul>
            <ul>
                <li><a href="">
                        <div class="icon"><img src="./images/icon6.png" alt=""></div>
                        <p>国资管理</p>
                    </a></li>
            </ul>
            <ul>
                <li><a href="">
                        <div class="icon"><img src="./images/icon7.png" alt=""></div>
                        <p>国资管理</p>
                    </a></li>
            </ul>
            <ul>
                <li><a href="">
                        <div class="icon"><img src="./images/icon8.png" alt=""></div>
                        <p>国资管理</p>
                    </a></li>
            </ul>

        </div>
        <div class="ser-right">
            <ul class="item">
                <li><a href="#">后勤服务中心召开廉政风险排查防控工作推进会</a><span>2022.07.27</span></li>
                <li><a href="#">后勤服务中心召开廉政风险排查防控工作推进会</a><span>2022.07.27</span></li>
                <li><a href="#">后勤服务中心召开廉政风险排查防控工作推进会</a><span>2022.07.27</span></li>
                <li><a href="#">后勤服务中心召开廉政风险排查防控工作推进会</a><span>2022.07.27</span></li>
            </ul>
            <ul class="item">
                <li><a href="#">校领导率队开展暑期在建工程专项检查工作</a><span>2022.07.27</span></li>
                <li><a href="#">校领导率队开展暑期在建工程专项检查工作</a><span>2022.07.27</span></li>
                <li><a href="#">校领导率队开展暑期在建工程专项检查工作</a><span>2022.07.27</span></li>
                <li><a href="#">校领导率队开展暑期在建工程专项检查工作</a><span>2022.07.27</span></li>
            </ul>
        </div>
    </div>
</div>
<div class="footer-box">
    <div class="footer center">
        <div class="footer-l">
            <div class="footer-logo"><a href="#"><img src="./images/foot-logo.png" alt=""></a></div>
            <div class="down">
                <p>地址：杭州下沙高教园区学源街68号</p>
                <p>电话：0565-4558966 邮编：710062</p>
                <p>E-mail:416513@mail.com</p>
            </div>
        </div>
        <div class="footer-m">
            <p>友情链接</p>
            <ul>
                <li><a href="#">杭州职业技术学院</a></li>
                <li><a href="#">杭州职业技术学院</a></li>
                <li><a href="#">杭州职业技术学院</a></li>
            </ul>
        </div>
        <div class="footer-r">
            <ul>
                <li><img src="./images/QR-1.jpg" alt="">
                    <p>官方微信</p>
                </li>
                <li><img src="./images/QR-1.jpg" alt="">
                    <p>官方微信</p>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="banquan-box">
    <p>版权所有：© 2003-2014 杭州职业技术学院 </p>
</div>

<script src="./js/jqury.js"></script>
<script src="./js/slick.min.js"></script>
<script src="./js/index.js"></script>
` css样式 .center { 
width: 1308px;
margin: 0 auto;

}

body { background-color: #f5f5f5; min-width: 1308px;

}

.header-box { background-color: #1f5c93; height: 106px; border-bottom: 1px solid #608db5;

}

.header-logo { margin-top: 15px; float: left; }

.header-right { float: right; width: 500px;

}

.header-right ul { width: 216px; height: 15px; text-align: center; margin-top: 36px; float: left;

}

.header-right ul span { color: #acc9e3; }

.header-right ul li { width: 60px; line-height: 15px; display: inline-block; }

.header-right ul li a { color: #acc9e3; }

.header-right .sear { float: right; width: 234px; margin-top: 30px; }

.sear input { vertical-align: bottom; background-color:#124470; border: none; width: 180px; height: 30px; float: right; padding-left: 10px; color: #fff; border-radius: 6px 0 0 6px;

}

.sear input::placeholder { color: white; }

.sear img { background-color: #124470; border: none; float: right; width: 30px; height: 30px; padding: 5px; box-sizing: border-box; border-radius:0 6px 6px 0; }

.nav-box { height: 57px; background-color: #206099; } .nav1 { text-align: center;

}

.nav2 { display: none; position: absolute; width: 183px; z-index: 999; }

.list1 { float: left; line-height: 57px; width: 14%; }

.list1:hover { background-color: #0b4375; }

.list1:hover .nav2 { display: block; background-color: white; animation: move 0.6s 0s;

}

@keyframes move {

/*设置animation动画参数*/
0% {
    /*动画开始时*/
    height: 0px;
}

100% {
    /*动画结束时*/
    height: 171px;
}

}

.nav2 { display: none; text-align: center; overflow: hidden; }

.nav2 li:hover { background-color: #1e5a90; }

.list1 a { color: white; }

.nav2 a { color: black; }

.banner-box { height: 521px; /* background-color: pink; */

}

.banner a img { display: block; max-width: 100%; max-height: 100%; width: 100%; height: 100%;

} .slick-prev { width: 60px; height: 60px; left: 165px; background: url(../images/last.png) }

.slick-next { width: 60px; height: 60px; right: 165px; background: url(../images/next.png) }

.slick-prev, .slick-next {

position: absolute;
top: 50%;
display: block;
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
z-index: 999;

}

.meeting-box { margin-top: 80px; /* background-color: pink; */ width: 100%; height: 550px;

}

.houqin { position: relative; }

.meeting { width: 622px; height: 464px; position: absolute; left: 0; /* background-color: aquamarine; */ z-index: 9; }

.meeting-list { right: 0; width: 724px; height: 546px; background-color: #ffffff; position: absolute; }

.meeting-tit img { vertical-align: text-bottom; }

.meeting-tit { display: inline-block; }

.meeting-tit h2 { font-size: 30px; color: #030303; font-weight: normal; display: inline; margin-left: 14px; }

.meeting-more a { position: absolute; right: 61px; top: 10px; display: inline-block; font-size: 16px; color: #2571b6; } .lingxin{ position: absolute; top: -1px; left: 563px; width: 42px; height: 42px; display: block; color: transparent; background:url(../images/lingxin11.png) no-repeat -1px -1px; display: none; } .jiantou{ position: absolute; top: 13px; left: 8px; }

.meeting-more .img { position: absolute; right: 0; top: 0;

}

.slick-dots { display: inline-block; position: absolute; top: 346px; right: 10px; }

.slick-dots li { display: inline-block; }

.slick-dots li button { display: block; cursor: pointer; border: none; outline: none; z-index: 999; opacity: 0; }

.slick-dots li { width: 10px; height: 10px; border-radius: 50%; margin: 0 7px; background-color: white; }

.slick-dots .slick-active { background-color: #00d1c2; transform: scale(1.5, 1.5); }

.meeting-list ul { margin-left: 90px; }

.meeting-data { border-right: 1px solid #c0c0c0; float: left; width: 70px; }

.meeting-data p { font-size: 18px; color: #2571b6; font-style: italic; }

.meeting-data span { font-size: 14px; color: #444343; }

.meeting-title { margin-left: 14px; float: right; }

.meeting-list ul { position: relative; }

.bianjiao { position: absolute; top: 497px; right: 0; }

.meeting-list ul li a { display: inline-block; overflow: hidden; border-bottom: 1px solid skyblue; padding: 28px 0 10px 0;

}

.meeting-list ul li:nth-child(6) a { border-bottom: none; }

.meeting-title h2 { font-size: 16px; color: #2a2a2a; font-weight: normal; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.meeting-title h2:hover { color: #2571b6; font-weight: 900;

}

.meeting-title p { display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; color: #808080; }

.meeting-text { background-color: #2571b6; padding-left: 16px; position: relative; padding-bottom: 20px;

}

.meeting-text h2 { font-size: 20px; color: #fff; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 10px; }

.meeting-text p { width: 432px; line-height: 24px; font-size: 14px; color: #fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }

.text-data { position: absolute; top: 10px; left: 550px; }

.text-data p { line-height: 35px; font-size: 22px; color: #fff; font-style: italic; }

.text-data span { font-size: 16px; color: #fff; font-style: italic; }

.meeting-text img { position: absolute; top: 10px; left: 500px; }

.notice { position: relative; /* background-color: pink; */ width: 1308px; height: 380px; margin-top: 90px; }

.guasheng { position: absolute; top: -37px; left: 13px; }

.gonggao { width: 127px; height: 268px; float: left; }

.gengduo { position: absolute; top: -18px; right: 0; }

.xiaoyuan { position: absolute; top: -42px; left: 60px; z-index: 999; }

.notice-list { width: 1147px; height: 264px; float: right;

}

.notice-list ul li { float: left; width: 31%; box-sizing: border-box; padding: 15px 25px; margin-left: 2%; margin-bottom: 25px; background: #fff url(../images/sect2-more.png) no-repeat right bottom; position: relative; }

.notice-list ul li p { position: relative; line-height: 26px; font-size: 16px; color: #3e3e3e; margin-bottom: 5px; height: 52px; overflow: hidden; }

.notice-list ul li:hover { background: url(../images/notice-2.png); }

.notice-list ul li:hover .notice-p { color: white; }

.notice-list ul li span { display: inline-block; padding-top: 5px; border-top: 1px solid #2571b6; font-size: 18px; color: #aaa7ab; }

.xiabiao { position: absolute; top: 77px; right: 0; }

.ser { width: 1308px; height: 422px; /* background-color: pink; */ }

.ser-left { float: left; background-color: #fff; width: 626px; height: 262px;

}

.fuwu { padding-left: 15px; font-size: 26px; background: url(../images/fw.png) no-repeat left center; display: inline-block; width: 664px; }

.ser-right { float: right; width: 625px; height: 265px; background-color: #ffffff;

}

.ser-left ul { text-align: center; line-height: 28px; }

.ser-left ul li { float: left; width: 25%; margin-top: 18px; }

.icon { width: 70px; height: 70px; border-radius: 50%; background-color: #2571b6; display: inline-block; position: relative; }

.icon img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.icon:hover { background-color: #00d1c2; }

.ser-left ul li p { font-size: 14px; color: #262626; }

.ser-yiqing { display: inline-block;

}

.ser-yiqing span { width: 288px; height: 28px; font-family: SourceHanSerifSC-Bold; font-size: 26px; font-weight: normal; font-stretch: normal; line-height: 24px; letter-spacing: 0px; color: #3c3c3c; margin-right: 20px; cursor: pointer;

}

.current { border-bottom: 3px solid #04c3e3; padding-bottom: 5px; }

.item:nth-child(2) { display: none; }

.fk-more { float: right; margin-top: 10px; }

.ser-right ul li { margin-left: 30px; padding-left: 14px; background: url(../images/fk-list.png) no-repeat left center; height: 64px; border-bottom: 1px solid #e5e5e5; }

.ser-right ul li:nth-child(4) { border: none; }

.ser-right ul li a { height: 14px; font-family: MicrosoftYaHei; font-size: 15px; font-weight: normal; font-stretch: normal; line-height: 64px; letter-spacing: 0px; color: #3e3e3e; }

.ser-right ul li span { float: right; font-family: MicrosoftYaHei; font-size: 14px; font-weight: normal; font-style: italic; font-stretch: normal; line-height: 64px; letter-spacing: 0px; color: #a3a3a3; margin-right: 20px; }

.ser-right ul li a:hover { color: #2571b6; }

.footer-box { height: 248px; background: url(../images/foot.png); }

.footer-logo { padding-top: 40px; }

.down { padding-left: 51px; }

.down p { font-size: 14px; color: #fff; margin-top: 14px; }

.footer-l { width: 569px; float: left; }

.footer-m { display: inline-block;

}

.footer-m p { font-size: 14px; color: #fff; font-weight: normal; padding-top: 48px; }

.footer-m a { display: inline-block; padding-left: 15px; background: url(../images/link-icon.png) no-repeat left center; margin-top: 15px; font-size: 14px; color: #fff;

}

.footer-r { float: right; }

.footer-r li { display: inline-block; padding-top: 40px; margin-left: 20px; }

.footer-r li p { text-align: center; font-size: 14px; color: rgba(255, 255, 255, .8); }

.banquan-box {

background-color: #032341;
text-align: center;

}

.banquan-box p { font-size: 14px; color: #fff; line-height: 55px; }

```// 大轮播图
$(function () {
    $('.slick').slick({

        dots: false,

    });
});
// 会议轮播图
$(function () {
    $('.slick-meeting').slick({
        arrows: false,
        dots: true,

    });
    //     // 会议轮播图小点点击变色
    //     $('.slick-dots').children(':first-child').css('background-color', '#00d2c0');

    //     $('.slick-dots').children().click(function () {
    //         $('.slick-dots').children().css({
    //             'background-color': 'white',
    //             'width': '10px',
    //             'height': '10px'
    //         })
    //         $(this).css({
    //             'background-color': '#00d2c0',
    //             'width': '15px',
    //             'height': '15px'
    //         })

    //     })

    // $('.slick-dots').children().click(function() {
    //     $('.slick-dots').children().addClass('bgc1')
    //     $(this).addClass('bgc2')
    //         //点击这个a，相应的bod介绍项目显示，需要索引号(这个索引号应该用的是li的)
    //     // var index = $(this).parent().index()
    //     // console.log(index)
    //     //     //根据这个索引号使，内容里面相应的div显示
    //     // $('.neir>div').eq(index).show()
    //     //     //排他思想，他的兄弟都要隐藏
    //     // $('.neir>div').eq(index).siblings().hide()
    // })

});



// 排他切换栏

var li = document.querySelectorAll('.yiqing')
var item = document.querySelectorAll('.item')
for (var i = 0; i < li.length; i++) {

    li[i].setAttribute('index', i)

    li[i].onclick = function () {

        for (var i = 0; i < li.length; i++) {

            li[i].className = ''

            item[i].style.display = 'none'
        }

        this.className = 'current'

        item[this.getAttribute('index')].style.display = 'block'
    }
}
var more = document.querySelector('.more');
var lingxin = document.querySelector('.lingxin')
more.onmouseenter = function(){
    lingxin.style.display = 'block'
}
more.onmouseleave = function(){
    lingxin.style.display = 'none'
}
avatar
文章
阅读
粉丝