資訊專欄INFORMATION COLUMN
摘要：背景由于今天第一次寫文章發(fā)布在網(wǎng)上就轉(zhuǎn)發(fā)給了朋友然后朋友給我解釋了下和的作用說到了清除浮動這一塊于是乎就開始了教我浮動相關(guān)的知識目的做出的效果第一次嘗試要求做出的樣子代碼如下效果如下第二次嘗試要求給每個增加背景顏色代碼如下效
背景:由于今天第一次寫文章發(fā)布在網(wǎng)上,就轉(zhuǎn)發(fā)給了朋友.然后朋友給我解釋了下overflowY和overflowX的作用.說到了清除浮動這一塊~
于是乎就開始了教我浮動相關(guān)的知識~
第一次嘗試:
要求:做出1234?????5的樣子
代碼如下:
效果如下:
第二次嘗試:
要求:給每個li增加背景顏色
代碼如下:
效果圖:
第三次嘗試 :
要求:簡化代碼,去掉那個手寫的4和5中間的空格,并給ul增加背景色,間距,圓角
效果圖:
嗯,勉強達到了某個人想要的效果~~~
后面他說還有很多種實現(xiàn)方式的~
比如:
1:一個是 li 設(shè)置 display: inline-block；然后結(jié)合 text-align 實現(xiàn)
2:還有一種是彈性布局，外面套個div，設(shè)置 display:flex; justify-content: space-between; 然后把 5 多帶帶拿出來
3:或者簡單些的，ul 設(shè)置 display:flex；然后 1~4 設(shè)置寬度，5 設(shè)置 flex: 1； text-align: right;
我就不一 一實現(xiàn)了~有興趣的小伙伴自行實現(xiàn)把~
加更~~~~!!
第四次嘗試:
要求:再次簡化代碼,去掉1前面的空格
1前面有空格的原因:
打開F12開發(fā)者工具,查看空格的地方,發(fā)現(xiàn)了ul的padding默認(rèn)左右有個40px,如圖:
更新后代碼如下:
最終效果圖:
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/116329.html
摘要：雖然大家都用過這個時間選擇控件，但是卻很少有人去研究其中原理。最近這邊本人利用閑暇時間自己寫了一個時間選擇控件，借這個時間選擇控件向各位同學(xué)們闡述這個時間選擇控件的原理。 前言 ??說到這個時間選擇控件，網(wǎng)上有很多各式各樣的，相信很多同學(xué)們也都有用過，所以大家對這個也不陌生。雖然大家都用過這個時間選擇控件，但是卻很少有人去研究其中原理。最近這邊本人利用閑暇時間自己寫了一個時間選擇控件，...
摘要：標(biāo)簽不區(qū)分大小寫，但推薦小寫。標(biāo)簽可以嵌套，但不能交叉嵌套。標(biāo)簽也稱為元素。比如行內(nèi)標(biāo)簽亦可成行內(nèi)元素。 ??HTML必備知識詳解?? 第一部分：HTML框架簡介...
摘要：設(shè)計的種模式本文翻譯自。剩下的肯定都是模式。真實的事實的特異性是網(wǎng)絡(luò)開發(fā)人員死亡的第一原因。這種設(shè)計僅僅適用于登陸操作就在主頁面內(nèi)執(zhí)行，而不是單獨彈出一個模態(tài)窗口。這可以正常的工作，但確不是最好的方式。 設(shè)計React的10種模式 本文翻譯自10 React mini-patterns。這篇文章由mrcode翻譯， 如果哪里翻譯的不恰當(dāng)或有錯誤的地方，歡迎指出。 同時也希望大家關(guān)注我的...
閱讀 3529·2023-04-26 01:40
閱讀 3233·2021-11-24 09:39
閱讀 1528·2021-10-27 14:19
閱讀 2768·2021-10-12 10:11
閱讀 1435·2021-09-26 09:47
閱讀 1975·2021-09-22 15:21
閱讀 3094·2021-09-06 15:00
閱讀 1034·2021-08-10 09:44
