本站资源全部免费,回复即可查看下载地址!
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
Index.html
[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] 纯文本查看 复制代码 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
[HTML] 纯文本查看 复制代码 @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+'/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);
}
}
}
| 
发表于 2020-3-29 14:30:01
