- <div class="right">
- <h3>我的课程表h3>
- <div class="content">1div>
- div>
- /* 课程表 */
- .banner .right {
- margin-top: 60px;
- width: 218px;
- height: 305px;
- background-color: #209dd5;
- border-radius: 10px;
- }
-
- .banner .right h3 {
- margin-left: 14px;
- height: 48px;
- line-height: 48px;
- font-size: 15px;
- color: #fff;
- font-weight: 400;
- }
-
- .banner .right .content {
- padding: 14px;
- height: 257px;
- background-color: #fff;
- border-radius: 10px;
- }
- <dl>
- <dt>数据可视化课程dt>
- <dd><span>正在学习span>-<strong>echarts使用步骤strong>dd>
- dl>
- <dl>
- <dt>Vue3医疗项目课程 dt>
- <dd><span>正在学习span>-<strong>认识组合式APIstrong>dd>
- dl>
- <dl>
- <dt>React核心技术课程dt>
- <dd><span>正在学习span>-<strong>rudex配合TS使用strong>dd>
- dl>
- .banner .right dl {
- margin-bottom: 12px;
- border-bottom: 1px solid #e0e0e0;
- }
-
- .banner .right dt {
- margin-bottom: 8px;
- font-size: 14px;
- line-height: 20px;
- font-weight: 700;
- }
-
- .banner .right dd {
- margin-bottom: 8px;
- font-size: 12px;
- line-height: 16px;
- }
-
- .banner .right dd span {
- color: #00a4ff;
- }
-
- .banner .right dd strong {
- color: #7d7d7d;
- font-weight: 400;}
<a href="#">全部课程a>
- .banner .right a {
- display: block;
- height: 32px;
- background-color: #00a4ff;
- text-align: center;
- line-height: 32px;
- font-size: 14px;
- color: #fff;
- border-radius: 15px;
- }
- <div class="recommend wrapper">
- <h3>精品推荐h3>
- <ul>
- <li><a href="#">HTMLa>li>
- ul>
- <a href="#" class="modify">修改兴趣a>
- div>
- /* 精品推荐 */
- .recommend {
- display: flex;
- margin-top: 11px;
- padding: 0 20px;
- height: 60px;
- background-color: #fff;
- box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.5);
- line-height: 60px;
- }
- <ul>
- <li><a href="#">HTMLa>li>
- <li><a href="#">CSSa>li>
- <li><a href="#">JavaScripta>li>
- <li><a href="#">Node.jsa>li>
- <li><a href="#">Ajaxa>li>
- <li><a href="#">Vue2.0a>li>
- <li><a href="#">Vue3.0a>li>
- <li><a href="#">TypeScripta>li>
- <li><a href="#">Reacta>li>
- ul>
- <div class="course wrapper">
-
- <div class="hd">
- <h3>精品推荐h3>
- <a href="#" class="more">查看全部a>
- div>
-
- <div class="bd">1div>
- div>
- /* 推荐课程 */
- .margin-top: 15px;
- }course {
-
- /* 标题 - 公共类,与其他区域共用 */
- .hd {
- display: flex;
- justify-content: space-between;
- height: 60px;
- line-height: 60px;
- }
-
- .hd h3 {
- font-size: 21px;
- font-weight: 400;
- }
-
- .hd .more {
- padding-right: 20px;
- background: url(../images/more.png) no-repeat right center;
- font-size: 14px;
- color: #999;
- }
- <ul>
- <li>1li>
- <li>2li>
- <li>3li>
- <li>4li>
- <li>5li>
- <li>6li>
- <li>7li>
- <li>8li>
- ul>
- /* 课程内容 - 公共类 */
- .bd ul {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- }
-
- .bd li {
- margin-bottom: 14px;
- width: 228px;
- height: 271px;
- background-color: pink;
- }