sass实现头条新闻列表页面
2024-09-06 18:35:56
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);
}
}
}
最新文章
- Acionbar logo
- How to do code coverage test for windows service
- 重读 code complete 说说代码质量
- linux下安装nginx后开机启动篇
- Linux中cp和scp命令的使用方法
- 写给IOS开发工程师的网页前端入门笔记
- return view详解
- linux入门学习1
- 【BZOJ】【1878】【SDOI2009】HH的项链
- python学习笔记5(元组)
- eclipse安装maven插件
- SQL Server 日期函数:某天是星期几?
- TCP/IP笔记 二.网络层(1)
- 【UOJ #280】【UTR #2】题目难度提升
- 简单的vuex 的使用
- [经验交流] 试用 grafana 报警功能
- Python运维开发基础02-语法基础【转】
- P3258 [JLOI2014]松鼠的新家 (简单的点差分)
- 使用requests模块post payload请求
- java String 内存模型