flexible box佈局微部落格戶端發現頁面練習

CSS · 發表 2018-11-25 18:27:00

摘要：大致效果圖如下，原視訊練習在https://www.bilibili.com/video/av17842686?，有附帶原始碼和相關圖片檔案~大家也可以拿來練練手這次寫的是移動端頁面，需要加上以下程式碼適配screen： <meta name="viewpor...

大致效果圖如下，原視訊練習在https://www.bilibili.com/video/av17842686?，有附帶原始碼和相關圖片檔案~大家也可以拿來練練手

這次寫的是移動端頁面，需要加上以下程式碼適配screen：

<meta name="viewport" content="device-width,initial-scale=1">

另外這次嘗試了基本上一次到位的命名方式，感覺也比一個個類疊加省事多了，在實際專案中，類名可能就會很長，這個就要綜合各方向考慮了

不得不說，有些地方用了flex佈局真的很省事，之前經常需要調整margin、padding，練習相對用的多是主軸或者交叉軸對齊的方式就不用調節了！以及

flex: 1;

可以將某元素設定為flex-grow：1；的縮寫，表示元素將佔據剩餘空間等等方法~我自己寫的詳細程式碼如下，做了一部分簡單的標註：

html部分：


1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4<meta charset="UTF-8">
5<!--移動端在頁面的適配-->
6<meta name="viewport" content="device-width,initial-scale=1">
7<title>微博發現</title>
8<link rel="stylesheet" href="css/reset.css">
9<link rel="stylesheet" href="css/style.css">
 10 </head>
 11 <body>
 12 <!--搜尋欄-->
 13 <div class="search-col">
 14<input class="search-col-input" type="text" title="seach">
 15<div class="search-col-frame">
 16<img class="search-col-img" src="image/search.png" alt="">
 17<p class="search-col-p">大家正在搜：帶娃去滑雪</p>
 18</div>
 19 </div>
 20 <!--輪播圖-->
 21 <div class="slider">
 22<img src="image/banner.png" alt="" class="slider-img">
 23 </div>
 24 <!--選單按鈕-->
 25 <div class="menubtn">
 26<div class="menubtn-item">
 27<img src="image/menu.png" alt="">
 28<p>遊戲</p>
 29</div>
 30<div class="menubtn-item">
 31<img src="image/menu.png" alt="">
 32<p>找人</p>
 33</div>
 34<div class="menubtn-item">
 35<img src="image/menu.png" alt="">
 36<p>遊戲</p>
 37</div>
 38<div class="menubtn-item">
 39<img src="image/menu.png" alt="">
 40<p>找人</p>
 41</div>
 42<div class="menubtn-item">
 43<img src="image/menu.png" alt="">
 44<p>遊戲</p>
 45</div>
 46<div class="menubtn-item">
 47<img src="image/menu.png" alt="">
 48<p>找人</p>
 49</div>
 50<div class="menubtn-item">
 51<img src="image/menu.png" alt="">
 52<p>遊戲</p>
 53</div>
 54<div class="menubtn-item">
 55<img src="image/menu.png" alt="">
 56<p>找人</p>
 57</div>
 58<div class="menubtn-item">
 59<img src="image/menu.png" alt="">
 60<p>遊戲</p>
 61</div>
 62<div class="menubtn-item">
 63<img src="image/menu.png" alt="">
 64<p>找人</p>
 65</div>
 66 </div>
 67 <!-- 熱門話題-->
 68 <div class="hot-topic">
 69<div class="hot-topic-item">
 70<img src="image/lm.png" alt="">
 71<p>#全球跨年#</p>
 72</div>
 73<div class="hot-topic-item">
 74<img src="image/lm.png" alt="">
 75<p>#全球跨年#</p>
 76</div>
 77<div class="hot-topic-item">
 78<img src="image/lm.png" alt="">
 79<p>#全球跨年#</p>
 80</div>
 81<div class="hot-topic-item">
 82<img src="image/lm.png" alt="">
 83<p>#全球跨年#</p>
 84</div>
 85 </div>
 86 <!--微博之夜-->
 87 <div class="weibo-night">
 88<div class="weibo-night-title">
 89<h3>微博之夜</h3>
 90<p>為愛打call<span>></span></p>
 91</div>
 92<div class="weibo-night-content">
 93<a href="#" class="weibo-night-item">
 94<img src="image/rmd.png" alt="">
 95<p>一鍵探密</p>
 96</a>
 97<a href="#" class="weibo-night-item">
 98<img src="image/rmd.png" alt="">
 99<p>去圍觀</p>
