效果图
index.html
<!DOCTYPE html> <html lang="en"head> meta charset="UTF-8"title>仿今日头条</="utf-8"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"bodydiv class="header"> ="header_logo"></div="top_bar"="top_menu_list"> a href="#" class="btn cur">推荐a="btn">视频>热点>社会>娱乐>军事>科技>汽车>体育>财经>国际>时尚="content_list"section ="content_item"h3 ="title">一图读懂|政治局会议释放哪些重大信号?h3="info"> span ="label">置顶span="src">新华社="comment">评论 2473="time">2分钟前section>一图读懂|政治局会议释放哪些重大信号?政治局会议释放哪些重大信号?政治局会议释放哪些重大信号?ul ="image_list"li ="image_item"> img src="./assets/1540880316067f69d843289.png"="image"li="./assets/1540880316090fcf65c4ee6.png"="./assets/2a50a746-a303-47ac-8d30-11cba7c27b30.png"ul>热="one_image"="./assets/201811015d0d07373ab3842644fd8a12_640x0.png"="label2">广告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: border: 0; } body { position: relative; width: 100%; overflow-x: hidden; } ul,li { list-style-type: none; } a { text-decoration: @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,.6); } @mixin labelColor($color){ font-size:14px; color:$color; border:1px solid $color; } @mixin line2{ overflow:hidden; text-overflow:ellipsis; display: -webkit-box; 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; margin:0 auto; background:{ position:center; size:contain; image:url(assets+"/wap_logo@3x_581de69e.png"); repeat:no-repeat; }; } } .top_bar{#f4f5f6;34px; overflow-x: auto; overflow-y:hidden;y方向不滚动 .top_menu_list{ white-space: nowrap; overflow: display: inline-block;100%; } .btn{ padding:8px; font-size: $fontSize; color:$fontColor; 父元素选择器 &.cur{ color:$red; } } } .content_list{ .content_item{ @include sectionStyle; } .title{20px; @include line2; } .info_base{#999;14px; } .info{ margin-top:11px; @extend .info_base; } .label{ @extend .info_base; @include labelColor($red); } .src{ @extend .info_base; } .comment{ .time{ .image_list{ margin-top:10px; @include clearfix; } .image_item{ float:left; width:33.33%;100%; } .image{ border:none; block; } .one_image{10px; } .label2{ @extend .info_base; @include labelColor($blue); } } # sourceMappingURL=index.css.map */