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: 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'; $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: 2; } @mixin clearfix { &:after { visibility: hidden; display: block; content: " "; clear: both; height: 0; } } @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); } } }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/79747.html
標籤：Html/Css
上一篇：博客前端其他雜項
下一篇：css選擇器