200 lines
7.4 KiB
HTML
200 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link rel="stylesheet" href="./css/base.css">
|
|
<link rel="stylesheet" href="./css/index.css">
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<div class="wrapper">
|
|
<div class="logo">
|
|
<h1><a href="#">学成在线</a></h1>
|
|
</div>
|
|
<div class="nav">
|
|
<ul>
|
|
<li><a class="active" href="#">首页</a></li>
|
|
<li><a href="#">课程</a></li>
|
|
<li><a href="#">职业规划</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="search">
|
|
<input type="text" placeholder="请输入关键词">
|
|
<a href="#"></a>
|
|
</div>
|
|
<div class="user">
|
|
<img src="./uploads/微信图片_20240716025920.jpg" alt="">
|
|
<span>驰子学前端</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="banner">
|
|
<div class="wrapper">
|
|
<div class="left">
|
|
<ul>
|
|
<li><a href="#">前端开发</a></li>
|
|
<li><a href="#">后端开发</a></li>
|
|
<li><a href="#">移动开发</a></li>
|
|
<li><a href="#">人工智能</a></li>
|
|
<li><a href="#">商业预测</a></li>
|
|
<li><a href="#">云计算&大数据</a></li>
|
|
<li><a href="#">运维&测试</a></li>
|
|
<li><a href="#">UI设计</a></li>
|
|
<li><a href="#">产品</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="right">
|
|
<h3>我的课程表</h3>
|
|
<div class="content">
|
|
<dl>
|
|
<dt>数据可视化课程</dt>
|
|
<dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>Vue3医疗项目课程</dt>
|
|
<dd><span>正在学习</span>-<strong>认识组合式API</strong></dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>数据可视化课程</dt>
|
|
<dd><span>正在学习</span>-<strong>rudex配合TS使用</strong></dd>
|
|
</dl>
|
|
<a href="#">全部课程</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="recommend wrapper">
|
|
<h3>精品推荐</h3>
|
|
<ul>
|
|
<li><a href="#">HTML</a></li>
|
|
<li><a href="#">CSS</a></li>
|
|
<li><a href="#">JavaScript</a></li>
|
|
<li><a href="#">Node.js</a></li>
|
|
<li><a href="#">Ajax</a></li>
|
|
<li><a href="#">Vue2.0</a></li>
|
|
<li><a href="#">Vue3.0</a></li>
|
|
<li><a href="#">TypeScript</a></li>
|
|
<li><a href="#">React</a></li>
|
|
</ul>
|
|
<a class="modify" href="#">修改兴趣</a>
|
|
</div>
|
|
|
|
<div class="course wrapper">
|
|
<div class="hd">
|
|
<h3>精品推荐</h3>
|
|
<a class="more" href="#">查看全部</a>
|
|
</div>
|
|
<div class="bd">
|
|
<ul>
|
|
<li>
|
|
<a href="#">
|
|
<div class="pic"></div>
|
|
<div class="text">
|
|
<h4>JavaScript数据看板项目实战</h4>
|
|
<p><span>高级</span> · <i>1125</i>人在学习</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="pic"></div>
|
|
<div class="text">
|
|
<h4>JavaScript数据看板项目实战</h4>
|
|
<p><span>高级</span> · <i>1125</i>人在学习</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="pic"></div>
|
|
<div class="text">
|
|
<h4>JavaScript数据看板项目实战</h4>
|
|
<p><span>高级</span> · <i>1125</i>人在学习</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="pic"></div>
|
|
<div class="text">
|
|
<h4>JavaScript数据看板项目实战</h4>
|
|
<p><span>高级</span> · <i>1125</i>人在学习</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="pic"></div>
|
|
<div class="text">
|
|
<h4>JavaScript数据看板项目实战</h4>
|
|
<p><span>高级</span> · <i>1125</i>人在学习</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="pic"></div>
|
|
<div class="text">
|
|
<h4>JavaScript数据看板项目实战</h4>
|
|
<p><span>高级</span> · <i>1125</i>人在学习</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="pic"></div>
|
|
<div class="text">
|
|
<h4>JavaScript数据看板项目实战</h4>
|
|
<p><span>高级</span> · <i>1125</i>人在学习</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="pic"></div>
|
|
<div class="text">
|
|
<h4>JavaScript数据看板项目实战</h4>
|
|
<p><span>高级</span> · <i>1125</i>人在学习</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="pic"></div>
|
|
<div class="text">
|
|
<h4>JavaScript数据看板项目实战</h4>
|
|
<p><span>高级</span> · <i>1125</i>人在学习</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">
|
|
<div class="pic"></div>
|
|
<div class="text">
|
|
<h4>JavaScript数据看板项目实战</h4>
|
|
<p><span>高级</span> · <i>1125</i>人在学习</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper">
|
|
<div class="hd">
|
|
<h3>前端开发工程师</h3>
|
|
<ul>
|
|
<li><a href="#" class="active">热门</a></li>
|
|
<li><a href="#">初级</a></li>
|
|
<li><a href="#">中级</a></li>
|
|
<li><a href="#">高级</a></li>
|
|
</ul>
|
|
<a class="more" href="#">查看全部</a>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |