小滴课堂首页版心banner

一.思路及布局

版心分为：banner区、课程区

二.编写

1.html编写

<div class="content">
    <div class="banner clearfix">
        <ul class="l-category fl">
          <li>后端</li>
          <li>后端</li>
          <li>后端</li>
          <li>后端</li>
          <li>后端</li>
        </ul>
        <div class="r-banner fl">
          <a href="javascript:void(0)">
            <img src="./img/banner.png" alt="banner">
          </a>
        </div>
    </div>
</div>

2.css编写

清除header的浮动

.header {
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
    overflow: hidden;
}

把banner背景色设置为白色，边框变为圆角

.banner {
    background-color: #fff;
    border-radius: 20px;
}

设置类别的宽高及属性

.l-category {
    width: 220px;
    height: 450px;
    padding: 0 20px;
    background-color: #0c0c13;
    opacity: .9;
    color: #fff;
}

.l-category li {
    font-size: 16px;
    line-height: 60px;
}

每个类别后面增加>

.l-category li::after {
  content: ">";
  display: block;
  float: right;
}

banner区a标签

.r-banner a {
    display: block;
    position: relative;
}
.r-banner a::before, .r-banner a::after {
  position: absolute;
  display: block;
  content: "";
  width: 27px;
  height: 44px;
  top: 50%;
  margin-top: -22px;
}
.r-banner a::before {
  background: url('../img/prev.png') no-repeat center;
  left: 20px;
}
.r-banner a::after {
  background: url('../img/next.png') no-repeat center;
  right: 20px;
}