第三次作业

大大水瓶

于 2024-07-23 18:18:20 发布

阅读量50

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/2301_81088054/article/details/140641907

版权

一.登陆页面

1.代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学校官网</title>
<style>
    body {
        font-family: Arial, sans-serif;
    }
    .header {
        background-color: #4CAF50;
        color: white;
        padding: 10px 0;
        text-align: center;
    }
    .nav {
        background-color: #333;
        overflow: hidden;
    }
    .nav a {
        float: left;
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    .nav a:hover {
        background-color: #ddd;
        color: black;
    }
    .login-container {
        width: 300px;
        margin: 50px auto;
        padding: 20px;
        border: 1px solid #ddd;
    }
    .login-container h2 {
        text-align: center;
    }
    .login-form input[type="text"],
    .login-form input[type="password"] {
        width: 100%;
        padding: 10px;
        margin: 10px 0;
        display: inline-block;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }
    .login-form input[type="submit"] {
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 10px 0;
        border: none;
        cursor: pointer;
        width: 100%;
    }
    .login-form input[type="submit"]:hover {
        opacity: 0.8;
    }
</style>
</head>
<body>

<div class="header">
    <h1>学校官网</h1>
</div>

<div class="nav">
    <a href="#home">首页</a>
    <a href="#about">学校简介</a>
    <a href="#news">新闻动态</a>
    <a href="#contact">联系我们</a>
    <a href="#login" style="float:right">登录</a>
</div>

<div class="login-container" id="login">
    <h2>登录</h2>
    <form class="login-form">
        <label for="username"><b>用户名</b></label>
        <input type="text" placeholder="用户名 " name="username" required>

        <label for="psw"><b>密码</b></label>
        <input type="password" placeholder="用户密码" name="psw" required>

        <input type="submit" value="登录">
    </form>
</div>

</body>
</html>

2.运行截图：

二：官网首页

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>校园官网首页</title>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }
    .header {
        background-color: #003366;
        color: white;
        padding: 10px 0;
        text-align: center;
    }
    .nav {
        background-color: #333;
        overflow: hidden;
    }
    .nav a {
        float: left;
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    .nav a:hover {
        background-color: #ddd;
        color: black;
    }
    .carousel {
		position: relative;
        width:10px 0 ;
        margin: auto;
        overflow: hidden;
    }
    .carousel img.active {
        display: block;
    }
    .notification {
        background-color: #f4f4f4;
        padding: 10px;
        text-align: center;
    }
    .quick-links {
        background-color: #e6e6e6;
        padding: 10px;
        text-align: center;
    }
    .quick-links a {
        margin: 0 10px;
        text-decoration: none;
        color: #333;
    }
    .quick-links a:hover {
        text-decoration: underline;
    }
    .main-content {
        padding: 20px;
    }
    .footer {
        background-color: #333;
        color: white;
        text-align: center;
        padding: 10px 0;
    }
</style>
</head>
<body>

<div class="header">
    <h1>XXX学校</h1>
</div>

<div class="nav">
    <a href="#home">首页</a>
    <a href="#news">新闻动态</a>
    <a href="#academics">学术交流</a>
    <a href="#admissions">招生信息</a>
    <a href="#about">关于我们</a>
    <a href="#contact">联系我们</a>
</div>

<div class="carousel">
    <img src="../图片/屏幕截图 2024-07-23 173822.png" alt="">
</div>

<div class="notification">
    <p>最新通知：学校将于2024年7月25日举行校园开放日活动。</p>
</div>

<div class="quick-links">
    <a href="#">教务系统</a> |
    <a href="#">图书馆</a> |
    <a href="#">校园邮箱</a> |
    <a href="#">校园地图</a> |
    <a href="#">校历</a>
</div>

<div class="main-content">
    <h2>欢迎来到学校官网</h2>
    <p>这里是学校官网的简介内容，可以介绍学校的历史、文化、教育理念等信息。</p>
    <!-- 更多内容可以根据需要添加 -->
</div>

<div class="footer">
    <p>版权所有 &copy; XXX学校</p>
</div>

</body>
</html>

2.运行截图

三：校历界面：

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>校历</title>
<style>
    .calendar {
        width: 90%;
        margin: 20px auto;
        font-family: Arial, sans-serif;
    }
    .calendar h2 {
        text-align: center;
        margin-bottom: 10px;
    }
    .月份 {
        background-color: #f2f2f2;
        padding: 10px;
        margin-bottom: 20px;
    }
    .月份 h3 {
        background-color: #333;
        color: white;
        padding: 5px;
        margin: 0;
    }
    .事件 {
        background-color: #fff;
        padding: 10px;
    }
    .事件 {
        padding: 5px;
        border-bottom: 1px solid #ddd;
    }
    .事件:last-child {
        border-bottom: none;
    }
</style>
</head>
<body>

<div class="calendar">
    <h2>校 历 2024</h2>
    
    <div class="月份">
        <h3>一月</h3>
        <div class="事件">
            <div class="事件">1st - 元旦 (假日)</div>
            <div class="事件">15th - 期中考试开始</div>
            <div class="事件">18st - 期中考试结束</div>
        </div>
    </div>
    
    <div class="月份">
        <h3>二月</h3>
        <div class="事件">
            <div class="事件">10th - 春节</div>
        </div>
    </div>
    
    <div class="月份">
        <h3>四月</h3>
        <div class="事件">
            <div class="事件">4th - 清明</div>
        </div>
    </div>
</div>
</body>
</html>

2.运行截图