100</a>
101<a href="#" class="weibo-night-item">
102<img src="image/rmd.png" alt="">
103<p>一鍵探密</p>
104</a>
105</div>
106 </div>
107 <!--tab欄-->
108 <div class="tab-btn">
109<p><a href="#">視訊</a></p>
110<p class="tab-btn-active"><a href="#">頭條</a></p>
111<p><a href="#">榜單</a></p>
112<p><a href="#">南京</a></p>
113 </div>
114 <!--熱門微博-->
115 <div class="hot-weibo">
116<h3>熱門微博24小時排行榜</h3>
117<div class="hot-weibo-box">
118<div class="hot-weibo-info">
119<div class="hot-weibo-user">
120<img src="image/hp.png" alt="">
121<div class="hot-weibo-name">
122<p class="id">使用者名稱</p>
123<p>
124<small class="time">2小時前</small>
125<small class="phone">來自iPhone X</small>
126</p>
127</div>
128</div>
129<div class="hot-weibo-follow">
130<p>+關注</p>
131</div>
132</div>
133<div class="hot-weibo-content">
134<p>臺下，粉絲拍到張一山幫楊紫整理頭髮。</p>
135<p>村上春樹說 如果我愛你 而你也正巧愛我.</p>
136<p>你頭髮亂了的時候 我會笑一笑地替你撥一撥 然後 手還在你發上多待幾秒.</p>
137<p>但是 如果我愛你 而你不巧地不愛我.你頭髮亂了 我只會輕輕地告訴你 你頭髮亂了喔 </p>
138</div>
139<div class="hot-weibo-footer">
140<div class="hot-weibo-zpz">
141<img src="image/zhuanfa.png" alt="">
142<p>4萬</p>
143</div>
144<div class="hot-weibo-zpz">
145<img src="image/pl.png" alt="">
146<p>6萬</p>
147</div>
148<div class="hot-weibo-zpz">
149<img src="image/zan.png" alt="">
150<p>10萬</p>
151</div>
152</div>
153</div>
154<div class="hot-weibo-box">
155<div class="hot-weibo-info">
156<div class="hot-weibo-user">
157<img src="image/hp.png" alt="">
158<div class="hot-weibo-name">
159<p class="id">使用者名稱</p>
160<p>
161<small class="time">2小時前</small>
162<small class="phone">來自iPhone X</small>
163</p>
164</div>
165</div>
166<div class="hot-weibo-follow">
167<p>+關注</p>
168</div>
169</div>
170<div class="hot-weibo-content">
171<p>臺下，粉絲拍到張一山幫楊紫整理頭髮。</p>
172<p>村上春樹說 如果我愛你 而你也正巧愛我.</p>
173<p>你頭髮亂了的時候 我會笑一笑地替你撥一撥 然後 手還在你發上多待幾秒.</p>
174<p>但是 如果我愛你 而你不巧地不愛我.你頭髮亂了 我只會輕輕地告訴你 你頭髮亂了喔 </p>
175</div>
176<div class="hot-weibo-footer">
177<div class="hot-weibo-zpz">
178<img src="image/zhuanfa.png" alt="">
179<p>4萬</p>
180</div>
181<div class="hot-weibo-zpz">
182<img src="image/pl.png" alt="">
183<p>6萬</p>
184</div>
185<div class="hot-weibo-zpz">
186<img src="image/zan.png" alt="">
187<p>10萬</p>
188</div>
189</div>
190</div>
191<div class="hot-weibo-box">
192<div class="hot-weibo-info">
193<div class="hot-weibo-user">
194<img src="image/hp.png" alt="">
195<div class="hot-weibo-name">
196<p class="id">使用者名稱</p>
197<p>
198<small class="time">2小時前</small>
199<small class="phone">來自iPhone X</small>
200</p>
201</div>
202</div>
203<div class="hot-weibo-follow">
204<p>+關注</p>
205</div>
206</div>
207<div class="hot-weibo-content">
208<p>臺下，粉絲拍到張一山幫楊紫整理頭髮。</p>
209<p>村上春樹說 如果我愛你 而你也正巧愛我.</p>
210<p>你頭髮亂了的時候 我會笑一笑地替你撥一撥 然後 手還在你發上多待幾秒.</p>
211<p>但是 如果我愛你 而你不巧地不愛我.你頭髮亂了 我只會輕輕地告訴你 你頭髮亂了喔 </p>
212</div>
213<div class="hot-weibo-footer">
214<div class="hot-weibo-zpz">
215<img src="image/zhuanfa.png" alt="">
216<p>4萬</p>
217</div>
218<div class="hot-weibo-zpz">
219<img src="image/pl.png" alt="">
220<p>6萬</p>
221</div>
222<div class="hot-weibo-zpz">
223<img src="image/zan.png" alt="">
224<p>10萬</p>
225</div>
226</div>
227</div>
228 </div>
229 </body>
230 </html>

