Django打造大型企业官网（七）

4.13.新闻列表tab栏布局完成

templates/news/index.html

　　　　　　　　　　<div class="list-outer-group">
                    <ul class="list-tab">
                        <li class="active" ><a href="#">最新资讯</a></li>
                        <li><a href="#">热点</a></li>
                        <li><a href="#">深度报道</a></li>
                        <li><a href="#">干活分享</a></li>
                        <li><a href="#">投资人说</a></li>
                    </ul>
                </div>

src/css/index.scss

.main{
  .wrapper{
    .news-wrapper{
      .list-outer-group{
        background: #fff;

        .list-tab{
          width: 100%;
          height: 66px;
          overflow: hidden;
          border: 1px solid #eee;
          border-left: none;
          border-right: none;

          li{
            float: left;
            padding: 0 10px;
            margin-top: 20px;
            a{
              color:#878787;
              font-size: 16px;
            }
            &:first-of-type{
              border-left: 5px solid #5c87d9;
            }

            &.active{
              a{
                color: #212121;
              }
            }
          }
        }
      }
    }
  }
}

4.14.新闻列表页布局完成

templates/news/index.html

　　　　　　　　　　　　<ul class="list-inner-group">
                        <li>
                            <div class="thumbnial-group">
                                <a href="">
                                    <img src="https://static-image.xfz.cn/1561031505_57.jpg-website.news.list" alt="">
                                </a>
                            </div>

                            <div class="news-group">
                                <p class="title"><a href="#">印度人摩托车上的帝国</a></p>
                                <p class="desc">近些年印度市场涌现出一批摩托车创业公司,摩托车
                                    是否能够解决印度人最后一公里的出行难题？印度的创业者又是否
                                    能在摩托车上建立起自己的商业帝国。
                                </p>
                                <p class="more">
                                    <span class="category">深度报告</span>
                                    <span class="pub-time">一小时前</span>
                                    <span class="author">zhang_derek</span>
                                </p>
                            </div>
                        </li>

                        <li>
                            <div class="thumbnial-group">
                                <a href="">
                                    <img src="https://static-image.xfz.cn/1561246883_290.jpg-website.news.list" alt="">
                                </a>
                            </div>

                            <div class="news-group">
                                <p class="title"><a href="#">早报：爱奇艺会员规模破1亿</a></p>
                                <p class="desc">中国氢能第一股亿华通拟申请上科创板 3年估值翻10倍</p>
                                <p class="more">
                                    <span class="category">爱奇艺</span>
                                    <span class="pub-time">两小时前</span>
                                    <span class="author">zhang_derek</span>
                                </p>
                            </div>

                        </li>
                    </ul>

src/css/index.scss

.list-inner-group {
                    li {
                        padding: 20px;
                        border-bottom: 1px solid #eee;
                        overflow: hidden;
                        .thumbnial-group {
                            float: left;
                            height: 162px;
                            width: 226px;
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .news-group {
                            float: right;
                            width: 504px;
                            height: 162px;
                            position: relative;
                            .title{
                                font-size: 22px;
                                a{
                                   color: #212121;
                                    &:hover{
                                        color: #5c87d9;
                                    }
                                }
                            }

                            .desc{
                                color: #878787;
                                font-size: 14px;
                                margin-top: 10px;
                            }

                            .more{
                                position: absolute;
                                left: 0;
                                right: 0;
                                bottom: 0;
                                font-size: 14px;
                                color: #878787;
                                .category{
                                    color: #5c87d9;
                                }
                                .pub-time{
                                    float: right;
                                    margin-left: 20px;
                                }
                                .author{
                                    float: right;
                                }
                            }
                        }
                    }

4.15.加载更多按钮布局和样式

templates/news/index.html

                　　<div class="load-more-group">
                        <button class="load-more" >查看更多</button>
                    </div>                    

src/css/index.scss

            .load-more-group{
                    padding: 20px 0;
                    text-align: center;
                    .load-more{
                        width: 402px;
                        height: 40px;
                        background: #d2dcea;
                        border: none;
                        outline: none;
                        cursor: pointer;
                    }
                }

效果