提交 72bcb0c3 编写于 作者: tao.wu's avatar tao.wu

增加列表排列样式

上级 df4a3810
......@@ -431,7 +431,41 @@
line-height:18px;
}
.course-list{
width: 345px;
.course-item{
width: 345px;
margin-top: 20px;
display: flex;
justify-content: space-between;
div{
h1{
font-size:16px;
font-weight:700;
color:rgba(55,56,57,1);
line-height:16px;
}
h3{
font-size:13px;
color:rgba(151,152,153,1);
line-height:13px;
}
}
.course-txt{
width: 240px;
border-bottom: .5px solid rgba(240,241,242,1);
h3{
margin-top: 12px;
}
}
.course-img{
width: 90px;
height: 60px;
img{
width: 90px;
height: 60px;
display: block;
}
}
}
}
}
......
......@@ -16,35 +16,35 @@
<header>更多精彩好课推荐</header>
<div class="course-list">
<div class="course-item">
<div>
<div class="course-txt">
<h1>高血压系列课程</h1>
<h3>《高血压的发病机制》等总计4门课程</h3>
</div>
<div><img src="../assets/img/resimg1.png"></div>
<div class="course-img"><img src="../assets/img/resimg1.png"></div>
</div>
<div class="course-item">
<div>
<div class="course-txt">
<h1>糖尿病系列课程</h1>
<h3>《胰岛素的选择和管理》等总计4门课程</h3>
</div>
<div><img src="../assets/img/resimg2.png"></div>
<div class="course-img"><img src="../assets/img/resimg2.png"></div>
</div>
<div class="course-item">
<div>
<div class="course-txt">
<h1>中医系列课程</h1>
<h3>《慢性胃炎的中医治疗》等总计3门课程</h3>
</div>
<div><img src="../assets/img/resimg3.png"></div>
<div class="course-img"><img src="../assets/img/resimg3.png"></div>
</div>
<div class="course-item">
<div>
<div class="course-txt">
<h1>全科系列课程</h1>
<h3>《胸痛原因待查》等总计3门课程</h3>
</div>
<div><img src="../assets/img/resimg4.png"></div>
<div class="course-img"><img src="../assets/img/resimg4.png"></div>
</div>
</div>
</div>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册