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. CSS-- 实用CSS样式

    自用实用CSS样式 1.清除DIV浮动 <span style="font-family:KaiTi_GB2312;">clear: both;</span> ...

  2. python学习记录（五）

    20180829--https://www.cnblogs.com/fnng/archive/2013/04/20/3032563.html 字典 字典的使用 现实中的字段及在Python中的字段都进 ...

  3. CCF_201604-1_折点计数

    (a[i]-a[i-1])*(a[i]-a[i+1]) > 0 的点符合条件 #include<cstdio> #include<iostream> using name ...

  4. 1. 学习Linux操作系统

    1.熟练使用Linux命令行(鸟哥的Linux私房菜.Linux系统管理技术手册) 2.学会Linux程序设计(UNIX环境高级编程) 3.了解Linux内核机制(深入理解LINUX内核) 4.阅读L ...

  5. Nginx+uWSGI+Django原理(转发)

    Python的Web开发中,如果使用Django框架,那么较为成熟稳定的服务器架构一般是Nginx+uWSGI+Django.而为什么一定要三个结合在一起呢?直接使用Django的runserver来 ...

  6. Go语言实现：【剑指offer】栈的压入、弹出序列

    该题目来源于牛客网<剑指offer>专题. 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5 ...

  7. Go语言实现：【剑指offer】最小的K个数

    该题目来源于牛客网<剑指offer>专题. 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. Go语言实现: fu ...

  8. Flink系统之Table API 和 SQL

    Flink提供了像表一样处理的API和像执行SQL语句一样把结果集进行执行.这样很方便的让大家进行数据处理了.比如执行一些查询,在无界数据和批处理的任务上,然后将这些按一定的格式进行输出,很方便的让大 ...

  9. Python3(十一) 原生爬虫

    一.爬虫实例 1.原理:文本分析并提取信息——正则表达式. 2.实例目的:爬取熊猫TV某个分类下面主播的人气排行 分析网站结构 操作:F12查看HTML信息,Ctrl+Shift+C鼠标选取后找到对应 ...

  10. OSPFv3与OSPFv2协议的比较

    From: http://blog.sina.com.cn/s/blog_61bd83dc0100la2u.html   OSPFv3与OSPFv2协议的比较 OSPF是一种链路状态路由协议.它具有标 ...