首页 > > 网页制作 > css >

sass实现头条新闻列表页面

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

sass实现头条新闻列表页面

Index.html

<!DOCTYPE html>
<html>
<head>
    <title>今日头条</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div class="header">
        <div class="title_logo"></div>
    </div>
    <div class="top_bar">
        <div class="top_menu_list">
           <a class="btn cur">推荐</a>
           <a class="btn">视频</a>
           <a class="btn">热点</a>
           <a class="btn">社会</a>
           <a class="btn">娱乐</a>
           <a class="btn">军事</a>
           <a class="btn">科技</a>
           <a class="btn">汽车</a>
           <a class="btn">体育</a>
           <a class="btn">财经</a>
           <a class="btn">国际</a>
           <a class="btn">时尚</a>
        </div>
    </div>
    <div class="content_list">
      <section class="section_item">
         <div class="item_detail">
             <h3 class="title">一图读懂｜政治局会议释放哪些重大信号？</h3>
             <div class="item_info">
              
                 <span class="stick_label">置顶</span>
                 <span class="src">新华社</span>
                 <span class="cmt">评论 2473</span>
                 <span class="time">2分钟前</span>
              
             </div>
        </div>
      </section>
        <section class="images-item">

          <div class="item_detail">
           <h3 class="title">85小时！重庆万州坠江公交车被打捞出水 车身变形 现场鸣笛致哀现场 鸣笛致哀现场 鸣笛致哀</h3>
           <div class="list_image">
            <ul>
             <li class="list_img_holder"><img src="./assets/1540880316090fcf65c4ee6"></li>
             <li class="list_img_holder"><img src="./assets/2a50a746-a303-47ac-8d30-11cba7c27b30"></li>
             <li class="list_img_holder"><img src="./assets/1540880316067f69d843289"></li>
            </ul>
           </div>
           <div class="item_info">
             <span class="hot_label">热</span>
             <span class="src">青蜂侠</span>
             <span class="cmt">评论 7028</span>
             <span class="time">1分钟前</span>
           </div>
          </div>
        </section>
                <section class="images-item">

          <div class="item_detail">
           <h3 class="title">85小时！重庆万州坠江公交车被打捞出水 车身变形 现场鸣笛致哀现场 鸣笛致哀现场 鸣笛致哀</h3>
           <div class="list_image">
            <ul>
             <li class="list_img_holder"><img src="./assets/1540880316090fcf65c4ee6"></li>
             <li class="list_img_holder"><img src="./assets/2a50a746-a303-47ac-8d30-11cba7c27b30"></li>
             <li class="list_img_holder"><img src="./assets/1540880316067f69d843289"></li>
            </ul>
           </div>
           <div class="item_info">
             <span class="hot_label">热</span>
             <span class="src">青蜂侠</span>
             <span class="cmt">评论 7028</span>
             <span class="time">1分钟前</span>
           </div>
          </div>
        </section>
        <section class="image-item">

          <div class="item_detail">
           <h3 class="title"> 文娱自营嗨翻全场，跨店每满99减50 </h3>
           <div class="one_image">
              <img src="./assets/201811015d0d07373ab3842644fd8a12_640x0.image">
           </div>
           <div class="item_info">
             <span class="gg_label">广告</span>
             <span class="src">京东</span>
             <span class="cmt">评论 28</span>
             <span class="time">1分钟前</span>
           </div>
          </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';


$baseFontSize: 17px;
$redColor:#d43d3d;
$blueColor: #2a90d7;
$assetsDir: 'assets';


@mixin sectionStyle {
    margin-left: 15px;
    margin-right: 15px;

    border-bottom: 1px solid rgba(211,211,211, 0.6);

    padding-top: 10px;
    padding-bottom: 10px;
}

@mixin hotLabel($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;
}

@mixin clearfix {
    &:after {
        visibility: hidden;
        display: block;
        content: " ";
        clear: both;
        height: 0;
    }
}

@mixin commonImg {
    border: none;
    width: 100%;
    display: block;
}

.header {
    height: 45px;
    background-color: $redColor;
    .title_logo {
        width: 100px;
        height: 100%;
        margin: 0 auto;
        background:{
            position: center;
            size: contain;
            repeat: no-repeat;
            image:url($assetsDir+'/wap_logo@3x_581de69e.png');
        }; 
    }
}

.top_bar {
    background-color: #f4f5f6;
    height: 34px;
    overflow-x: auto;
    overflow-y: hidden;
    .top_menu_list {
        white-space: nowrap;
        overflow: hidden;
        height: 100%;
        display: inline-block;
    }
    .btn {
        padding: 8px;
        display: inline-block;
        font-size: $baseFontSize;
        &.cur {
            color: $redColor;
        }
    }
}

.content_list {
    .section_item {
        @include sectionStyle;
        .title {
            font-size: 20px;
        }
        .item_info_base {
            color: #999;
            font-size: 14px;
        }
        .item_info {
            margin-top: 11px;
            @extend .item_info_base;
        }
        .stick_label {
            @include hotLabel($redColor);
        }
        .src {
            @extend .item_info_base;
        }
    }

    .images-item {
        @extend .section_item;
        .title {
            @include line2;
        }
        .list_image {
            margin-top: 10px;
        }
        .list_img_holder {
            float: left;
            width: 33.33%;
            height: 80px;
            img {
                @include commonImg;
            }
        }
        ul {
            @include clearfix;
        }
    }
    .image-item {
        @extend .section_item;
        .one_image {
            height: 195px;
            margin-top: 10px;
            img {
                @include commonImg;
            }
        }
        .gg_label {
            @include hotLabel($blueColor);
        }
    }
}