4.16。サイドバーのタイトルや広告のレイアウトが完了しました
テンプレート/ニュース/ index.htmlを
< divのクラス= "サイドバーのラッパー" > < divのクラス= "タイトルグループ" > < スパンクラス= "タイトル" >在线课堂</ スパン> < クラス= "以上" のhref = "＃" >更多< / > </ divの> < divのクラス= "宣伝グループ" > < IMG SRC = "https://static-image.xfz.cn/1554346383_8.png" ALT =」" > </ DIV > </ DIV >
SRC / CSS / index.scss
.main { .wrapper { .sidebarラッパー{ フロート：右。 幅：356px ; 高さ：500pxなど。 背景：#FFF ; .TITLE基{ パディング：20ピクセル。 オーバーフロー：隠されました ; .TITLE { フロート：左 ; フォントサイズ：18px ; 色：＃212121 ; } .more { フロート：右。 フォントサイズ：14px ; 色：＃5c87d9。 } } .advertise基 { IMG { 幅：100％ 。 } } } } }
効果
サイドバー4.17 - サードパーティ製のプラットフォームボックスのレイアウトやスタイルに焦点を当て
テンプレート/ニュース/ index.htmlを
< divのクラス= "プラットフォームグループ" > < divのクラス= "タイトルグループ" > < スパンクラス= "タイトル" >关注小饭桌</ スパン> </ divの> < divのクラス= "フォーカスグループを" > < ulのクラス= "左グループ" > < 李クラス= "zhihu" > < HREF = "＃" ターゲット= "_ブランク" >小さなテーブルクラス開始</ A > </ 李> < 李クラス= "weibo" > < HREF = "＃" ターゲット= "_空白" >小饭桌创业课堂</ A > </ 李> < 李クラス= "toutiao" > < HREF = "＃" ターゲット= "_空白" >小饭桌</ A > </ 李> </ UL > < DIV クラス="右グループ」> < p個のクラス= "DESC" >小さなテーブルのスキャニングマイクロチャネルパブリック数に焦点を合わせます</ P- > </ DIV > </ DIV > </ DIV >
SRC / CSS / index.scss
.focus基 { パディング：0 20ピクセル。 オーバーフロー：隠されました ; .LEFT基{ 幅：180ピクセル。 フロート：左 ; 李{ 幅：100％ 。 高さ：は50px ; 行の高さ：は50px ; 背景：URL（ "https://www.xfz.cn/static/build/images/side-icon.png"）ノー・リピート ; 背景サイズ：26％ 。 マージン下：20ピクセル ; オーバーフロー：隠されました ; { フロート：左 ; margin-left：64px ; 色：＃878787 ; フォントサイズ：14px ; } } .zhihu { 背景位置：0。 } .weibo { 背景位置：0 -63px。 } .toutiao { 背景位置：0 -122px。 } } .RIGHT基 { フロート：右。 幅：100pxに。 背景：URL（ "https://www.xfz.cn/static/build/images/xfz-school-wechat-share.png"） ; 背景サイズ：100％ ; 背景リピート：なしリピート ; .desc { マージントップ：100ピクセル。 色：＃878787 ; フォントサイズ：12ピクセル ; } } }
効果
4.18サイドバー - 完全なホットオファー
テンプレート/ニュース/ index.htmlを
<div class="hot-news-group"> <div class="title-group"> <span class="title">热门推荐</span> </div> <ul class="hot-list-group"> <li> <div class="left-group"> <p class="title" ><a href="#">印度人摩托车上的帝国</a></p> <p class="more"> <span class="category">深度报道</span> <span class="pub-time">1小时前</span> </p> </div> <div class="right-group"> <a href="#"> <img src="https://static-image.xfz.cn/1561031505_57.jpg-website.news.list" alt=""> </a> </div> </li> <li> <div class="left-group"> <p class="title" ><a href="#">早报：爱奇艺会员规模破1亿</a></p> <p class="more"> <span class="category">爱奇艺</span> <span class="pub-time">2小时前</span> </p> </div> <div class="right-group"> <a href="#"> <img src="https://static-image.xfz.cn/1561246883_290.jpg-website.news.list" alt=""> </a> </div> </li> </ul> </div>
src/css/index.scss
.hot-news-group{ .hot-list-group{ li{ padding: 0 20px 20px; overflow: hidden; border-bottom: 1px solid #eee; .left-group{ float: left; width: 204px; height: 72px; position: relative; .title{ font-size: 16px; a{ color: #212121; &:hover{ color: #5c87d9; } } } .more{ position: absolute; left: 0; right: 0; bottom: 0; font-size: 12px; .category{ color: #5c87d9; float: left; } .pub-time{ float: right; color: #878787; } } } .right-group{ float: right; width: 102px; height: 72px; img{ width: 100%; height: 100%; } } } } }
效果
