完整版页面截图
这是我跟着bilibili黑马程序员学习时所敲的学成在线首页页面，如果有需要的朋友，源代码以及素材都在文章最后
头部源代码
<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>
导航栏代码
<!-- 中间轮播图部分 -->
<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>
精品推荐代码
<!-- 精品推荐 -->
<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>
版权代码
<!-- 版权 -->
<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>