西安财经大学官网 80%首页部分还原

最新推荐文章于 2024-09-11 10:49:17 发布

友农

最新推荐文章于 2024-09-11 10:49:17 发布

阅读量308

点赞数 1

文章标签： html css js javascript html5

本文链接：https://blog.csdn.net/m0_49622667/article/details/113252306

版权

@西安财经大学官网模仿期末大作业

HTML文档

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>西安财经大学</title>
    <link rel="shortcut icon" href="xaufe.ico" type="image/x-icon" />
    <link rel="stylesheet" href="index.css">

</head>

<body>
    <div class="header">
        <div class="usear">
            <a href="#1">在校学生</a>|
            <a href="#2">教职员工</a>|
            <a href="#3">毕业校友</a>|
            <a href="#4">西财邮箱</a>|
            <a href="#5">信息门户</a>
            <img src="img/search.jpg" alt="">
        </div>
    </div>
    <div class="menu clearfix">
        <div class="slideshow-container">
            <div class="mySlides">
                <img src="img/202010221034068429ls.jpg" alt="" style="width: 100%;">
            </div>
            <div class="mySlides">
                <img src="img/20201217214719255h0c.png" alt="" style="width: 100%;">
            </div>
            <div class="mySlides">
                <img src="img/20201217215405049M6e.jpg" alt="" style="width: 100%;">
            </div>
            <div class="mySlides">
                <img src="img/20201218104146219kb2.jpg" alt="" style="width: 100%;">
            </div>
            <div class="mySlides">
                <img src="img/20201225092312594rwJ.jpg" alt="" style="width: 100%;">
            </div>
        </div>
        <div class="menuBar">
            <ul class="clearfix">
                <li class="s">
                    <h3><a href="#1">学校概况</a></h3>
                    <ul class="subMenu">
                        <li><a href="#1">学校简介</a></li>
                        <li><a href="#2">现任领导</a></li>
                        <li><a href="#3">学校沿革</a></li>
                        <li><a href="#4">全景校园</a></li>
                        <li><a href="#5">校园风景</a></li>
                    </ul>
                </li>
                <li class="s">
                    <h3><a href="#2">教育教学</a></h3>
                    <ul class="subMenu">
                        <li><a href="#1">本科生教育</a></li>
                        <li><a href="#2">研究生教育</a></li>
                        <li><a href="#3">留学生教育</a></li>
                        <li><a href="#4">思政教育</a></li>
                        <li><a href="#5">继续教育</a></li>
                        <li><a href="#6">教师主页</a></li>
                    </ul>
                </li>
                <li class="s">
                    <h3><a href="#3">院系设置</a></h3>
                </li>
                <li class="s">
                    <h3><a href="#4">机构设置</a></h3>
                </li>
                <li class="s">
                    <h3><a href="#5">招生就业</a></h3>
                    <ul class="subMenu">
                        <li><a href="#1">就业招生网</a></li>
                        <li><a href="#2">招生信息网</a></li>
                        <li><a href="#3">硕士招生</a></li>
                        <li><a href="#4">博士招生</a></li>
                        <li><a href="#5">成教招生</a></li>
                    </ul>
                </li>
                <li>
                    <img src="img/logo.png" alt="" class="logo ">
                </li>
                <li class="s">
                    <h3><a href="#7">科学研究</a></h3>
                    <ul class="subMenu">
                        <li><a href="#1">科研处</a></li>
                        <li><a href="#2">科研基地</a></li>

                    </ul>
                </li>
                <li class="s">
                    <h3><a href="#8">合作交流</a></h3>
                    <ul class="subMenu">
                        <li><a href="#1">国际交流处</a></li>
                        <li><a href="#2">社会合作处<br>(校友总会)</a></li>

                    </ul>
                </li>
                <li class="s">
                    <h3><a href="#9">学风建设</a></h3>
                </li>
                <li class="s">
                    <h3><a href="#10">信息公开</a></h3>
                </li>
                <li class="s">
                    <h3><a href="#11">公共资源</a></h3>
                    <ul class="subMenu">
                        <li><a href="#1">会议安排</a></li>
                        <li><a href="#2">教务系统</a></li>
                        <li><a href="#3">档案馆</a></li>
                        <li><a href="#4">校园卡查询</a></li>
                        <li><a href="#5">医疗服务</a></li>
                        <li><a href="#6">软件正版化</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-1-4">

        </div>
        <div class="col-3-4">

        </div>
    </div>
    <script src="index.js"></script>
</body>

</html>

CSS代码

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.clearfix::after {
    content: "";
    clear: both;
    display: none;
}

body {
    max-width: 1500px;
}

a {
    text-decoration: none;
}

ul,
li {
    list-style: none;
}

.header {
    background-color: rgb(52, 52, 52);
    width: 100%;
    height: 50px;
    color: rgb(255, 255, 255);
}

.header>.usear {
    float: right;
    margin-right: 50px;
}

.header>.usear a {
    color: rgb(255, 255, 255);
    display: inline-block;
    margin: auto 15px;
}

.header>.usear img {
    vertical-align: middle;
}

.menu {
    position: relative;
    width: 100%;
}

.menu>img {
    width: 100%;
    display: block;
}

.menu>.menuBar {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.1);
    top: 0;
    left: 0;
    right: 0;
}

.menuBar>ul {
    width: 1300px;
    margin: 0 auto;
}

.menuBar>ul>li {
    position: relative;
    float: left;
    padding: 17px 18px;
}

.menuBar>ul>li>.logo {
    vertical-align: middle;
}

.menuBar>ul>li>h3 {
    font-size: 15px;
    font-size: 100%;
    font-weight: normal;
}

.menuBar>ul>li>ul {
    position: absolute;
    top: 100px;
    left: 0;
}

.menuBar>ul>li>h3>a {
    text-align: center;
    color: white;
    display: inline-block;
    margin: 20px 0;
}

.menuBar>ul>.s:hover {
    background-color: rgb(173, 4, 7);
    border-bottom: 5px solid yellow;
}

.menuBar>ul>li>ul {
    background-color: rgba(0, 0, 0, 0.2);
    width: 100px;
    display: none;
}

.menuBar>ul>.s:hover>ul {
    display: block;
}

.subMenu>li {
    padding: 10px;
}

.subMenu>li:hover {
    background-color: rgba(174, 4, 6);
}

.menuBar>ul>li>ul>li>a {
    color: white;
}

.row {
    height: 50px;
}

[class*="col"] {
    float: left;
    height: 50px;
}

.row>.col-1-4 {
    background-color: rgb(36, 34, 34);
    width: 25%;
}

.row>.col-3-4 {
    background-color: rosybrown;
    width: 75%;
}

js代码

var slideIndex=0;
showSlides();

function showSlides(){
    var slides=document.getElementsByClassName("mySlides");

    for(i=0;i<slides.length;i++){
        slides[i].style.display="none";
    }
    slideIndex++;
    if(slideIndex>=slides.length)
        slideIndex=0;
    slides[slideIndex].style.display="block";
    setTimeout(showSlides,2000);
}