Html备忘录页面制作
第二张图片需要实现可以添加日记 ,。/(”)
13条回答 默认 最新
关注 以下参考免费微信小程序:皆我百晓生 作答,并由妄北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逻辑来实现用户登录验证、添加和编辑备忘录等功能。
解决 无用评论 打赏 举报
悬赏问题
- ¥15 pcl运行在qt msvc2019环境运行效率低于visual studio 2019
- ¥15 MAUI,Zxing扫码,华为手机没反应。可提高悬赏
- ¥15 python运行报错 ModuleNotFoundError: No module named 'torch'
- ¥100 华为手机私有App后台保活
- ¥15 sqlserver中加密的密码字段查询问题
- ¥20 有谁能看看我coe文件到底哪儿有问题吗?
- ¥20 我的这个coe文件到底哪儿出问题了
- ¥15 matlab使用自定义函数时一直报错输入参数过多
- ¥15 设计一个温度闭环控制系统
- ¥100 rtmpose姿态评估