首页 > > 网页制作 > css >

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

2020-03-29 16:01:12来源：博客园阅读 ()

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

效果图

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿今日头条</title>
    <meta charset="utf-8">
    <meta 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">
</head>
<body>
    <div class="header">
        <div class="header_logo"></div>
    </div>
    <div class="top_bar">
        <div class="top_menu_list">
            <a href="#" class="btn cur">推荐</a>
            <a href="#" class="btn">视频</a>
            <a href="#" class="btn">热点</a>
            <a href="#" class="btn">社会</a>
            <a href="#" class="btn">娱乐</a>
            <a href="#" class="btn">军事</a>
            <a href="#" class="btn">科技</a>
            <a href="#" class="btn">汽车</a>
            <a href="#" class="btn">体育</a>
            <a href="#" class="btn">财经</a>
            <a href="#" class="btn">国际</a>
            <a href="#" class="btn">时尚</a>
        </div>
    </div>
    <div class="content_list">
        <section class="content_item">
            <h3 class="title">一图读懂|政治局会议释放哪些重大信号？</h3>
            <div class="info">
                <span class="label">置顶</span>
                <span class="src">新华社</span>
                <span class="comment">评论 2473</span>
                <span class="time">2分钟前</span>
            </div>
        </section>
        <section class="content_item">
            <h3 class="title">一图读懂|政治局会议释放哪些重大信号？政治局会议释放哪些重大信号？政治局会议释放哪些重大信号？</h3>
            <ul class="image_list">
                <li class="image_item">
                    <img src="./assets/1540880316067f69d843289.png" class="image">
                </li>
                <li class="image_item">
                    <img src="./assets/1540880316090fcf65c4ee6.png" class="image">
                </li>
                <li class="image_item">
                    <img src="./assets/2a50a746-a303-47ac-8d30-11cba7c27b30.png" class="image">
                </li>
            </ul>
            <div class="info">
                <span class="label">热</span>
                <span class="src">新华社</span>
                <span class="comment">评论 2473</span>
                <span class="time">2分钟前</span>
            </div>
        </section>
        <section class="content_item">
            <h3 class="title">一图读懂|政治局会议释放哪些重大信号？政治局会议释放哪些重大信号？政治局会议释放哪些重大信号？</h3>
            <ul class="image_list">
                <li class="image_item">
                    <img src="./assets/1540880316067f69d843289.png" class="image">
                </li>
                <li class="image_item">
                    <img src="./assets/1540880316090fcf65c4ee6.png" class="image">
                </li>
                <li class="image_item">
                    <img src="./assets/2a50a746-a303-47ac-8d30-11cba7c27b30.png" class="image">
                </li>
            </ul>
            <div class="info">
                <span class="label">热</span>
                <span class="src">新华社</span>
                <span class="comment">评论 2473</span>
                <span class="time">2分钟前</span>
            </div>
        </section>
        <section class="content_item">
            <h3 class="title">一图读懂|政治局会议释放哪些重大信号？政治局会议释放哪些重大信号？政治局会议释放哪些重大信号？</h3>
            <div class="one_image">
                <img src="./assets/201811015d0d07373ab3842644fd8a12_640x0.png" class="image">
            </ul>
            <div class="info">
                <span class="label2">广告</span>
                <span class="src">新华社</span>
                <span class="comment">评论 2473</span>
                <span class="time">2分钟前</span>
            </div>
        </section>
    </div>
</body>
</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: 0;
  border: 0;
}
body {
  position: relative;
  width: 100%;
  overflow-x: hidden;
}
ul,
li {
  list-style-type: none;
}
a {
  text-decoration: none;
}
@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,211,.6);
}

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

@mixin line2{
    overflow:hidden;
    text-overflow:ellipsis;
    display: -webkit-box;
    display: 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;
        height:100%;
        margin:0 auto;
        background:{
            position:center;
            size:contain;
            image:url(assets+"/wap_logo@3x_581de69e.png");
            repeat:no-repeat;
        };
    }
}

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

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

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

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

.content_list{

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

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

/*# sourceMappingURL=index.css.map */