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

效果