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

4.16.侧边栏标题和广告位布局完成

templates/news/index.html

　　　　　　　<div class="sidebar-wrapper">
                <div class="title-group">
                    <span class="title">在线课堂</span>
                    <a class="more" href="#">更多</a>
                </div>
                <div class="advertise-group">
                    <img src="https://static-image.xfz.cn/1554346383_8.png" alt="">
                </div>

            </div>

src/css/index.scss

.main{
    .wrapper{
        .sidebar-wrapper {
            float: right;
            width: 356px;
            height: 500px;
            background: #fff;


            .title-group{
                padding: 20px;
                overflow: hidden;
                .title{
                    float: left;
                    font-size: 18px;
                    color: #212121;
                }
                .more{
                    float: right;
                    font-size: 14px;
                    color: #5c87d9;
                }
            }

            .advertise-group{
                img{
                    width: 100%;
                }
            }
        }
    }
}

效果

4.17.侧边栏-关注第三方平台盒子布局和样式

templates/news/index.html

　　　　　　　　<div class="platform-group">
                    <div class="title-group">
                        <span class="title">关注小饭桌</span>
                    </div>
                    <div class="focus-group">
                        <ul class="left-group">
                            <li class="zhihu" ><a href="#" target="_blank" >小饭桌创业课堂</a></li>
                            <li class="weibo" ><a href="#" target="_blank" >小饭桌创业课堂</a></li>
                            <li class="toutiao" ><a href="#" target="_blank" >小饭桌</a></li>
                        </ul>
                        <div class="right-group">
                            <p class="desc">扫描关注小饭桌微信公众号</p>
                        </div>
                    </div>

                </div>

src/css/index.scss

　　　　　　.focus-group{
                padding: 0 20px;
                overflow: hidden;
                .left-group{
                    width: 180px;
                    float: left;
                    li{
                        width: 100%;
                        height: 50px;
                        line-height: 50px;
                        background: url("https://www.xfz.cn/static/build/images/side-icon.png") no-repeat;
                        background-size: 26%;
                        margin-bottom: 20px;
                        overflow: hidden;
                        a{
                            float: left;
                            margin-left: 64px;
                            color: #878787;
                            font-size: 14px;
                        }
                    }
                    .zhihu{
                        background-position: 0 0;
                    }
                    .weibo{
                        background-position: 0 -63px;
                    }
                    .toutiao{
                        background-position: 0 -122px;
                    }
                }

                .right-group{
                    float: right;
                    width: 100px;
                    background: url("https://www.xfz.cn/static/build/images/xfz-school-wechat-share.png");
                    background-size: 100%;
                    background-repeat: no-repeat;
                    .desc{
                        margin-top: 100px;
                        color: #878787;
                        font-size: 12px;
                    }
                }
            }

效果

 

4.18.侧边栏-热门推荐完成

templates/news/index.html

　　　　　　　　　　<div class="hot-news-group">
                    <div class="title-group">
                        <span class="title">热门推荐</span>
                    </div>
                    <ul class="hot-list-group">
                        <li>
                            <div class="left-group">
                                <p class="title" ><a href="#">印度人摩托车上的帝国</a></p>
                                <p class="more">
                                    <span class="category">深度报道</span>
                                    <span class="pub-time">1小时前</span>
                                </p>
                            </div>
                            <div class="right-group">
                                <a href="#">
                                    <img src="https://static-image.xfz.cn/1561031505_57.jpg-website.news.list" alt="">
                                </a>
                            </div>
                        </li>

                        <li>
                            <div class="left-group">
                                <p class="title" ><a href="#">早报：爱奇艺会员规模破1亿</a></p>
                                <p class="more">
                                    <span class="category">爱奇艺</span>
                                    <span class="pub-time">2小时前</span>
                                </p>
                            </div>
                            <div class="right-group">
                                <a href="#">
                                    <img src="https://static-image.xfz.cn/1561246883_290.jpg-website.news.list" alt="">
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>

src/css/index.scss

　　　　　　　　.hot-news-group{
                .hot-list-group{
                    li{
                        padding: 0 20px 20px;
                        overflow: hidden;
                        border-bottom: 1px solid #eee;

                        .left-group{
                            float: left;
                            width: 204px;
                            height: 72px;
                            position: relative;
                            .title{
                                font-size: 16px;
                                a{
                                    color: #212121;
                                    &:hover{
                                        color: #5c87d9;
                                    }
                                }
                            }

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

                        .right-group{
                            float: right;
                            width: 102px;
                            height: 72px;
                            img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }
            }

效果