效果图
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./fa/css/all.css">
</head>
<body>
<!-- 网页的头部 -->
<header>
<!-- 左侧菜单按钮 -->
<div class="menu">
<a href="#">
<i class="fas fa-stream"></i>
</a>
</div>
<!-- 中间的标题 -->
<h1 class="logo">
I Learn
</h1>
<!-- 右侧的搜索按钮 -->
<div class="search">
<a href="#">
<i class="fas fa-search"></i>
</a>
</div>
</header>
<!-- 网页的banner -->
<div class="banner">
<a href="#">
<img src="./img/banner.png">
</a>
</div>
<!-- 网页的分类导航 -->
<nav class="category">
<div class="course">
<a href="#">
<i class="fas fa-book"></i>
My Course
</a>
</div>
<div class="teacher">
<a href="#">
<i class="fas fa-star"></i>
Star Teacher
</a>
</div>
<div class="subscription">
<a href="#">
<i class="fas fa-marker"></i>
Subscription
</a>
</div>
<div class="download">
<a href="#">
<i class="fas fa-download"></i>
My Download
</a>
</div>
</nav>
<!-- 网页的课程列表 -->
<div class="course-list">
<!-- 顶部的名称信息 -->
<div class="top-bar">
<h2 class="course-type">Latest course</h2>
<a href="#">More +</a>
</div>
<!-- 下面的课程详细信息 -->
<div class="course-info-wrapper">
<div class="course-info">
<a href="#">
<img src="./img/cover.png" class="cover-img">
<h3 class="course-name">Photography course</h3>
<div class="teacher-info">
<img src="./img/avatar.png" class="avatar-img">
Annabelle
</div>
</a>
</div>
<div class="course-info">
<a href="#">
<img src="./img/cover.png" class="cover-img">
<h3 class="course-name">Photography course</h3>
<div class="teacher-info">
<img src="./img/avatar.png" class="avatar-img">
Annabelle
</div>
</a>
</div>
<div class="course-info">
<a href="#">
<img src="./img/cover.png" class="cover-img">
<h3 class="course-name">Photography course</h3>
<div class="teacher-info">
<img src="./img/avatar.png" class="avatar-img">
Annabelle
</div>
</a>
</div>
<div class="course-info">
<a href="#">
<img src="./img/cover.png" class="cover-img">
<h3 class="course-name">Photography course</h3>
<div class="teacher-info">
<img src="./img/avatar.png" class="avatar-img">
Annabelle
</div>
</a>
</div>
<div class="course-info">
<a href="#">
<img src="./img/cover.png" class="cover-img">
<h3 class="course-name">Photography course</h3>
<div class="teacher-info">
<img src="./img/avatar.png" class="avatar-img">
Annabelle
</div>
</a>
</div>
</div>
</div>
<div class="course-list">
<!-- 顶部的名称信息 -->
<div class="top-bar">
<h2 class="course-type">Latest course</h2>
<a href="#">More +</a>
</div>
<!-- 下面的课程详细信息 -->
<div class="course-info-wrapper">
<div class="course-info">
<a href="#">
<img src="./img/cover.png" class="cover-img">
<h3 class="course-name">Photography course</h3>
<div class="teacher-info">
<img src="./img/avatar.png" class="avatar-img">
Annabelle
</div>
</a>
</div>
<div class="course-info">
<a href="#">
<img src="./img/cover.png" class="cover-img">
<h3 class="course-name">Photography course</h3>
<div class="teacher-info">
<img src="./img/avatar.png" class="avatar-img">
Annabelle
</div>
</a>
</div>
<div class="course-info">
<a href="#">
<img src="./img/cover.png" class="cover-img">
<h3 class="course-name">Photography course</h3>
<div class="teacher-info">
<img src="./img/avatar.png" class="avatar-img">
Annabelle
</div>
</a>
</div>
<div class="course-info">
<a href="#">
<img src="./img/cover.png" class="cover-img">
<h3 class="course-name">Photography course</h3>
<div class="teacher-info">
<img src="./img/avatar.png" class="avatar-img">
Annabelle
</div>
</a>
</div>
<div class="course-info">
<a href="#">
<img src="./img/cover.png" class="cover-img">
<h3 class="course-name">Photography course</h3>
<div class="teacher-info">
<img src="./img/avatar.png" class="avatar-img">
Annabelle
</div>
</a>
</div>
</div>
</div>
<div class="course-list">
<!-- 顶部的名称信息 -->
<div class="top-bar">
<h2 class="course-type">Latest course</h2>
<a href="#">More +</a>
</div>
<!-- 下面的课程详细信息 -->
<div class="course-info-wrapper">
<div class="course-info">
<a href="#">
<img src="./img/cover.png" class="cover-img">
<h3 class="course-name">Photography course</h3>
<div class="teacher-info">
<img src="./img/avatar.png" class="avatar-img">
Annabelle
</div>
</a>
</div>
<div class="course-info">
<a href="#">
<img src="./img/cover.png" class="cover-img">
<h3 class="course-name">Photography course</h3>
<div class="teacher-info">
<img src="./img/avatar.png" class="avatar-img">
Annabelle
</div>
</a>
</div>
<div class="course-info">
<a href="#">
<img src="./img/cover.png" class="cover-img">
<h3 class="course-name">Photography course</h3>
<div class="teacher-info">
<img src="./img/avatar.png" class="avatar-img">
Annabelle
</div>
</a>
</div>
<div class="course-info">
<a href="#">
<img src="./img/cover.png" class="cover-img">
<h3 class="course-name">Photography course</h3>
<div class="teacher-info">
<img src="./img/avatar.png" class="avatar-img">
Annabelle
</div>
</a>
</div>
<div class="course-info">
<a href="#">
<img src="./img/cover.png" class="cover-img">
<h3 class="course-name">Photography course</h3>
<div class="teacher-info">
<img src="./img/avatar.png" class="avatar-img">
Annabelle
</div>
</a>
</div>
</div>
</div>
</body>
</html>
style.less
// 设计图宽度是750px
@total-width:750;
@midle-width:693;
// 设置居中类
.w{
width: @midle-width/40rem;
margin: 0 auto;
}
body{
overflow: auto;
}
a{
text-decoration: none;
}
html{
font-size: 100/@total-width*40vw;
background-color: #eff0f4;
}
// 设置头部的样式
header:extend(.w){
height: 175/40rem;
line-height: 175/40rem;
display: flex;
justify-content: space-between;
i{
color: #999999;
}
.logo{
color: #24253d;
font-size: 50/40rem;
}
}
// 设置banner的样式
.banner:extend(.w){
a{
display: block;
text-align: top;
}
img{
width: 100%;
border-radius: 15/40rem;
box-shadow: 0 0 10/40rem rgba(0, 0, 0, .2);
}
}
// 设置分类导航的样式
.category:extend(.w){
height: 332/40rem;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
// align-content设置辅轴方向的空白分布
align-content: space-around;
div{
width: 325/40rem;
height: 105/40rem;
line-height: 105/40rem;
border-radius: 10/40rem;
box-shadow: 0 0 10/40rem rgba(0, 0, 0, .2);
}
a{
display: block;
width: 100%;
height: 100%;
font-size: 30/40rem;
color: #ffffff;
text-align: center;
}
.course{
background-color: #f97053;
}
.teacher{
background-color: #cf72fe;
}
.subscription{
background-color: #ff3971;
}
.download{
background-color: #1cb0fd;
}
}
// 设置课程列表的样式
.course-list:extend(.w){
box-sizing: border-box;
height: 440/40rem;
display: flex;
flex-direction: column;
justify-content: space-evenly;
// 顶部名称信息的样式
.top-bar{
height: 35/40rem;
line-height: 35/40rem;
display: flex;
justify-content: space-between;
.course-type{
font-size: 33/40rem;
color: #24253d;
border-left: 3/40rem solid #95baf9;
padding-left: 18/40rem;
}
a{
font-size: 28/40rem;
color: #656565;
}
}
// 下面课程详细信息的样式
.course-info-wrapper{
padding: 10/40rem;
display: flex;
overflow: auto;
}
.course-info{
flex: none;
display: flex;
border-radius: 10/40rem;
width: 305/40rem;
height: 305/40rem;
background-color: #ffffff;
margin-right: 25/40rem;
box-shadow: 0 0 10/40rem rgba(0, 0, 0, .6);
a{
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 100%;
height: 100%;
}
.cover-img{
width: 280/40rem;
margin: 0 auto;
}
.course-name{
font-size: 30/40rem;
color: #24253d;
text-align: center;
}
.teacher-info{
height: 43/40rem;
line-height: 43/40rem;
font-size: 24/40rem;
color: #969393;
.avatar-img{
height: 100%;
margin-left: 18/40rem;
}
}
}
}
