博客
关于我
新闻列表、侧边栏、footer
阅读量:583 次
发布时间:2019-03-11

本文共 13669 字,大约阅读时间需要 45 分钟。

新闻列表、侧边栏、footer

新闻列表tab栏布局完成

.main{       .wrapper{           .main-content-wrapper{               .list-outer-group{                   background: #fff;                margin-top: 14px;                .list-tab{                       width: 100%;                    height: 66px;                    overflow: hidden;   //比较重要                    border: 1px solid #eeeeee;                    border-left: none;                    border-right: none;                    li{                           float: left;                        padding: 0 10px;                        margin-top: 20px;                        a{                               color: #878787;                        }                        &:first-of-type{                                border-left: 5px solid $themeColor;    //加个竖线                        }                        &.active{                               a{                                   color: #212121;                            }                        }                    }                }                       }        }    }}

新闻列表页布局完成

.list-inner-group{                       @include news_list;                }

加载更多按钮的布局和样式

.load-more-group{                       padding: 20px 0;                    text-align: center;                    .load-more{                           width: 402px;                        height: 40px;                        background: #d2dcea;                        color: #6d85ac;  //字体颜色                        border: none;    // 去除边框                        outline: none;                        cursor: pointer;                    }                }

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

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

关注小饭桌

扫码关注小饭桌微信公众平台xfz008

侧边栏-热门推荐完成

footer布局和样式(1)

@import "constants.scss";.footer{       font-size: 14px;    color: #c9c9c9;    padding-top: 20px;    .top-group{           background: #555e67;        height: 100px;        padding-top: 26px;        box-sizing: border-box;        .top-inner-group{               width: $pageWidth;            margin: 0 auto;            //overflow: hidden;            position: relative;            .logo-box{                   width: 168px;                height: 54px;                float: left;                background: url("http://xfz.cn/static/build/images/foot-logo.png");                background-repeat: no-repeat;                background-size: 100%;            }            .detail-group{                   float: left;                margin-left: 84px;                .line1{                       overflow: hidden;                    .links{                           float: left;                        overflow: hidden;                        li{                               float: left;                            padding: 0 10px;                            a{                                   color: #c9c9c9;                            }                            &:first-of-type{                                   padding-left: 0;                            }                            &:last-of-type{                                   border-right: none;                            }                            border-right:1px solid #c9c9c9;                        }                    }                    .about-us{                           float: left;                        margin-left: 40px;                        .title{                               float: left;                        }                        .social-group{                               float: left;                            overflow: hidden;                            li{                                   float: left;                                color: #fff;                                .text{                                       margin-left: 24px;                                }                            }                            .weixin{                                   background: url("https://www.xfz.cn/static/build/images/wx-icon.png");                                background-repeat: no-repeat;                                background-size: 30%;                                cursor: pointer;                                &:hover .wx-qrcode{                                       display: block;                                }                                .wx-qrcode{                                       width: 204px;                                    height: 204px;                                    background: url("https://www.xfz.cn/static/build/images/wxQr.jpg");                                    background-size: 100%;                                    position: absolute;                                    right: 360px;                                    top: -220px;                                    display: none;                                }                            }                            .weibo{                                   margin-left: 20px;                                background: url("https://www.xfz.cn/static/build/images/xl-icon.png");                                background-repeat: no-repeat;                                background-size: 18%;                                a{                                       color: #fff;                                }                            }                        }                    }                }                .line2{                       overflow: hidden;                    margin-top: 20px;                    .address{                           float: left;                    }                    .contact{                           float: left;                        margin-left: 40px;                    }                }            }        }    }    .bottom-group{           background: #383e44;        height: 60px;        text-align: center;        line-height: 60px;    }}

footer布局和样式(2)

@import "constants.scss";.footer{       font-size: 14px;    color: #c9c9c9;    padding-top: 20px;    .top-group{           background: #555e67;        height: 100px;        padding-top: 26px;        box-sizing: border-box;        .top-inner-group{               width: $pageWidth;            margin: 0 auto;            //overflow: hidden;            position: relative;            .logo-box{                   width: 168px;                height: 54px;                float: left;                background: url("http://xfz.cn/static/build/images/foot-logo.png");                background-repeat: no-repeat;                background-size: 100%;            }            .detail-group{                   float: left;                margin-left: 84px;                .line1{                       overflow: hidden;                    .links{                           float: left;                        overflow: hidden;                        li{                               float: left;                            padding: 0 10px;                            a{                                   color: #c9c9c9;                            }                            &:first-of-type{                                   padding-left: 0;                            }                            &:last-of-type{                                   border-right: none;                            }                            border-right:1px solid #c9c9c9;                        }                    }                    .about-us{                           float: left;                        margin-left: 40px;                        .title{                               float: left;                        }                        .social-group{                               float: left;                            overflow: hidden;                            li{                                   float: left;                                color: #fff;                                .text{                                       margin-left: 24px;                                }                            }                            .weixin{                                   background: url("https://www.xfz.cn/static/build/images/wx-icon.png");                                background-repeat: no-repeat;                                background-size: 30%;                                cursor: pointer;                                &:hover .wx-qrcode{                                       display: block;                                }                                .wx-qrcode{                                       width: 204px;                                    height: 204px;                                    background: url("https://www.xfz.cn/static/build/images/wxQr.jpg");                                    background-size: 100%;                                    position: absolute;                                    right: 360px;                                    top: -220px;                                    display: none;                                }                            }                            .weibo{                                   margin-left: 20px;                                background: url("https://www.xfz.cn/static/build/images/xl-icon.png");                                background-repeat: no-repeat;                                background-size: 18%;                                a{                                       color: #fff;                                }                            }                        }                    }                }                .line2{                       overflow: hidden;                    margin-top: 20px;                    .address{                           float: left;                    }                    .contact{                           float: left;                        margin-left: 40px;                    }                }            }        }    }    .bottom-group{           background: #383e44;        height: 60px;        text-align: center;        line-height: 60px;    }}

转载地址:http://chbtz.baihongyu.com/

你可能感兴趣的文章
mysql 行转列 列转行
查看>>
Mysql 表分区
查看>>
mysql 表的操作
查看>>
mysql 视图,视图更新删除
查看>>
MySQL 触发器
查看>>
mysql 让所有IP访问数据库
查看>>
mysql 记录的增删改查
查看>>
MySQL 设置数据库的隔离级别
查看>>
MySQL 证明为什么用limit时,offset很大会影响性能
查看>>
Mysql 语句操作索引SQL语句
查看>>
MySQL 误操作后数据恢复(update,delete忘加where条件)
查看>>
MySQL 调优/优化的 101 个建议!
查看>>
mysql 转义字符用法_MySql 转义字符的使用说明
查看>>
mysql 输入密码秒退
查看>>
mysql 递归查找父节点_MySQL递归查询树状表的子节点、父节点具体实现
查看>>
mysql 通过查看mysql 配置参数、状态来优化你的mysql
查看>>
mysql 里对root及普通用户赋权及更改密码的一些命令
查看>>
Mysql 重置自增列的开始序号
查看>>
mysql 锁机制 mvcc_Mysql性能优化-事务、锁和MVCC
查看>>
MySQL 错误
查看>>