利用flex布局写的一个样式
效果图：
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
{/include file="vue_common/common.html" title="index1"/}
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 375px;
height: 2810px;
display: flex;
flex-direction: column;
background-color: #F5F6F7;
}
.pag-title-img {
width: 355px;
height: 125px;
background: #FFFFFF;
border-radius: 10px;
margin-left: 10px;
margin-right: 10px;
}
.page-class-list {
display: flex;
flex-direction: row;
height: 55px;
justify-content: space-between;
padding: 1.5rem;
background: #FFFFFF;
border-radius: 10px;
margin: 10px;
}
.page-class-list-icon {
height: 64px;
width: 24;
display: flex;
flex-direction: column;
align-items: center;
background-color: #;
text-align: center;
font-size: 12px;
}
.page-class-list-icon span {
margin-top: 10px;
color: black;
}
.page-class-list-icon-img {
height: 26px;
width: 24px;
}
.page-video-show{
width: 355px;
height: 636px;
background: #FFFFFF;
border-radius: 10px;
margin: 10px;
display: flex;
flex-direction: column;
}
.page-video-show-list-1{
margin: 0.625rem;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.page-video-show-list-1-left{
width: 16.875rem;
display: flex;
flex-direction: row;
margin-left: 0;
align-items: center;
}
.bar{
margin-left: 10px;
height: 30px;
width: 4px;
background-color: green;
border-radius: 0.3125rem;;
white-space: nowrap;
}
.bar-text{
width: 100px;
height: 20px;
font-family: PingFang SC;
font-weight: bold;
font-size: 20px;
color: #111111;
margin-left: 10px; ;
}
.page-video-show-list-1-right{
margin-top: 0.625rem;;
width:120px;
height: 12px;
font-family: PingFang SC;
font-weight: 500;
font-size: 16px;
color: #AAAAAA;
text-align: right;
margin-right: 0;
}
.page-show{
display: flex;
flex-direction: column;
padding: 10px;
}
.page-show-select-class{
justify-content: flex-start;
margin-left: 5px;
width: 355px;
height: 13px;
}
.page-show-select-class span{
font-family: PingFang SC;
font-weight: bold;
font-size: 18px;
}
.page-show-select-class .first-text-1{
font-family: PingFang SC;
font-weight: bold;
font-size: 18px;
color: #2BB781;
}
.page-show-select-class .second-text-1{
color: #999999;
}
.page-show-main{
margin-top: 25px;;
display: flex;
flex-direction: row;
}
.page-show-main-vedio{
width: 125px;
height: 81px;
background: #D8E4EF;
border-radius: 10px;
position: relative;
}
.page-show-main-vedio-bofang{
background-image: url("/app/templates/img/primaryCircle/edu_icon06.png");
background-repeat: no-repeat;
background-size: cover;
width: 40px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 2;
}
.page-show-content{
margin-left: 0.625rem;
display: flex;
flex-direction: column;
}
.page-show-content-guangao{
font-family: PingFang SC;
font-weight: bold;
font-size: 16px;
color: #111111;
}
.page-show-content-jibie{
margin-top: 0.625rem;;
font-family: PingFang SC;
font-weight: 500;
font-size: 14px;
color: #AAAAAA;
}
.page-show-content-vip{
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.page-show-content-vip-freeornot{
display: flex;
flex-direction: row;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 10px;
color: #FFFFFF;
background: linear-gradient(180deg, #7E573E 0%, #49311F 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.page-show-content-vip-price{
font-family: PingFang SC;
font-weight: bold;
font-size: 16px;
color: #FF583D;
line-height: 20px;
}
.page-show-content-vip-zhekou{
margin-left: 5px;
margin-top: 2px;;
font-family: PingFang SC;
font-weight: 500;
font-size: 12px;
color: #AAAAAA;
text-decoration-line: line-through;
}
</style>
</head>
<body>
<div class="container">
<!--样式-->
<img class="pag-title-img" src="/app/templates/img/home-first.png">
<!---选择导航 好课 证书 资料 活动-->
<div class="page-class-list">
<div class="page-class-list-icon">
<div class="page-class-list-icon-img">
<img width="24px" height="24px" src="/app/templates/img/classs-1.png" />
</div>
<span class="text">好课</span>
</div>
<div class="page-class-list-icon">
<div class="page-class-list-icon-img">
<img width="24px" height="24px" src="/app/templates/img/class-2.png" />
</div>
<span>证书</span>
</div>
<div class="page-class-list-icon">
<div class="page-class-list-icon-img">
<img width="24px" height="24px" src="/app/templates/img/class2.png" />
</div>
<span>资料</span>
</div>
<div class="page-class-list-icon">
<div class="page-class-list-icon-img">
<img width="24px" height="24px" src="/app/templates/img/class3.png" />
</div>
<span>活动</span>
</div>
</div>
<!--课程视频展示-->
<div class="page-video-show">
<div class="page-video-show-list-1">
<div class="page-video-show-list-1-left">
<div class="bar"></div>
<span class="bar-text">好课</span>
</div>
<div class="page-video-show-list-1-right">
<span>查看更多 ></span>
</div>
<div></div>
</div>
<!--查看课程-->
<div class="page-show">
<div class="page-show-select-class">
<span class="first-text-1">推荐课程</span>
<span class="second-text-1">免费课程</span>
</div>
<div class="page-show-main">
<div class="page-show-main-vedio">
<img width="125px" height="81px" style="border-radius: 10px;" src="/app/templates/img/whitewoman.png">
<div class="page-show-main-vedio-bofang"></div>
</div>
<div class="page-show-content">
<span class="page-show-content-guangao">华为PBC—聚集华为战略落地的绩效管理工具</span>
<span class="page-show-content-jibie">华为14年人力资源资深专家</span>
<div class="page-show-content-vip">
<div class="page-show-content-vip-freeornot">👑v4会员免费</div>
<div class="page-show-content-vip-price">￥99</div><small class="page-show-content-vip-zhekou">200</small>
</div>
</div>
</div>
<div class="page-show-main">
<div class="page-show-main-vedio">
<img width="125px" height="81px" style="border-radius: 10px;" src="/app/templates/img/realman.jpg">
<div class="page-show-main-vedio-bofang"></div>
</div>
<div class="page-show-content">
<span class="page-show-content-guangao">企业七大核心要点</span>
<span class="page-show-content-jibie">华为14年人力资源资深专家</span>
<div class="page-show-content-vip">
<div class="page-show-content-vip-freeornot">👑v4会员免费</div>
<div class="page-show-content-vip-price">￥19.99</div><small class="page-show-content-vip-zhekou">200</small>
</div>
</div>
</div>
<div class="page-show-main">
<div class="page-show-main-vedio">
<img width="125px" height="81px" style="border-radius: 10px;" src="/app/templates/img/test.jpg">
<div class="page-show-main-vedio-bofang"></div>
</div>
<div class="page-show-content">
<span class="page-show-content-guangao">如何看待叙利亚局势</span>
<span class="page-show-content-jibie">华为14年人力资源资深专家</span>
<div class="page-show-content-vip">
<div class="page-show-content-vip-freeornot">👑v4会员免费</div>
<div class="page-show-content-vip-price">￥99</div><small class="page-show-content-vip-zhekou">200</small>
</div>
</div>
</div>
<div class="page-show-main">
<div class="page-show-main-vedio">
<img width="125px" height="81px" style="border-radius: 10px;" src="/app/templates/img/realman.jpg">
<div class="page-show-main-vedio-bofang"></div>
</div>
<div class="page-show-content">
<span class="page-show-content-guangao">全栈牛魔之路</span>
<span class="page-show-content-jibie">华为14年人力资源资深专家</span>
<div class="page-show-content-vip">
<div class="page-show-content-vip-freeornot">👑v4会员免费</div>
<div class="page-show-content-vip-price">￥199</div><small class="page-show-content-vip-zhekou">200</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>有需要的可以拿去用