View Code

css部分：


1 @charset "UTF-8";
2 /*圖片寬高自適應*/
3 img {
4display: block;
5width: 100%;
6height: auto;
7 }
8 
9 /**{*/
 10 /*box-sizing: border-box;*/
 11 /*}*/
 12 /*region 搜尋欄*/
 13 .search-col {
 14position: relative;
 15height: 30px;
 16padding: 10px;
 17overflow: hidden;
 18 }
 19 
 20 .search-col-input {
 21position: absolute;
 22left: 10px;
 23top: 10px;
 24height: 30px;
 25width: 95%;
 26margin-right: 10px;
 27flex-grow: 2;
 28border: none;
 29border-radius: 5px;
 30background: #E3E4E6;
 31 }
 32 
 33 .search-col-img {
 34width: 16px;
 35height: 18px;
 36margin-right: 5px;
 37z-index: 2;
 38 }
 39 
 40 .search-col-frame {
 41height: 100%;
 42display: flex;
 43flex-flow: row;
 44justify-content: center;
 45align-items: center;
 46 }
 47 
 48 .search-col-p {
 49color: #6f6f6f;
 50font-size: 14px;
 51z-index: 2;
 52 }
 53 
 54 /*endregion*/
 55 
 56 /*region 選單按鈕*/
 57 .menubtn {
 58display: flex;
 59flex-flow: row wrap;
 60padding: 10px;
 61border-bottom: 1px solid #ddd;
 62 
 63 }
 64 
 65 .menubtn-item {
 66width: 20%;
 67display: flex;
 68flex-flow: column wrap;
 69align-items: center;
 70 }
 71 
 72 .menubtn-item img {
 73width: 41px;
 74margin-bottom: 5px;
 75 }
 76 
 77 .menubtn-item p {
 78font-size: 14px;
 79margin-bottom: 8px;
 80 }
 81 
 82 /*endregion*/
 83 /*region 熱門話題*/
 84 .hot-topic {
 85padding:0 10px;
 86display: flex;
 87flex-flow: row wrap;
 88border-bottom: 10pxsolid #F2F2F2;
 89 }
 90 
 91 .hot-topic-item {
 92display: flex;
 93flex-flow: row;
 94align-items: center;
 95border-bottom: 1px solid #ddd;
 96width: 50%;
 97padding: 10px;
 98box-sizing: border-box;
 99 }
