Full page screenshot
This is the Xuecheng Online home page I typed when I was studying with bilibili dark horse programmers. If you have friends in need, the source code and materials are at the end of the article
header source code
<div class="header wrapper">
<!-- 头部左边logo -->
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="学成在线导航" title="学成在线"></a>
</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" placeholder="搜索"><button></button>
</div>
<!-- 头部用户头像 -->
<div class="user">
<img src="./images/user.png">
<span>zhangsan</span>
</div>
</div>
navigation bar code
<!-- 中间轮播图部分 -->
<div class="banner">
<div class="wrapper">
<div class="left">
<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="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></span></a></li>
</ul>
</div>
<div class="right">
<h2>我的课程表</h2>
<div class="content">
<dl>
<dt>继续学习 程序语言设计</dt>
<dd>正在学习-使用对象</dd>
</dl>
<dl>
<dt>继续学习 程序语言设计</dt>
<dd>正在学习-使用对象</dd>
</dl>
<dl>
<dt>继续学习 程序语言设计</dt>
<dd>正在学习-使用对象</dd>
</dl>
</div>
<a href="#" class="more">全部课程</a>
</div>
</div>
</div>
Boutique referral code
<!-- 精品推荐 -->
<div class="recommend wrapper">
<h2>精品推荐</h2>
<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="#">MySQL</a></li>
<li><a href="#">JavaWeb</a></li>
</ul>
<a href="#" class="hobby">修改推荐</a>
</div>
<!-- 精品课程 -->
<div class="course wrapper">
<!-- 标题 -->
<div class="title">
<h2>精品推荐</h2>
<a href="#">更多推荐</a>
</div>
<!-- 课程内容 -->
<div class="content clearfic">
<ul>
<li>
<a href="#">
<img src="images/course04.png">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<p><span>高级</span> . 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="images/course02.png">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<p><span>高级</span> . 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="images/course03.png">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<p><span>高级</span> . 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="images/course04.png">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<p><span>高级</span> . 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="images/course05.png">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<p><span>高级</span> . 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="images/course06.png">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<p><span>高级</span> . 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="images/course07.png">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<p><span>高级</span> . 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="images/course08.png">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<p><span>高级</span> . 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="images/course02.png">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<p><span>高级</span> . 1125人在学习</p>
</a>
</li>
<li>
<a href="#">
<img src="images/course03.png">
<h3>Think PHP 5.0 博客系统实战项目演练</h3>
<p><span>高级</span> . 1125人在学习</p>
</a>
</li>
</ul>
</div>
</div>
copyright code
<!-- 版权 -->
<div class="footer">
<div class="wrapper">
<div class="left">
<img src="images/logo.png">
<p>学成在线学成在线学成在线学成在线学成在线学成在线学成在线。<br>
学成在线学成在线学成在线学成在线学成在线学成在线学成在线学成在线学成在线.<br>
2023年学成在线学成在线学成在线学成在线www.com</p>
<a href="#">下载APP</a>
</div>
<div class="right">
<dl>
<dt>合作伙伴</dt>
<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>
</dl>
<dl>
<dt>合作伙伴</dt>
<dd><a href="#">合作方</a></dd>
<dd><a href="#">张三</a></dd>
<dd><a href="#">李四</a></dd>
</dl>
</div>
</div>
</div>