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:;

                                right:;

                                bottom:;

                                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;

                    }

                }

效果