100 .hot-topic-item:nth-child(3),
101 .hot-topic-item:nth-child(4){
102border-bottom: none;
103 }
104 .hot-topic-item img {
105width: 30px;
106height: 30px;
107 }
108 .hot-topic-item p{
109padding: 5px;
110border-right: 1pxsolid #ddd;
111flex: 1;
112 }
113 .hot-topic-item:nth-child(even) p{
114border-right: none;
115 }
116 /*endregion*/
117 
118 /*region 微博之夜*/
119 .weibo-night{
120width: 100%;
121padding: 5px 0 10px;
122border-bottom: 10px solid #F2F2F2;
123 }
124 .weibo-night-title{
125display: flex;
126flex-flow: row wrap;
127justify-content: space-between;
128align-items: baseline;/*文字基線對齊*/
129padding: 5px;
130border-left: 4px solid #fe6a00;
131 
132 }
133 .weibo-night-title h3{
134color: #636363;
135font-weight: 400;
136font-size: 16px;
137 }
138 
139 .weibo-night-title p{
140color: #939393;
141font-size: 14px;
142 }
143 .weibo-night-title p span{
144color:#fe6a00;
145font-size: 16px;
146 }
147 .weibo-night-content{
148margin-top: 5px;
149overflow-x: hidden;
150 }
151 .weibo-night-content{
152display: flex;
153flex-flow: row nowrap;
154overflow-x: auto;
155 }
156 .weibo-night-item{
157flex-shrink: 0;
158width: 40%;
159margin-left: 10px;
160 }
161 .weibo-night-item p{
162border: 1pxsolid #ddd;
163color: #333;
164font-size: 14px;
165padding: 10px;
166border-top: none;
167 }
168 /*endregion*/
169 /*region tab欄*/
170 .tab-btn{
171 display: flex;
172flex-flow: row;
173justify-content: center;
174 }
175 .tab-btn a{
176display:inline-block;
177color: #939393;
178margin: 10px 20px;
179 }
180 .tab-btn a:hover,
181 .tab-btn-active a{
182border-bottom: 2pxsolid #fe6a00;
183padding-bottom: 10px;
184color: #000;
185font-weight: 600;
186 }
187 /*endregion*/
188 .hot-weibo-box{
189padding: 10px 10px 0;
190border-bottom: 10px solid #f2f2f2;
191 }
192 .hot-weibo h3{
193background-color: #f2f2f2;
194font-size: 12px;
195padding: 10px;
196color: #636363;
197font-weight: 400;
198 }
199 .hot-weibo-user img{
200border-radius: 50%;
201width: 50px;
202height: 50px;
203 }
204 .hot-weibo-name{
205display: flex;
206flex-direction: column;
207margin-left: 10px;
208 }
209 .hot-weibo-name .id{
210color: #fe6a00;
211 }
212 .hot-weibo-user{
213display: flex;
214flex-direction: row;
215align-items: center;
216flex: 1;
217 }
218 .hot-weibo-name .time{
219color: #939393;
220margin-right: 5px;
221 }
222 .hot-weibo-name.phone{
223color: #557ca7;
224 }
225 
226 .hot-weibo-info{
227display: flex;
228flex-direction:row;
229align-items: center;
230 }
231 .hot-weibo-follow{
232font-size: 16px;
233padding: 5px 10px;
234color:#fe6a00;
235border: 1pxsolid#fe6a00;
236border-radius: 5px;
237 }
238 .hot-weibo-content{
239padding: 10px 0;
240font-size: 16px;
241color: #333333;
242line-height: 1.6;
243border-bottom: 1pxsolid #ddd;
244 }
245 .hot-weibo-footer{
246display: flex;
247flex-direction: row;
248justify-content: space-around;
249color: #939393;
250padding: 10px;
251 }
252 .hot-weibo-zpz{
253display: flex;
254flex-direction: row;
255align-items: center;
256 }
257 .hot-weibo-zpz img{
258width: 20px;
259height: 20px;
260margin-right: 5px;
261 
262 }

View Code

歡迎交流指正哦！歡迎前端學習者一起加入前端交流群~820111236！

flexible box佈局微部落格戶端發現頁面練習

您可能也會喜歡…