sass案例--实现高仿今日头条H5版新闻列表页

效果图

index.html

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"title>仿今日头条</="utf-8"name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"link rel="stylesheet" href="index.css"bodydiv class="header">
        ="header_logo"></div="top_bar"="top_menu_list">
            a href="#" class="btn cur">推荐a="btn">视频>热点>社会>娱乐>军事>科技>汽车>体育>财经>国际>时尚="content_list"section ="content_item"h3 ="title">一图读懂|政治局会议释放哪些重大信号?h3="info">
                span ="label">置顶span="src">新华社="comment">评论 2473="time">2分钟前section>一图读懂|政治局会议释放哪些重大信号?政治局会议释放哪些重大信号?政治局会议释放哪些重大信号?ul ="image_list"li ="image_item">
                    img src="./assets/1540880316067f69d843289.png"="image"li="./assets/1540880316090fcf65c4ee6.png"="./assets/2a50a746-a303-47ac-8d30-11cba7c27b30.png"ul>="one_image"="./assets/201811015d0d07373ab3842644fd8a12_640x0.png"="label2">广告html>

reset.scss

html,body,div,span,object,button,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,code,em,img,q,small,strong,dd,dl,dt,li,ol,ul,fieldset,form,label,table,tbody,tr,th,td,input {
  margin: 0;
  padding:
  border: 0;
}
body {
  position: relative;
  width: 100%;
  overflow-x: hidden;
}
ul,li {
  list-style-type: none;
}
a {
  text-decoration:
@charset "utf-8";
html {
  background: #fff;
  font-family: 'STHeiti','Microsoft YaHei','Helvetica','Arial',sans-serif;
  -webkit-text-size-adjust: none;
  word-break: break-word;
}

index.scss

@import "./reset.scss";

$fontSize:17px;
$red:#d43d3d;
$assets:"./assets";
$fontColor:#333;
$blue:#2a90d7;

@mixin sectionStyle{
    margin:0 20px;
    padding:10px 0;
    border-bottom:1px solid rgba(211,211,.6);
}

@mixin labelColor($color){
    font-size:14px;
    color:$color;
    border:1px solid $color;
}

@mixin line2{
    overflow:hidden;
    text-overflow:ellipsis;
    display: -webkit-box; box;
    -webkit-box-orient:vertical;/*垂直布局*/
    -webkit-line-clamp:2;限制2行*/
}

@mixin clearfix{
     & 父元素选择器
    &::after{
        display:block;
        content:"";
        clear:both;
        visibility: hidden;
        height:0;
    }
}

.header{
    width:100%;
    height:45px;
    background-color:$red;

    .header_logo{
        width:100px;
        margin:0 auto;
        background:{
            position:center;
            size:contain;
            image:url(assets+"/wap_logo@3x_581de69e.png");
            repeat:no-repeat;
        };
    }
}

.top_bar{#f4f5f6;34px;
    overflow-x: auto;
    overflow-y:hidden;y方向不滚动

    .top_menu_list{
        white-space: nowrap;
        overflow:
        display: inline-block;100%;    
    }

    .btn{
        padding:8px;
        font-size: $fontSize;
        color:$fontColor;

        父元素选择器
        &.cur{
            color:$red;
        }
    }
}

.content_list{

    .content_item{
        @include sectionStyle;
    }
    .title{20px;
        @include line2;
    }
    .info_base{#999;14px;
    }
    .info{
        margin-top:11px;
        @extend .info_base;
    }
    .label{
        @extend .info_base;
        @include labelColor($red);
    }
    .src{
        @extend .info_base;

    }
    .comment{
    .time{
    .image_list{    
        margin-top:10px;
        @include clearfix;    
    }
    .image_item{
        float:left;
        width:33.33%;100%;
    }
    .image{
        border:none; block;
    }
    .one_image{10px;
    }
    .label2{
        @extend .info_base;
        @include labelColor($blue);
    }
}

# sourceMappingURL=index.css.map */

 

相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型&#160;...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...