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

随机推荐

oracle11G 已开启监听，但远程连接依旧无监听解决过程
1.连接数据库显示无监听程序,首先查看服务器的oracle监听服务是否开启,服务名称:OracleOraDb11g_home1TNSListener(具体环境中可能不完全一样,但是认准TNSListe ...
MyBatis 介绍
MyBatis 介绍 MyBatis 是一款优秀的 ORM(Object Relational Mapping,对象关系映射)框架,它可以通过对象和数据库之间的映射,将程序中的对象自动存储到数据库中. ...
批处理版MPlayer播放器（甲兵时代原创批处理）（下）
注意,由于空间不支持显示退格键,需要自己手动补上,方法如上图: 接上篇: 批处理版音视频播放器上(甲兵时代原创批处理) :Bc cls COLOR 2F echo. call :colour &quo ...
Java数据结构系列（1）——自平衡二叉树
1.基本概念所谓自平衡二叉树,就是当我们插入或删除元素之后,二叉树的高度会自动调整到最小,这样我们就可以在对数时间内查找二叉树内的元素. 2.定义 TreeSet<Elemtype> s ...
CLion在项目里编译不同文件
1. 在完整的项目下找到CMakeList.txt(项目配置文件) 2. Build 和 Run的目标在add_executable参数中 3. 将其修改为如下格式:add_executable(pr ...
Codeforces_841
A.统计每个字母数量,比较是否超过k. #include<bits/stdc++.h> using namespace std; ] = {}; string s; int main() ...
python练习——第3题
原GitHub地址:https://github.com/Yixiaohan/show-me-the-code 题目:将 0001 题生成的 200 个激活码(或者优惠券)保存到 Redis 非关系型 ...
Linux 系统监控工具 atop
系统监控是运维工作中重要的一环,本文以 atop 工具为例来介绍系统的重要监控项. atop可以使用yum或apt包管理器进行安装.atop man page 中详细说明了 atop 中各监控项含义及 ...
java jni 调用c语言函数
今日在hibernate源代码中遇到了native关键词,甚是陌生,就查了点资料,对native是什么东西有了那么一点了解,并做一小记. native关键字说明其修饰的方法是一个原生态方法,方法对应的 ...
centos7 上为php-fpm安装gd扩展库
转自:https://blog.csdn.net/liyyzz33/article/details/89166110 首先查看自己当前php的版本 php -v PHP 5.6.40 查看yum中是否 ...

sass实现头条新闻列表页面

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

随机推荐

热门专题