123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>金色时光App</title>
- <style>
- body {
- font-family: Arial, sans-serif;
- background-color: #f8f9fa;
- margin: 0;
- padding: 0;
- }
- header {
- background-color: #ffd700;
- color: #333;
- text-align: center;
- padding: 20px 0;
- }
- nav {
- background-color: #ffd700;
- padding: 10px;
- }
- ul {
- list-style-type: none;
- margin: 0;
- padding: 0;
- display: flex;
- flex-wrap: wrap;
- justify-content: space-around;
- }
- li {
- margin: 10px;
- position: relative;
- width: calc(25% - 20px); /* 均匀分布八个模块 */
- box-sizing: border-box;
- }
- a {
- text-decoration: none;
- color: #333;
- font-size: 1.2rem;
- transition: color 0.3s, font-size 0.3s;
- display: block;
- padding: 15px;
- background-color: #fff;
- border-radius: 8px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- text-align: center;
- }
- a:hover {
- color: #ff4500;
- font-size: 1.3rem;
- }
- .dropdown {
- display: none;
- background-color: #fff;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- padding: 10px;
- border-radius: 8px;
- margin-top: 10px;
- }
- li:hover .dropdown {
- display: block;
- }
- </style>
- </head>
- <body>
- <header>
- <h1>金色时光App</h1>
- </header>
- <nav>
- <ul>
- <li>
- <a href="#">用户界面设计</a>
- <div class="dropdown">
- <p>界面简洁、清晰,字体大,易于阅读。</p>
- <p>颜色对比度高,以适应老年人视力下降的情况。</p>
- <p>交互简单直观,减少复杂操作,提供语音和触控操作支持。</p>
- </div>
- </li>
- <li>
- <a href="#">个人资料管理</a>
- <div class="dropdown">
- <p>用户可以创建个人资料,包括姓名、年龄、兴趣爱好、健康状况等基本信息。</p>
- <p>提供照片上传功能,方便用户展示自己。</p>
- <p>个人隐私设置,用户可以控制自己的信息是否公开。</p>
- </div>
- </li>
- <li>
- <a href="#">社交互动</a>
- <div class="dropdown">
- <p>即时通讯:提供文字、语音、视频聊天功能,方便老年人与家人、朋友保持联系。</p>
- <p>朋友圈:类似微信朋友圈的功能,用户可以发布动态、照片、视频,分享生活点滴。</p>
- <p>兴趣小组:根据用户的兴趣爱好,创建不同的小组,如摄影、园艺、旅游等,方便老年人找到志同道合的朋友。</p>
- </div>
- </li>
- <li>
- <a href="#">健康与安全</a>
- <div class="dropdown">
- <p>健康监测:集成健康监测功能,如心率、血压监测,提醒用户按时服药等。</p>
- <p>紧急求助:一键SOS功能,遇到紧急情况时,用户可以快速联系家人或紧急服务。</p>
- <p>安全提醒:提供天气预报、防诈骗提醒等安全信息。</p>
- </div>
- </li>
- <li>
- <a href="#">学习与娱乐</a>
- <div class="dropdown">
- <p>在线课程:提供各种在线课程,如书法、绘画、音乐、舞蹈等,丰富老年人的精神生活。</p>
- <p>游戏娱乐:设计一些适合老年人的益智游戏,如拼图、象棋、麻将等,提供娱乐的同时锻炼大脑。</p>
- <p>阅读材料:提供电子书、有声书、新闻资讯等阅读材料,满足老年人的阅读需求。</p>
- </div>
- </li>
- <li>
- <a href="#">家庭互动</a>
- <div class="dropdown">
- <p>家庭相册:允许用户与家人共享照片,创建家庭相册,增进家庭成员间的联系。</p>
- <p>家庭日程:共享家庭日程,方便家人安排聚会、节日庆祝等。</p>
- </div>
- </li>
- <li>
- <a href="#">社区服务</a>
- <div class="dropdown">
- <p>生活助手:提供家政服务、医疗咨询、法律咨询等服务信息。</p>
- <p>活动组织:组织线下活动,如旅游、讲座、健康讲座等,鼓励老年人走出家门,参与社交。</p>
- </div>
- </li>
- <li>
- <a href="#">用户反馈与支持</a>
- <div class="dropdown">
- <p>提供客服支持,解答用户使用中的疑问。</p>
- <p>收集用户反馈,不断优化产品功能,提升用户体验。</p>
- </div>
- </li>
- </ul>
- </nav>
- <script>
- const dropdowns = document.querySelectorAll('.dropdown');
- dropdowns.forEach(dropdown => {
- dropdown.addEventListener('click', function (e) {
- e.stopPropagation();
- // 在这里添加点击下拉项的相应功能
- console.log('点击了下拉项:', e.target.textContent);
- });
- });
- </script>
- </body>
- </html>
|