超酷！追星娱乐打卡签到网页HTML代码大揭秘

以下是一个简单的追星娱乐打卡签到网页的HTML代码： ```html <!DOCTYPE html> <html lang="zh-CN"> <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; background-color: #f5f5f5; margin: 0; padding: 20px; color: #333; } .container { max-width: 800px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1 { color: #ff4081; text-align: center; } .star-card { border: 1px solid #ddd; border-radius: 8px; padding: 15px; margin-bottom: 15px; display: flex; align-items: center; } .star-img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-right: 15px; } .star-info { flex: 1; } .star-name { font-weight: bold; font-size: 18px; margin-bottom: 5px; } .check-in-btn { background-color: #ff4081; color: white; border: none; padding: 8px 15px; border-radius: 20px; cursor: pointer; font-weight: bold; } .check-in-btn:disabled { background-color: #ccc; cursor: not-allowed; } .check-in-count { font-size: 14px; color: #666; } .streak { color: #ff4081; font-weight: bold; } .search-bar { margin-bottom: 20px; display: flex; } .search-bar input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 4px; } </style> </head> <body> <div class="container"> <h1>明星打卡签到</h1> <div class="search-bar"> <input type="text" placeholder="搜索你喜欢的明星..."> </div> <div class="star-card"> <img src="https://via.placeholder.com/80" alt="明星照片" class="star-img"> <div class="star-info"> <div class="star-name">王一博</div> <div>今日活动: 新剧《无名》热播中</div> <div class="check-in-count">已连续签到 <span class="streak">7</span> 天</div> </div> <button class="check-in-btn">打卡</button> </div> <div class="star-card"> <img src="https://via.placeholder.com/80" alt="明星照片" class="star-img"> <div class="star-info"> <div class="star-name">肖战</div> <div>今日活动: 新专辑《光点》发布</div> <div class="check-in-count">已连续签到 <span class="streak">3</span> 天</div> </div> <button class="check-in-btn">打卡</button> </div> <div class="star-card"> <img src="https://via.placeholder.com/80" alt="明星照片" class="star-img"> <div class="star-info"> <div class="star-name">杨紫</div> <div>今日活动: 综艺《萌探探探案》录制</div> <div class="check-in-count">已连续签到 <span class="streak">15</span> 天</div> </div> <button class="check-in-btn" disabled>已打卡</button> </div> </div> <script> // 简单的打卡功能 document.querySelectorAll('.check-in-btn').forEach(btn => { btn.addEventListener('click', function() { if (!this.disabled) { this.disabled = true; this.textContent = '已打卡'; // 更新连续签到天数 const streakElement = this.closest('.star-card').querySelector('.streak'); streakElement.textContent = parseInt(streakElement.textContent) + 1; alert('打卡成功！'); } }); }); </script> </body> </html> ``` 这个网页包含以下功能： 1. 明星卡片展示区，包含明星照片、姓名和最新活动 2. 打卡按钮，点击后变为"已打卡"状态 3. 连续签到天数统计 4. 搜索框功能 5. 响应式设计，适合不同设备你可以根据需要修改明星信息、样式或添加更多功能。要使用真实明星照片，请替换placeholder.com的图片链接为实际图片URL。 ######[AI问答 | 1172点数解答 | 2025-06-03 19:40:29]

服务商

更多选项

快捷项

自定义