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:;

  padding:;

  border:;

}

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:;

}

@mixin clearfix {

    &:after {

        visibility: hidden;

        display: block;

        content: " ";

        clear: both;

        height:;

    }

}

@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);

        }

    }

}

sass实现头条新闻列表页面的更多相关文章

  1. 潭州课堂25班：Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载，轮播图后台实现 (课堂笔记）

    新建static/js/news/index.js文件 ,主要用于向后台发送请求, // 新建static/js/news/index.js文件 $(function () { // 新闻列表功能 l ...

  2. 潭州课堂25班：Ph201805201 django 项目 第二十一课 文章主页 新闻列表页面功能 (课堂笔记）

    新闻列表页功能 1.分析 业务处理流程: 判断前端传的标签分类id是否为空,是否为整数.是否超过范围 判断前端传的当前文章页数是否为空,是否为整数.是否超过范围 请求方法:GET url定义:/new ...

  3. android 75 新闻列表页面

    new.xml <?xml version="1.0" encoding="UTF-8" ?> <newslist> <news& ...

  4. zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  5. （android高仿系列）今日头条 --新闻阅读器 （二）

    高仿今日头条 --- 第一篇:(android高仿系列)今日头条 --新闻阅读器 (一)    上次,已经完毕了头部新闻分类栏目的拖动效果. 这篇文章是继续去完好APP 今日头条  这个新闻阅读器的其 ...

  6. Angular2快速入门-3.多个组件（分离新闻列表页和详细页）

    上篇(Angular2快速入门-2.创建一个新闻列表)已经完成新闻列表的展示,并且点击新闻列表的时候,下面可以展示出新闻的详细信息,这节我们把新闻详细和新闻列表页面分离出来 新闻详细单独一个compo ...

  7. node——由新闻列表跳转到新闻详情页

    当我们在浏览新闻列表页面的时候,想要看感兴趣的新闻内容,需要到详情页面去查看内容. 在之前写好了新闻列表页面,现在需要做列表页面到详情页面的跳转,需要考虑一下问题 1.点击新闻列表某一项跳转到详情页面 ...

  8. JQuery实现页面企业广告图片切换和新闻列表滚动效果

    最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  9. 桂电在线_微信公众平台开发之-运用angularjs显示学校公告新闻列表和详情页面

    折腾angularjs的感悟 几天折腾,总的来说看了很多博客,要么不是最新的技术文档,要么写得不够完整,因为别人是基于他们的理解写的技术博客代码不一定会贴完整,所以一旦你用的是最新的想要看完整的实例就 ...

随机推荐

  1. 安装Eclipse activity插件 报异常 Cannot complete the install because one or more required items could not be

    下载插件:Activiti Designer 5.17 2)安装过程中错误处理 a.错误: Cannot complete the install because one or more requir ...

  2. Serverless 的运行原理与组件架构

    本文重点探讨下开发者使用 Serverless 时经常遇到的一些问题,以及如何解决 过去一年,我们和大量 Serverless 用户进行了线上和线下的交流,了解大家的业务场景.对 Serverless ...

  3. 快速理解 VUEX 原理

    1. vuex 的作用: vuex其实是集中的数据管理仓库,相当于数据库mongoDB,MySQL等,任何组件都可以存取仓库中的数据. 2. vuex 流程和 vue 类比: 我们看一下一个简单的vu ...

  4. MySql新版本安装配置

    版本:mysql-5.7.16-winx64 平台Windows 7 x64 1.进入mysql主目录(建议将其移到C或D盘的根目录,并改名为mysql) 2.配置path环境变量(如D:\JAVA\ ...

  5. jmeter新手学习笔记（一）

    使用jmeter做接口测试--设置线程组 1.创建线程组 2.设置线程数配置信息 线程组:常用于模拟并发用户访问,例如需要100个用户访问该接口,线程数则设置为100 Ramp-Up Period:决 ...

  6. HDU_2510_打表

    http://acm.hdu.edu.cn/showproblem.php?pid=2510 dfs打表. #include<iostream> #include<cstdio> ...

  7. 【译文连载】 理解Istio服务网格（第一章 概述）

    书籍英文版下载链接为 https://developers.redhat.com/books/introducing-istio-service-mesh-microservices/,作者 Burr ...

  8. shellcode 反汇编，模拟运行以及调试方法

    onlinedisassembler https://onlinedisassembler.com 在线反汇编工具,类似于lda.功能比较单一. Any.run 等平台在线分析 将shellcode保 ...

  9. mongodb 配置文件解释(转)

    Mongodb 3.x配置说明,本文内容忽略了Enterprise版和一些不常用的配置. 一.配置说明 在Mongod安装包中,包含2个进程启动文件:mongod和mongos:其中mongd是核心基 ...

  10. Wannafly挑战赛5 A珂朵莉与宇宙 前缀和+枚举平方数

    Wannafly挑战赛5 A珂朵莉与宇宙 前缀和+枚举平方数 题目描述 给你一个长为n的序列a,有n*(n+1)/2个子区间,问这些子区间里面和为完全平方数的子区间个数 输入描述: 第一行一个数n 第 ...