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: 0;
- padding: 0;
- border: 0;
- }
- 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: 2;
- }
- @mixin clearfix {
- &:after {
- visibility: hidden;
- display: block;
- content: " ";
- clear: both;
- height: 0;
- }
- }
- @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+'/[email protected]_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);
- }
- }
- }
来源: http://www.bubuko.com/infodetail-3399206.html