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. Shiro自定义密码匹配认证

    项目集成shiro的时候,有写某个自定义类然后继承自AuthorizingRealm 并且重写实现了他的2个方法: 1.其中一个:认证回调 验证账户密码的 doGetAuthenticationInf ...

  2. node + multer存储element-ui上传的图片

    说明 element-ui的Upload组件可以帮助我们上传我们的图片到我们的服务器,可以使用action参数上传图片,也可以使用http-request自定义上传方式.这里我们使用自定义的方式上传. ...

  3. 【编程的乐趣-用python解算法谜题系列】谜题一 保持一致

    谜题一 保持一致 谜题 假设有一大群人排队等待观看棒球比赛.他们都是主场球迷,每个人都戴着队帽,但不是所有人都用同一种戴法,有些人正着戴,有些人反着戴. 假定你是保安,只有在全组球迷帽子戴法一致时才能 ...

  4. 安卓开发实战-记账本APP（三）

    本次实现的是有关登录,注册和整体页面的改观,实现下方选项导致页面的切换效果. 利用到的技术有Sqlite数据库的增删改查,与fragment实现.由于暂时没有找到合适的图标,先借用微信的图标暂代一下. ...

  5. Docker 容器数据 持久化（系统学习Docker05）

    写在前面 本来是可以将数据存储在 容器内部 的.但是存在容器内部,一旦容器被删除掉或者容器毁坏(我亲身经历的痛,当时我们的大数据平台就是运行在docker容器内,有次停电后,不管怎样容器都起不来.以前 ...

  6. webdriver的常用方法

    webdriver的常用方法 click():点击元素 clear():清除文本 send_keys(value):模拟按键输入 # -*- coding:utf-8 -*- from seleniu ...

  7. Android Studio 学习笔记(三)：简单控件及实例

    控件.组件.插件概念区分 说到控件,就不得不区分一些概念. 控件(Control):编程中用到的部件 组件(Component):软件的组成部分 插件(plugin): 应用程序中已经预留接口的组件 ...

  8. win10系统下安装JDK1.8及配置环境变量的方法

    本次演示基于windows10操作系统,如果你是linux,请参考:https://www.yn2333.com/archives/linux上安装JDK8 1:下载安装包 地址:https://ww ...

  9. C和C++中字符串与数的转换

    以下内容来自<C/C++程序设计实用案例教程> 1.在C语言中的转换方式 1.1数字转换为字符串 在C语言中,sprintf函数可以将任何多个数字格式化为指定格式的字符串,sprintf函 ...

  10. 轻松搞懂Python递归函数的原理与应用

    递归: 在函数的定义中,函数内部的语句调用函数本身. 1.递归的原理 学习任何计算机语言过程中,“递归”一直是所有人心中的疼.不知你是否听过这个冷笑话:“一个面包,走着走着饿了,于是就把自己吃了”. ...