效果图：
源码包含文件：
index.html代码：
<!DOCTYPE html>
<html lang="en">
<!--网页制作：夏天的风-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>爱学习</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header class="top-bar">
<div class="menu-btn">
<a href="#">
<i>❤</i>
</a>
</div>
<h1 class="logo">
<a href="#">
爱学习
</a>
</h1>
<div class="search-btn">
<a href="#">
<i>☁</i>
</a>
</div>
</header>
<div class="banner">
<a href="#">
<img src="./img/2.png" alt="">
</a>
</div>
<nav class="menu">
<a class="course" href="#">
<i>➤</i>
我的课程
</a>
<a class="star" href="#">
<i>➤</i>
明星讲师
</a>
<a class="sub" href="#">
<i>➤</i>
我的订阅</a>
<a class="download" href="#">
<i>➤</i>
我的下载</a>
</nav>
<div class="course-list">
<div class="title">
<h2>最新课程</h2>
<a class="more" href="#">更多+</a>
</div>
<div class="item-list">
<div class="item">
<div class="cover">
<img src="img/3.png" alt="">
</div>
<h3 class="course-title">
摄影课程
</h3>
<div class="user-info">
<div class="avatar">
<img src="img/1.png" alt="">
</div>
<div class="nickname">
小丽
</div>
</div>
</div>
<div class="item">
<div class="cover">
<img src="img/3.png" alt="">
</div>
<h3 class="course-title">
摄影课程
</h3>
<div class="user-info">
<div class="avatar">
<img src="img/1.png" alt="">
</div>
<div class="nickname">
小丽
</div>
</div>
</div>
<div class="item">
<div class="cover">
<img src="img/3.png" alt="">
</div>
<h3 class="course-title">
摄影课程
</h3>
<div class="user-info">
<div class="avatar">
<img src="img/1.png" alt="">
</div>
<div class="nickname">
小丽
</div>
</div>
</div>
<div class="item">
<div class="cover">
<img src="img/3.png" alt="">
</div>
<h3 class="course-title">
摄影课程
</h3>
<div class="user-info">
<div class="avatar">
<img src="img/1.png" alt="">
</div>
<div class="nickname">
小丽
</div>
</div>
</div>
<div class="item">
<div class="cover">
<img src="img/3.png" alt="">
</div>
<h3 class="course-title">
摄影课程
</h3>
<div class="user-info">
<div class="avatar">
<img src="img/1.png" alt="">
</div>
<div class="nickname">
小丽
</div>
</div>
</div>
<div class="item">
<div class="cover">
<img src="img/3.png" alt="">
</div>
<h3 class="course-title">
摄影课程
</h3>
<div class="user-info">
<div class="avatar">
<img src="img/1.png" alt="">
</div>
<div class="nickname">
小丽
</div>
</div>
</div>
</div>
</div>
<div class="course-list">
<div class="title">
<h2>最新课程</h2>
<a class="more" href="#">更多+</a>
</div>
<div class="item-list">
<div class="item">
<div class="cover">
<img src="img/3.png" alt="">
</div>
<h3 class="course-title">
摄影课程
</h3>
<div class="user-info">
<div class="avatar">
<img src="img/1.png" alt="">
</div>
<div class="nickname">
小丽
</div>
</div>
</div>
<div class="item">
<div class="cover">
<img src="img/3.png" alt="">
</div>
<h3 class="course-title">
摄影课程
</h3>
<div class="user-info">
<div class="avatar">
<img src="img/1.png" alt="">
</div>
<div class="nickname">
小丽
</div>
</div>
</div>
<div class="item">
<div class="cover">
<img src="img/3.png" alt="">
</div>
<h3 class="course-title">
摄影课程
</h3>
<div class="user-info">
<div class="avatar">
<img src="img/1.png" alt="">
</div>
<div class="nickname">
小丽
</div>
</div>
</div>
<div class="item">
<div class="cover">
<img src="img/3.png" alt="">
</div>
<h3 class="course-title">
摄影课程
</h3>
<div class="user-info">
<div class="avatar">
<img src="img/1.png" alt="">
</div>
<div class="nickname">
小丽
</div>
</div>
</div>
<div class="item">
<div class="cover">
<img src="img/3.png" alt="">
</div>
<h3 class="course-title">
摄影课程
</h3>
<div class="user-info">
<div class="avatar">
<img src="img/1.png" alt="">
</div>
<div class="nickname">
小丽
</div>
</div>
</div>
<div class="item">
<div class="cover">
<img src="img/3.png" alt="">
</div>
<h3 class="course-title">
摄影课程
</h3>
<div class="user-info">
<div class="avatar">
<img src="img/1.png" alt="">
</div>
<div class="nickname">
小丽
</div>
</div>
</div>
</div>
</div>
<div class="course-list">
<div class="title">
<h2>最新课程</h2>
<a class="more" href="#">更多+</a>
</div>
<div class="item-list">
<div class="item">
<div class="cover">
<img src="img/3.png" alt="">
</div>
<h3 class="course-title">
摄影课程
</h3>
<div class="user-info">
<div class="avatar">
<img src="img/1.png" alt="">
</div>
<div class="nickname">
小丽
</div>
</div>
</div>
<div class="item">
<div class="cover">
<img src="img/3.png" alt="">
</div>
<h3 class="course-title">
摄影课程
</h3>
<div class="user-info">
<div class="avatar">
<img src="img/1.png" alt="">
</div>
<div class="nickname">
小丽
</div>
</div>
</div>
<div class="item">
<div class="cover">
<img src="img/3.png" alt="">
</div>
<h3 class="course-title">
摄影课程
</h3>
<div class="user-info">
<div class="avatar">
<img src="img/1.png" alt="">
</div>
<div class="nickname">
小丽
</div>
</div>
</div>
<div class="item">
<div class="cover">
<img src="img/3.png" alt="">
</div>
<h3 class="course-title">
摄影课程
</h3>
<div class="user-info">
<div class="avatar">
<img src="img/1.png" alt="">
</div>
<div class="nickname">
小丽
</div>
</div>
</div>
<div class="item">
<div class="cover">
<img src="img/3.png" alt="">
</div>
<h3 class="course-title">
摄影课程
</h3>
<div class="user-info">
<div class="avatar">
<img src="img/1.png" alt="">
</div>
<div class="nickname">
小丽
</div>
</div>
</div>
<div class="item">
<div class="cover">
<img src="img/3.png" alt="">
</div>
<h3 class="course-title">
摄影课程
</h3>
<div class="user-info">
<div class="avatar">
<img src="img/1.png" alt="">
</div>
<div class="nickname">
小丽
</div>
</div>
</div>
</div>
</div>
</body>
</html>图片素材：
素材1：
素材2:
素材3：
reset.css（样式重置代码）：
/* 重置代码
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}style.less代码：
* {
margin: 0;
padding: 0;
}
.w,
.top-bar,
.banner,
.menu,
.course-list {
width: 17.325rem;
margin: 0 auto;
}
html {
font-size: 5.33333333vw;
background-color: #eff0f4;
}
a {
text-decoration: none;
}
.top-bar {
display: flex;
height: 4.375rem;
line-height: 4.375rem;
justify-content: space-between;
align-items: center;
}
.top-bar a {
color: #24253d;
font-size: 1.25rem;
}
.top-bar a i {
color: #999;
font-size: 1rem;
}
.banner img {
width: 100%;
}
.menu {
height: 8.225rem;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-content: space-evenly;
}
.menu a {
width: 8.175rem;
height: 2.6rem;
line-height: 2.6rem;
color: white;
border-radius: 0.25rem;
}
.menu a i {
margin: 0 0.5rem 0 0.95rem;
}
.menu .course {
background-color: #f97053;
}
.menu .star {
background-color: #cd6efe;
}
.menu .sub {
background-color: #fe4479;
}
.menu .download {
background-color: #1bc4fb;
}
.course-list {
height: 9.85rem;
display: flex;
flex-flow: column;
justify-content: space-between;
margin-bottom: 1.15rem;
}
.course-list .title {
display: flex;
justify-content: space-between;
align-items: center;
}
.course-list .title h2 {
font-size: 0.825rem;
color: #24253d;
border-left: 2px solid #3a84ff;
padding-left: 4px;
}
.course-list .title a {
font-size: 0.7rem;
color: #656565;
}
.item-list {
width: 18rem;
display: flex;
overflow: auto;
}
.item {
flex: none;
box-sizing: border-box;
width: 8rem;
height: 8.1rem;
padding: 0 0.55rem;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
border-radius: 5px;
display: flex;
flex-flow: column;
justify-content: space-evenly;
margin-right: 0.6rem;
}
.item img {
width: 100%;
vertical-align: top;
}
.item .course-title {
font-size: 0.8rem;
color: #24253d;
}
.item .user-info {
display: flex;
align-items: center;
}
.item .avatar {
width: 1.05rem;
height: 1.05rem;
}
.item .nickname {
margin-left: 6px;
font-size: 0.6rem;
color: #969393;
}
注：这里省略了style.css文件的代码，在Vscode中可以通过Easy LESS 插件自动生成。