当前位置： 移动技术网 > IT编程>网页制作>CSS > sass案例--实现高仿今日头条H5版新闻列表页

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

2020年03月30日  | 移动技术网IT编程  | 我要评论

效果图

<!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 */

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网