Django打造大型企业官网

Posted 2022-02-03 derek1184405959

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;
                    
                

效果