效果图
index.html
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>仿今日头条</title> <meta chart="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,ur-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 h宋茜杨洋ref="#" 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"> <ction 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> </ction> <ction class="content_item"> <h3 class="title">一图读懂|政治局会议释放哪些重大信号？政治局会议释放哪些重大信号？政治局会议释放哪些重大信号？</h3> <ul class="image_list"> <li class="image_item"> <img src="./asts/1540880316067f69d843289.png" class="image"> </li> <li class="image_item"> <img src="./asts/1540880316090fcf65c4ee6.png" class="image"> </li> <li class="image_item"> <img src="./asts/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> </ction> <ction class="content_item"> <h3 class="title">一图读懂|政治局会议释放哪些重大信号？政治局会议释放哪些重大信号？政治局会议释放哪些重大信号？</h3> <ul class="image_list"> <li class="image_item"> <img src="./asts/1540880316067f69d843289.png" class="image"> </li> <li class="image_item"> <img src="./asts/1540880316090fcf65c4ee6.png" class="image"> </li> <li class="image_item"> <img src="./asts/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> </ction> <ction class="content_item"> <h3 class="title">一图读懂|政治局会议释放哪些重大信号？政治局会议释放哪些重大信号？政治局会议释放哪些重大信号？</h3> <div class="one_image"> <img src="./asts/201811015d0d07373ab3842644fd8a12_640x0.png" class="image"> </ul> <div class="info"> <span class="label2">广告</span> <span class="src">新华社<3 8节发朋友圈说说;/span> <span class="comment">评论 2473</span> <span class="time">2分钟前</span> </div> </ction> </div></body></html>
ret.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,fieldt,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;}@chart "utf-8";html { background: #fff; font-family: 'stheiti', 'microsoft yahei', 'helvetica', 'arial', sans-rif; -webkit-text-size-adjust: none; word-break: break-word;}index.scss
@import "./ret.scss";$孟子是什么家fontsize:17px;$red:#d43d3d;$asts:"./asts";$fontcolor:#333;$blue:#2a90d7;@mixin ctionstyle{ 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(asts+"/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 ctionstyle; } .title{ font-size:20px; @include line2; } .info_ba{ color:#999; font-size:14px; } .info{ margin-top:11px; @extend .info_ba; } .label{ @extend .info_ba; @include labelcolor($red); } .src{ @extend .info_ba; } .comment{ @extend .info_ba; } .time{ @extend .info_ba; } .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_ba; @include labelcolor($blue); }}/*# sourcemappingurl=index.css.map */
本文发布于:2023-04-07 09:40:34，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/c625028f74b017ed34c2141593cee77d.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：sass案例–实现高仿今日头条H5版新闻列表页.doc
本文 PDF 下载地址：sass案例–实现高仿今日头条H5版新闻列表页.pdf
| 留言与评论（共有 0 条评论） |
