sass案例--实现高仿今日头条H5版新闻列表页
程序员文章站
2022-06-22 08:47:15
效果图 index.html 仿今日头条
效果图
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>仿今日头条</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
<div class="header_logo"></div>
</div>
<div class="top_bar">
<div class="top_menu_list">
<a href="#" class="btn cur">推荐</a>
<a href="#" class="btn">视频</a>
<a href="#" class="btn">热点</a>
<a href="#" class="btn">社会</a>
<a href="#" class="btn">娱乐</a>
<a href="#" class="btn">军事</a>
<a href="#" class="btn">科技</a>
<a href="#" class="btn">汽车</a>
<a href="#" class="btn">体育</a>
<a href="#" class="btn">财经</a>
<a href="#" class="btn">国际</a>
<a href="#" class="btn">时尚</a>
</div>
</div>
<div class="content_list">
<section class="content_item">
<h3 class="title">一图读懂|政治局会议释放哪些重大信号？</h3>
<div class="info">
<span class="label">置顶</span>
<span class="src">新华社</span>
<span class="comment">评论 2473</span>
<span class="time">2分钟前</span>
</div>
</section>
<section class="content_item">
<h3 class="title">一图读懂|政治局会议释放哪些重大信号？政治局会议释放哪些重大信号？政治局会议释放哪些重大信号？</h3>
<ul class="image_list">
<li class="image_item">
<img src="./assets/1540880316067f69d843289.png" class="image">
</li>
<li class="image_item">
<img src="./assets/1540880316090fcf65c4ee6.png" class="image">
</li>
<li class="image_item">
<img src="./assets/2a50a746-a303-47ac-8d30-11cba7c27b30.png" class="image">
</li>
</ul>
<div class="info">
<span class="label">热</span>
<span class="src">新华社</span>
<span class="comment">评论 2473</span>
<span class="time">2分钟前</span>
</div>
</section>
<section class="content_item">
<h3 class="title">一图读懂|政治局会议释放哪些重大信号？政治局会议释放哪些重大信号？政治局会议释放哪些重大信号？</h3>
<ul class="image_list">
<li class="image_item">
<img src="./assets/1540880316067f69d843289.png" class="image">
</li>
<li class="image_item">
<img src="./assets/1540880316090fcf65c4ee6.png" class="image">
</li>
<li class="image_item">
<img src="./assets/2a50a746-a303-47ac-8d30-11cba7c27b30.png" class="image">
</li>
</ul>
<div class="info">
<span class="label">热</span>
<span class="src">新华社</span>
<span class="comment">评论 2473</span>
<span class="time">2分钟前</span>
</div>
</section>
<section class="content_item">
<h3 class="title">一图读懂|政治局会议释放哪些重大信号？政治局会议释放哪些重大信号？政治局会议释放哪些重大信号？</h3>
<div class="one_image">
<img src="./assets/201811015d0d07373ab3842644fd8a12_640x0.png" class="image">
</ul>
<div class="info">
<span class="label2">广告</span>
<span class="src">新华社</span>
<span class="comment">评论 2473</span>
<span class="time">2分钟前</span>
</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";
$fontsize:17px;
$red:#d43d3d;
$assets:"./assets";
$fontcolor:#333;
$blue:#2a90d7;
@mixin sectionstyle{
margin:0 20px;
padding:10px 0;
border-bottom:1px solid rgba(211,211,211,.6);
}
@mixin labelcolor($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;/*限制2行*/
}
@mixin clearfix{
/* & 父元素选择器*/
&::after{
display:block;
content:"";
clear:both;
visibility: hidden;
height:0;
}
}
.header{
width:100%;
height:45px;
background-color:$red;
.header_logo{
width:100px;
height:100%;
margin:0 auto;
background:{
position:center;
size:contain;
image:url(assets+"/wap_logo@3x_581de69e.png");
repeat:no-repeat;
};
}
}
.top_bar{
background-color:#f4f5f6;
height:34px;
overflow-x: auto;
overflow-y:hidden;/*y方向不滚动*/
.top_menu_list{
white-space: nowrap;
overflow:hidden;
display: inline-block;
height:100%;
}
.btn{
padding:8px;
display: inline-block;
font-size: $fontsize;
color:$fontcolor;
/*父元素选择器*/
&.cur{
color:$red;
}
}
}
.content_list{
.content_item{
@include sectionstyle;
}
.title{
font-size:20px;
@include line2;
}
.info_base{
color:#999;
font-size:14px;
}
.info{
margin-top:11px;
@extend .info_base;
}
.label{
@extend .info_base;
@include labelcolor($red);
}
.src{
@extend .info_base;
}
.comment{
@extend .info_base;
}
.time{
@extend .info_base;
}
.image_list{
margin-top:10px;
@include clearfix;
}
.image_item{
float:left;
width:33.33%;
height:100%;
}
.image{
width:100%;
height:100%;
border:none;
display: block;
}
.one_image{
width:100%;
margin-top:10px;
}
.label2{
@extend .info_base;
@include labelcolor($blue);
}
}
/*# sourcemappingurl=index.css.map */
下一篇： Linux 简介与安装