仿学校网页

Woodstock5

已于 2024-07-27 01:15:46 修改

阅读量79

点赞数

分类专栏： web前端文章标签： css javascript 前端 html

于 2024-07-26 20:23:55 首次发布

本文链接：https://blog.csdn.net/Woodstock5/article/details/140724100

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="=width=device-width,initial-scale=1.0">
    <title>学校网页</title>
<style>
    .WebTop{
        background-color:rgb(197, 191, 191);
        width: 100%;
        height: 50px;
        margin:auto
    }
    .text{
        color:blue;
        font-size: 30px;
    }
    .QuestionAnswer{
        position: absolute;
        right: 100px;
        top: 18px;
        width: 100px;
        height: 30px;
        background-color: blue;
        font-size:20px;
        text-align: center;
    }
    .QuestionAnswer-href{
        color: white;
    }
    .header{
        background-color: white;
        width: 100%;
        height: 100px;
        color: red;
        font-size: 20px;
        line-height: 0.1;
    }
    .header-title{
       font-family: "华文行楷";
    }
    .header-English{
        color: black;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        float: left;
    }
    .header-item{
        color: black;
        position: absolute;
        left: 650px;
        top: 90px;
    }
    .search{
        position:absolute;
        top: 90px;
        right: 400px;
    }
    .TeacherUse{
        color: black;
        position: absolute;
        right:200px;
        top:90px;
    }
    .TeacherUse-href{
        color: black;
    }
    .StudentUse{
        /* color: white; */
        /* background-color: blue; */
        position: absolute;
        right:100px;
        top:90px;
    }
    .StudentUse-href{
        color: white;
        background-color: blue;
    }
    .Photo{
        /* background-color: burlywood; */
        width: 100%;
        height: 500px;
    }
    .Subject{
        /* background-color: darkseagreen; */
        width: 100%;
        font-size: 30px;
    }
    .SomeSubject{
        font-style:none;
    }
    .one{
        width: 380px;
        height: 200px;
        background-color: aqua;
        margin-left: 40px;
        float: left;
    }
    .two{
        width: 380px;
        height: 200px;
        background-color: aqua;
        margin-left: 30px;
        float: left;
    }
    .three{
        width: 380px;
        height: 200px;
        background-color: aqua;
        margin-left: 30px;
        float: left;
    }
    .four{
        width: 380px;
        height: 200px;
        background-color: aqua;
        margin-left: 30px;
        float: left;
    }
    /* .fine{
        width: 300px;
        height: 200px;
        background-color: aqua;
        margin-left: 50px;
        float: left;
    } */
</style>
</head>
<body>
    <div class="WebTop">
        <div class="text">欢迎来到在线教学平台</div>
        <div class="QuestionAnswer">
            <a class="QuestionAnswer-href" href="./问题答疑.html">问题答疑</a>
        </div>
    </div>
    <div class="header">
        <div class="header-title">
            <h1><big>xxxxxx学校</big>
            <small>在线学堂</small></h1>
        </div>
        <div class="header-English">xxxxxxxxx xxxxxxxxx University</div>
        <div class="header-item">首页 全部课程 公开课 云客直播 新闻公告 数图资源 智汇大讲堂</div>
        <div class="search">搜素</div>
        <div class="TeacherUse">教师登录</a></div>
        <div class="StudentUse">
            <a class="StudentUse-href" href="./学生登录.html">学生登录</a></div>
    </div>
    <div class="Photo">
        <img src="../屏幕截图 2024-07-24 234014.png"width="100%"height="500px">
    </div>
    <div class="Subject"><b>公开课</b></div>
    <div class="SomeSubject">
        <div class="one">课程1</div>
        <div class="two">课程2</div>
        <div class="three">课程3</div>
        <div class="four">课程4</div>
    </div>
        
</body>
</html>
<script>

</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="=width=device-width,initial-scale=1.0">
    <title>学生登录</title>
<style>
    .header{
        background-color: white;
        width: 100%;
        height: 200px;
        color: red;
        font-size: 20px;
    }
    .header-title{
        font-family: "华文行楷";
        position:absolute;
        top: 80px;
        left: 200px;
    }
    .header-return{
        font-size: 15px;
        color: grey;
        position: absolute;
        right: 300px;
        top: 150px;
    }
    .header-return-href{
        color: gray;
    }
    .middle{
        width: 100%;
        height: 500px;
    }
    .picture{
        width: 50%;
        height: 500px;
        background-color:aqua;
        position:absolute;
        left: 0px;
    }
    .login{
        width: 50%;
        height: 500px;
        background-color: gray;
        position: absolute;
        right:0px;
        text-align: center;
        font-size: 30px;
    }
    .login-in{
        width: 260px;
        height: 40px;
        background-color: blue;
        color: white;
        position: absolute;
        top: 420px;
        right: 300px;
    }
