这里写自定义目录标题
- 1.效果展示
- 2.使用grid布局
- 3.使用flex布局
1.效果展示
2.使用grid布局
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>文档标题</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 100%;
max-width: 1200px;
display: grid;
grid-template-columns:repeat(4, 1fr);
gap: 10px 10px;
}
.item {
padding: 10px;
overflow: auto;
border-width: 1px;
border-color: black;
}
.cover {
position: relative;
width: 100%;
padding-bottom: 66%;
}
.cover img {
position: absolute;
width: 100%;
height: 100%;
}
.info {
padding-top: 10px;
}
@media screen and (max-width: 960px) {}
@media screen and (max-width: 1024px) {
.container {}
}
@media screen and (max-width: 768px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 400px) {
.container {
grid-template-columns: repeat(1, 1fr);
}
}
.color-1 {
background-color: aqua;
}
.color-2 {
background-color: blue;
}
.color-3 {
background-color: blueviolet;
}
.color-4 {
background-color: brown;
}
.color-5 {
background-color:greenyellow;
}
</style>
</head>
<body>
<div class="container">
<div class="item color-1">
<a href="javascript:void(0)">
<div class="cover">
<img src="" alt="">
</div>
</a>
<div class="info">
<div class="title">这是一节英语课2</div>
<div class="subtitle">1 chaper | 2 videos</div>
<div class="price">i100AUD</div>
</div>
</div>
<div class="item color-2">
<a href="javascript:void(0)">
<div class="cover">
<img src="https://dingdian.koalaclass.com.au/files/system/2021/01-28/18403532c38b020510.png" alt="">
</div>
</a>
<div class="info">
<div class="title">这是一节英语课2</div>
<div class="subtitle">1 chaper | 2 videos</div>
<div class="price">i100AUD</div>
</div>
</div>
<div class="item color-3">
<a href="javascript:void(0)">
<div class="cover">
<img src="https://dingdian.koalaclass.com.au/files/system/2021/01-28/18403532c38b020510.png" alt="">
</div>
</a>
<div class="info">
<div class="title">这是一节英语课2</div>
<div class="subtitle">1 chaper | 2 videos</div>
<div class="price">i100AUD</div>
</div>
</div>
<div class="item color-4">
<a href="javascript:void(0)">
<div class="cover">
<img src="https://dingdian.koalaclass.com.au/files/system/2021/01-28/18403532c38b020510.png" alt="">
</div>
</a>
<div class="info">
<div class="title">这是一节英语课2</div>
<div class="subtitle">1 chaper | 2 videos</div>
<div class="price">i100AUD</div>
</div>
</div>
<div class="item color-5">
<a href="javascript:void(0)">
<div class="cover">
<img src="https://dingdian.koalaclass.com.au/files/system/2021/01-28/18403532c38b020510.png" alt="">
</div>
</a>
<div class="info">
<div class="title">这是一节英语课2</div>
<div class="subtitle">1 chaper | 2 videos</div>
<div class="price">i100AUD</div>
</div>
</div>
<div class="item color-1">
<a href="javascript:void(0)">
<div class="cover">
<img src="https://dingdian.koalaclass.com.au/files/system/2021/01-28/18403532c38b020510.png" alt="">
</div>
</a>
<div class="info">
<div class="title">这是一节英语课2</div>
<div class="subtitle">1 chaper | 2 videos</div>
<div class="price">i100AUD</div>
</div>
</div>
</div>
</body>
</html>
3.使用flex布局
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>文档标题</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 100%;
max-width: 1200px;
display: flex;
flex-wrap: wrap;
}
.item {
display: block;
flex: 0 0 auto;
width: 25%;
}
.cover {
position: relative;
width: 100%;
padding-bottom: 100%;
}
.cover img {
position: absolute;
width: 100%;
height: 100%;
}
.info {
padding-top: 10px;
}
@media screen and (max-width: 960px) {}
@media screen and (max-width: 1024px) {
.item {
width: 50%;
}
}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 400px) {
.item {
width: 100%;
}
}
.color-1 {
background-color: aqua;
}
.color-2 {
background-color: blue;
}
.color-3 {
background-color: blueviolet;
}
.color-4 {
background-color: brown;
}
.color-5 {
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="container">
<div class="item color-1">
<a href="javascript:void(0)">
<div class="cover">
<img src="" alt="">
</div>
</a>
<div class="info">
<div class="title">这是一节英语课2</div>
<div class="subtitle">1 chaper | 2 videos</div>
<div class="price">i100AUD</div>
</div>
</div>
<div class="item color-2">
<a href="javascript:void(0)">
<div class="cover">
<img src="" alt="">
</div>
</a>
<div class="info">
<div class="title">这是一节英语课2</div>
<div class="subtitle">1 chaper | 2 videos</div>
<div class="price">i100AUD</div>
</div>
</div>
<div class="item color-3">
<a href="javascript:void(0)">
<div class="cover">
<img src="" alt="">
</div>
</a>
<div class="info">
<div class="title">这是一节英语课2</div>
<div class="subtitle">1 chaper | 2 videos</div>
<div class="price">i100AUD</div>
</div>
</div>
<div class="item color-4">
<a href="javascript:void(0)">
<div class="cover">
<img src="" alt="">
</div>
</a>
<div class="info">
<div class="title">这是一节英语课2</div>
<div class="subtitle">1 chaper | 2 videos</div>
<div class="price">i100AUD</div>
</div>
</div>
<div class="item color-5">
<a href="javascript:void(0)">
<div class="cover">
<img src="" alt="">
</div>
</a>
<div class="info">
<div class="title">这是一节英语课2</div>
<div class="subtitle">1 chaper | 2 videos</div>
<div class="price">i100AUD</div>
</div>
</div>
<div class="item color-1">
<a href="javascript:void(0)">
<div class="cover">
<img src="" alt="">
</div>
</a>
<div class="info">
<div class="title">这是一节英语课2</div>
<div class="subtitle">1 chaper | 2 videos</div>
<div class="price">i100AUD</div>
</div>
</div>
</div>
</body>
</html>
