2301_78624355 2024-06-17 00:57 采纳率: 0%
浏览 25
已结题

Html备忘录页面制作

Html备忘录页面制作
第二张图片需要实现可以添加日记 ，。/（”）

img

img

  • 写回答

13条回答 默认 最新

  • qq_230177505762 优质创作者: 嵌入式与硬件开发技术领域 2024-06-17 00:58
    关注

    以下参考免费微信小程序：皆我百晓生 作答，并由妄北y整理回复。

    制作一个HTML备忘录页面，可以分为两个主要部分：用户登录界面和备忘录列表界面。下面我将分别提供HTML代码示例来帮助你实现这两个界面。

    图1：用户登录界面

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .login-container {
            text-align: center;
            background-color: #f7f7f7;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        input[type="text"], input[type="password"] {
            width: 200px;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            padding: 10px 20px;
            margin: 10px 0;
            border: none;
            border-radius: 4px;
            background-color: #5cb85c;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background-color: #4cae4c;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>登录</h2>
        <input type="text" placeholder="请输入您的账号" required>
        <input type="password" placeholder="请输入您的密码" required>
        <button onclick="login()" type="button">登录</button>
        <p>还没有账号？<a href="#">立即注册</a></p>
    </div>

    <script>
        function login() {
            // 这里可以添加登录逻辑，例如验证输入的账号和密码
            alert("登录成功！");
            // 跳转到备忘录页面
            window.location.href = 'memo.html';
        }
    </script>
</body>
</html>

    图2：备忘录列表界面

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>备忘录页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .memo-list {
            list-style: none;
            padding: 0;
        }
        .memo-list li {
            background-color: #fff;
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        .memo-list .date {
            font-size: 0.8em;
            color: #666;
        }
        .memo-list .note {
            margin-top: 10px;
        }
        .add-note {
            text-align: center;
            padding: 20px;
            background-color: #f7f7f7;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>备忘录</h1>
    <div class="add-note">
        <button onclick="addNote()" type="button">添加日记</button>
    </div>
    <ul class="memo-list">
        <li>
            <div class="date">2022年8月17日中午12:02</div>
            <div class="note">你好你好</div>
        </li>
        <li>
            <div class="date">2022年8月17日中午12:00</div>
            <div class="note">长按笔记可弹出快捷菜单</div>
        </li>
    </ul>

    <script>
        function addNote() {
            // 这里可以添加添加笔记的逻辑
            alert("日记已添加！");
            // 这里可以更新列表显示新添加的笔记
        }
    </script>
</body>
</html>

    这两个HTML页面分别提供了登录界面和备忘录列表界面的基本结构和样式。你可以根据需要进一步添加JavaScript逻辑来实现用户登录验证、添加和编辑备忘录等功能。

    评论

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 6月17日
  • 创建了问题 6月17日