r41/index.html · 约 3892 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<title>发现好课</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="wrap">
11<div class="header">
12 <div class="top"><span class="role">学生端</span><span style="margin-left:auto;font-size:12px;opacity:.85">驰旭教育</span></div>
13 <h1>发现好课</h1>
14 <div class="sub">欢迎回来，张三 · 已学习 26 门课程</div>
15</div>
16<div class="search-bar"><input placeholder="搜索课程 / 讲师 / 知识点"><span class="mic">🔍</span></div>
17<div class="filters"><span class="f on">推荐</span><span class="f">编程开发</span><span class="f">设计创意</span><span class="f">职场技能</span><span class="f">考证考级</span><span class="f">语言学习</span></div>
18<div class="card" style="margin:12px 16px;overflow:hidden">
19 <div class="cover" style="height:120px;background:linear-gradient(135deg,#2563eb,#1e3a8a);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0 18px;color:#fff">
20 <div style="font-size:11px;background:rgba(255,255,255,.22);padding:2px 10px;border-radius:10px">限时特惠</div>
21 <div style="font-size:18px;font-weight:700;margin-top:8px">前端工程师全栈实战训练营</div>
22 <div style="font-size:12px;opacity:.9;margin-top:4px">42 课时 · 讲师 李老师 · 报名 3,280 人</div>
23 </div>
24 <a class="row" href="buy.html" style="text-decoration:none;color:inherit"><div class="info"><div class="t"><span class="price">¥199<small>起</small></span><span class="price-old">¥499</span></div><div class="s">距结束 02:14:36</div></div><span class="btn">立即抢购</span></a>
25</div>
26<div class="section-title"><span>继续学习</span><span class="more">我的课程</span></div>
27<div class="list">
28 <a class="row" href="video.html" style="text-decoration:none;color:inherit"><div class="avatar" style="background:linear-gradient(135deg,#06b6d4,#0e7490)">🐍</div><div class="info"><div class="t">Python 数据分析入门到实战</div><div class="s">已学 62% · 上次看到 第 8 章 Pandas</div></div><span class="tag blue">继续</span></a>
29 <a class="row" href="video.html" style="text-decoration:none;color:inherit"><div class="avatar" style="background:linear-gradient(135deg,#7c3aed,#5b21b6)">🎨</div><div class="info"><div class="t">UI 设计规范与组件库搭建</div><div class="s">已学 35% · 上次看到 第 4 章 栅格系统</div></div><span class="tag blue">继续</span></a>
30</div>
31<div class="section-title"><span>热门课程</span><span class="more" >查看更多</span></div>
32<div class="course-grid">
33 <a class="course" href="courses.html"><div class="cover" style="background:linear-gradient(135deg,#f59e0b,#b45309)">📈</div><div class="cb"><div class="ct">零基础学理财与基金定投</div><div class="cm">28 课时 · 8.6k 学习</div><div class="cp"><span class="price">¥99</span><span class="tag gray">职场</span></div></div></a>
34 <a class="course" href="courses.html"><div class="cover" style="background:linear-gradient(135deg,#10b981,#047857)">☕</div><div class="cb"><div class="ct">Java 后端微服务架构精讲</div><div class="cm">56 课时 · 5.2k 学习</div><div class="cp"><span class="price">¥299</span><span class="tag gray">编程</span></div></div></a>
35</div>
36<div class="bottom-nav"><a class="nav-item active" href="index.html"><span class="icon">🏠</span>首页</a><a class="nav-item" href="courses.html"><span class="icon">📚</span>课程</a><a class="nav-item" href="video.html"><span class="icon">▶️</span>学习</a><a class="nav-item" href="notes.html"><span class="icon">📝</span>笔记</a></div><div class="safe-bottom"></div>
37</div>
38
39</body>
40</html>