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