flexible box佈局微部落格戶端發現頁面練習
摘要：
大致效果圖如下，原視訊練習在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！