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

  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实现头条新闻列表页面的更多相关文章

潭州课堂25班：Ph201805201 django 项目第二十二课文章主页新闻列表页面滚动加载，轮播图后台实现 (课堂笔记）
新建static/js/news/index.js文件 ,主要用于向后台发送请求, // 新建static/js/news/index.js文件 $(function () { // 新闻列表功能 l ...
潭州课堂25班：Ph201805201 django 项目第二十一课文章主页新闻列表页面功能 (课堂笔记）
新闻列表页功能 1.分析业务处理流程: 判断前端传的标签分类id是否为空,是否为整数.是否超过范围判断前端传的当前文章页数是否为空,是否为整数.是否超过范围请求方法:GET url定义:/new ...
android 75 新闻列表页面
new.xml <?xml version="1.0" encoding="UTF-8" ?> <newslist> <news& ...
zepto.js + iscroll.js上拉加载下拉加载的移动端新闻列表页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
（android高仿系列）今日头条 --新闻阅读器（二）
高仿今日头条 --- 第一篇:(android高仿系列)今日头条 --新闻阅读器 (一) 上次,已经完毕了头部新闻分类栏目的拖动效果. 这篇文章是继续去完好APP 今日头条这个新闻阅读器的其 ...
Angular2快速入门-3.多个组件（分离新闻列表页和详细页）
上篇(Angular2快速入门-2.创建一个新闻列表)已经完成新闻列表的展示,并且点击新闻列表的时候,下面可以展示出新闻的详细信息,这节我们把新闻详细和新闻列表页面分离出来新闻详细单独一个compo ...
node——由新闻列表跳转到新闻详情页
当我们在浏览新闻列表页面的时候,想要看感兴趣的新闻内容,需要到详情页面去查看内容. 在之前写好了新闻列表页面,现在需要做列表页面到详情页面的跳转,需要考虑一下问题 1.点击新闻列表某一项跳转到详情页面 ...
JQuery实现页面企业广告图片切换和新闻列表滚动效果
最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
桂电在线_微信公众平台开发之-运用angularjs显示学校公告新闻列表和详情页面
折腾angularjs的感悟几天折腾,总的来说看了很多博客,要么不是最新的技术文档,要么写得不够完整,因为别人是基于他们的理解写的技术博客代码不一定会贴完整,所以一旦你用的是最新的想要看完整的实例就 ...

随机推荐

Nutz框架-- Cnd条件使用原生sql
案例今天接到一个临时的业务需求,做一个简单的过滤作为临时业务需要使用一两天,于是想到在原有的Cnd条件上加上一个Not like 进行过滤,但是发现现有Cnd条件查询好像满足不了解决方案使用Nu ...
Hibernate(五)
================================criteria(QBC)查询========================QBC,(容器)又名对象查询:采用对象的方式(主要是cri ...
使用alpine制作最小化的JDK基础镜像
注意:这里使用的是oracle的JRE,版本是1.8. 1.解压jre包,删除根目录下文本文件,然后删除其他不必要文件. #解压 tar xvcf jre-8u161-linux-x64.tar.gz ...
【动手学pytorch】softmax回归
一.什么是softmax? 有一个数组S,其元素为Si ,那么vi 的softmax值,就是该元素的指数与所有元素指数和的比值.具体公式表示为: softmax回归本质上也是一种对数据的估计二.交叉 ...
void * 和 void 在函数返回值中的区别
一个很容易糊涂的问题. 在函数的返回值中, void 是没有任何返回值, 而 void * 是返回任意类型的值的指针. 还是看代码吧: #include <stdlib.h> #inclu ...
Java 接口及接口回调_Chris
题目: 利用接口和接口回调,实现简单工厂模式,当输入不同的字符,代表相应图形时,利用工厂类获得图形对象,再计算以该图形为底的柱体体积. 代码: 1.Test.java /** * 测试类,包含一个主方 ...
HDU_3853_概率dp
http://acm.hdu.edu.cn/showproblem.php?pid=3853 又因为总期望为子期望的加权和,加权因子为子期望的转移概率,所以得到:dp[ i ][ j ]= p1 * ...
Go语言实现：【剑指offer】数值的整数次方
该题目来源于牛客网<剑指offer>专题. 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. 保证base和exponent不 ...
Go语言实现：【剑指offer】对称的二叉树
该题目来源于牛客网<剑指offer>专题. 请实现一个函数,用来判断一颗二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的. Go语言实现: 方法一:递归 / ...
详解c++中对二维数组下标[][]的重载
首先定义一个矩阵类,我用一个二维数组存储矩阵中的数据,矩阵详细定义如下 class Matrix { public: Matrix(int rows, int cols) { _rows = rows ...

sass实现头条新闻列表页面

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

随机推荐

热门专题