</style>    
</head>
<body>
    <div class="header"></div>
        <div class="header-title">
            <h1>华南农业大学珠江学院
            <small>在线学堂</small></h1>
        </div>
        <div class="header-return">
            <a class="StudentUse-href" href="./学校网页.html">返回首页</a></div>
        </div>
    <div class="middle">
        <div class="picture"></div>
        <div class="login">
            <h1>学生登录</h1>
            <p>用户名<input type="text" name="Username"id=""value="请输入你的学号"></p>
            <p>密码<input type="text" name="Password"id=""value="请输入你的密码"></p>
            <p>验证码<input type="text" name="Verfication"id=""value="请输入验证码"></p>
            <p><input type="checkbox"name=""value="1"id="">保持登录状态
            <div class="login-in">登录</div>
        </div>
    </div>
</body>
</html>
<script>

</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="=width=device-width,initial-scale=1.0">
    <title>问题答疑</title>
<style>
    .WebTop{
        background-color:rgb(197, 191, 191);
        width: 100%;
        height: 50px;
        margin:auto
    }
    .text{
        color:blue;
        font-size: 30px;
    }
    .QuestionAnswer{
        position: absolute;
        right: 100px;
        top: 18px;
        width: 100px;
        height: 30px;
        background-color: blue;
        font-size:20px;
        text-align: center;
    }
    .QuestionAnswer-href{
        color: white;
    }
    .header{
        background-color: white;
        width: 100%;
        height: 100px;
        color: red;
        font-size: 20px;
        line-height: 0.1;
    }
    .header-title{
       font-family: "华文行楷";
    }
    .header-English{
        color: black;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        float: left;
    }
    .header-item{
        color: black;
        position: absolute;
        left: 650px;
        top: 90px;
    }
    .search{
        position:absolute;
        top: 90px;
        right: 400px;
    }
    .TeacherUse{
        color: black;
        position: absolute;
        right:200px;
        top:90px;
    }
    .TeacherUse-href{
        color: black;
    }
    .StudentUse{
        position: absolute;
        right:100px;
        top:90px;
    }
    .StudentUse-href{
        color: white;
        background-color: blue;
    }
    .picture{
        width:100%;
        height: 500px;
        background-color: rgb(68, 130, 201);
        color: white;
        font-size: 50px;
    }
    .word{
        position:absolute;
        top: 400px;
        left: 650px;
    }
    .about{
        border-color: black;
        background-color: white;
        font-size: 25px;
        width: 150px;
        height: 300px;
        position: absolute;
        top: 500px;
        left: 300px;
    }
    .lastest{
        width: 800px;
        height: auto;
        font-size: 20px;
        position: absolute;
        top: 690px;
        left: 550px;
    }
</style>
</head>
<body>
    <div class="WebTop">
        <div class="text">欢迎来到在线教学平台</div>
        <div class="QuestionAnswer">
            <a class="QuestionAnswer-href" href="./问题答疑.html">问题答疑</a>
        </div>
    </div>
    <div class="header">
        <div class="header-title">
            <h1><big>xxxxxx学校</big>
            <small>在线学堂</small></h1>
        </div>
        <div class="header-English">xxxxxxxxx xxxxxxxxx University</div>
        <div class="header-item">首页 全部课程 公开课 云客直播 新闻公告 数图资源 智汇大讲堂</div>
        <div class="search">搜素</div>
        <div class="TeacherUse">教师登录</div>
        <div class="StudentUse">
            <a class="StudentUse-href" href="./学生登录.html">学生登录</a></div>
    </div>
    <div class="picture">
        <div class="word">英华学堂 改变你我</div>
    </div>
    <div class="about">
        关于我们
        <hr></hr>
        服务条款    >
        问题答疑    >
        隐私政策    >
        帮助中心    >
        关于我们    >
        意见反馈    >    
    </div>
    <div class="lastest">
        <p>问题答疑
            <hr>
            <p>⚠️ 注意：如果遇到任何转账或者涉及隐私信息的时候切记要给自己的老师或同学打电话，请仔细确认信息不要直接转账！！！！！！</p>
            <p>⚠️平台更换名称为 “英华在线” 目前是老名字和新名字一起使用</p>
            <p>⚠️ 请同学不要使用手机浏览器打开pc网页学习 否则是无法记录学习时长的</p>
            <p>⚠️请同学联网使用软件</p>
            <p>⚠️请勿使用刷课工具刷课 系统检测到刷课工具直接封号处理，上报学校。</p>
            <p>⚠️积分变少是因为积分只是按照30天内产生的积分做的排名</p>
        </p>
    </div>
</body>
</html>
<script>
    
</script>