效果圖 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿今日頭條</title> <meta charset="utf-8"> <meta name="viewport" conten ...
效果圖
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 */
