三个部分：
1.头部（logo、导航栏、搜索框、用户小标）
2.中部（课程选择、我的课程表、精品推荐、编程入门、数据分析师、机器学习工程师、前端开发工程师）
3.底部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学成在线首页</title>
<link rel="stylesheet" href="https://juejin.cn/post/style.css">
</head>
<body>
<!-- header 头部 -->
<div class="w header">
<!-- logo -->
<div class="logo">
<img src="https://juejin.cn/post/images/logo.png" >
</div>
<!-- 导航栏 -->
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">课程</a></li>
<li><a href="">职业规划</a></li>
</ul>
</div>
<!-- 搜索框 -->
<div class="search">
<input type="text" value="请输入关键字">
<button>
<img src="https://juejin.cn/post/images/bot.png" >
</button>
</div>
<!-- 用户user小标 -->
<div class="user">
<img src="https://juejin.cn/post/images/us1.png" >
qq-lilei
</div>
</div>
<!-- banner -->
<div class="banner">
<div class="w">
<!-- 课程选择 -->
<div class="subnav">
<ul>
<li><a href="">前端开发<span>></span></a></li>
<li><a href="">后端开发<span>></span></a></li>
<li><a href="">移动开发<span>></span></a></li>
<li><a href="">人工智能<span>></span></a></li>
<li><a href="">商业预测<span>></span></a></li>
<li><a href="">云计算&大数据<span>></span></a></li>
<li><a href="">运维&从测试<span>></span></a></li>
<li><a href="">UI设计<span>></span></a></li>
<li><a href="">产品<span>></span></a></li>
</ul>
</div>
<!-- 我的课程表 -->
<div class="course">
<h2>我的课程表</h2>
<div class="bd">
<ul>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
<li>
<h4>继续学习 Java入门</h4>
<p>正在学习-继承</p>
</li>
<li>
<h4>继续学习 数据结构</h4>
<p>正在学习-二叉树</p>
</li>
</ul>
<a href="" class="all">全部课程</a>
</div>
</div>
</div>
</div>
<!-- 精品推荐 导航栏 -->
<div class="w reco">
<h4>精品推荐</h4>
<ul>
<li><a href="">JQuery</a></li>
<li><a href="">Spark</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">JavaWeb</a></li>
<li><a href="">Vue</a></li>
<li><a href="">React</a></li>
<li><a href="">PHP</a></li>
</ul>
<a href="" class="mod">修改兴趣</a>
</div>
<!-- 精品推荐 内容 -->
<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="">查看全部</a>
</div>
<div class="box-bd">
<ul class="clearfix">
<li>
<div class="log">
<img src="https://juejin.cn/post/images/log.png" >
</div>
<img src="https://juejin.cn/post/images/p1.png" >
<h4>Android Hybrid APP开发实战 H5+原生！</h4>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<div class="log">
<img src="https://juejin.cn/post/images/log.png" >
</div>
<img src="https://juejin.cn/post/images/p2.png" >
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<p><span>中级</span> • 2378人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/p3.png" >
<h4>Android Hybrid APP开发实战 H5+原生！</h4>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/p4.png" >
<h4>Angular 2 最新框架+主流技术+项目实战</h4>
<p><span>中级</span> • 849人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/p5.png" >
<h4>Android 网络图片加载框架详解 </h4>
<p><span>中级</span> • 1286人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/p1.png" >
<h4>Android Hybrid APP开发实战 H5+原生！</h4>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/p2.png" >
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<p><span>中级</span> • 2378人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/p3.png" >
<h4>Android Hybrid APP开发实战 H5+原生！</h4>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/p4.png" >
<h4>Angular 2 最新框架+主流技术+项目实战</h4>
<p><span>中级</span> • 849人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/p5.png" >
<h4>Android 网络图片加载框架详解 </h4>
<p><span>中级</span> • 1286人在学习</p>
</li>
</ul>
</div>
</div>
<!-- 编程入门 内容 -->
<div class="box w">
<div class="box-hd">
<h3>编程入门</h3>
<a href="" class="cla">热门</a>
<a href="" class="cla">初级</a>
<a href="" class="cla">中级</a>
<a href="" class="cla">高级</a>
<a href="">查看全部</a>
</div>
<div class="box-bd2">
<div class="pt1">
<img src="https://juejin.cn/post/images/pt1.png" >
</div>
<div class="pt2">
<img src="https://juejin.cn/post/images/pt2.png" >
</div>
<div class="pt3">
<ul>
<li>
<img src="https://juejin.cn/post/images/pt3.png" >
<h4>Kami2首页界面切换效果 </h4>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/pt4.png" >
<h4>Cocos2d-x 引擎源码中的纹理优化 </h4>
<p><span>中级</span> • 2378人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/pt5.png" >
<h4>Android Hybrid APP开发实战 H5+原生！ </h4>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/pt6.png" >
<h4>Unity Profiler入门 </h4>
<p><span>中级</span> • 849人在学习</p>
</li>
</ul>
</div>
</div>
</div>
<!-- 数据分析师 内容 -->
<div class="box w">
<div class="box-hd">
<h3>数据分析师</h3>
<a href="" class="cla">热门</a>
<a href="" class="cla">初级</a>
<a href="" class="cla">中级</a>
<a href="" class="cla">高级</a>
<a href="">查看全部</a>
</div>
<div class="box-bd2">
<div class="pt1">
<img src="https://juejin.cn/post/images/pt7.png" >
</div>
<div class="pt2">
<img src="https://juejin.cn/post/images/pt8.png" >
</div>
<div class="pt3">
<ul>
<li>
<img src="https://juejin.cn/post/images/pt3.png" >
<h4>Kami2首页界面切换效果 </h4>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/pt4.png" >
<h4>Cocos2d-x 引擎源码中的纹理优化 </h4>
<p><span>中级</span> • 2378人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/pt5.png" >
<h4>Android Hybrid APP开发实战 H5+原生！ </h4>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/pt6.png" >
<h4>Unity Profiler入门 </h4>
<p><span>中级</span> • 849人在学习</p>
</li>
</ul>
</div>
</div>
</div>
<!-- 机器学习工程师 -->
<div class="box w">
<div class="box-hd">
<h3>机器学习工程师</h3>
<a href="" class="cla">热门</a>
<a href="" class="cla">初级</a>
<a href="" class="cla">中级</a>
<a href="" class="cla">高级</a>
<a href="">查看全部</a>
</div>
<div class="box-bd2 ext">
<ul class="clearfix">
<li>
<img src="https://juejin.cn/post/images/pt5.png" >
<h4>Android Hybrid APP开发实战 H5+原生！ </h4>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/pt6.png" >
<h4>Unity Profiler入门 </h4>
<p><span>中级</span> • 849人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/pt3.png" >
<h4>Kami2首页界面切换效果 </h4>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/pt9.png" >
<h4>微软人工智能-数据分析平台</h4>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/pt4.png" >
<h4>Cocos2d-x 引擎源码中的纹理优化 </h4>
<p><span>中级</span> • 2378人在学习</p>
</li>
</ul>
</div>
</div>
<!-- 前端开发工程师 -->
<div class="box w">
<div class="box-hd">
<h3>前端开发工程师</h3>
<a href="" class="cla">热门</a>
<a href="" class="cla">初级</a>
<a href="" class="cla">中级</a>
<a href="" class="cla">高级</a>
<a href="">查看全部</a>
</div>
<div class="box-bd2 ext">
<ul class="clearfix">
<li>
<img src="https://juejin.cn/post/images/pt9.png" >
<h4>微软人工智能-数据分析平台</h4>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/pt5.png" >
<h4>Android Hybrid APP开发实战 H5+原生！ </h4>
<p><span>高级</span> • 1125人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/pt4.png" >
<h4>Cocos2d-x 引擎源码中的纹理优化 </h4>
<p><span>中级</span> • 2378人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/pt6.png" >
<h4>Unity Profiler入门 </h4>
<p><span>中级</span> • 849人在学习</p>
</li>
<li>
<img src="https://juejin.cn/post/images/pt3.png" >
<h4>Kami2首页界面切换效果 </h4>
<p><span>高级</span> • 1125人在学习</p>
</li>
</ul>
</div>
</div>
<!-- footer 底部 -->
<div class="footer">
<div class="w">
<!-- 左侧版权 -->
<div class="copyright">
<img src="https://juejin.cn/post/images/logo.png" >
<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
<a href="" class="app">下载APP</a>
</div>
<!-- 右侧链接 定义列表 -->
<div class="links">
<dl>
<dt>关于学成网</dt>
<dd><a href="">关于</a></dd>
<dd><a href="">管理团队</a></dd>
<dd><a href="">工作机会</a></dd>
<dd><a href="">客户服务</a></dd>
<dd><a href="">帮助</a></dd>
</dl>
<dl>
<dt>新手注册</dt>
<dd><a href="">如何注册</a></dd>
<dd><a href="">如何选课</a></dd>
<dd><a href="">如何拿到毕业证</a></dd>
<dd><a href="">学分是什么</a></dd>
<dd><a href="">考试未通过怎么办</a></dd>
</dl>
<dl>
<dt>合作伙伴</dt>
<dd><a href="">合作机构</a></dd>
<dd><a href="">合作导师</a></dd>
</dl>
</div>
</div>
</div>
</body>
</html>
复制代码© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
