關于學習css樣式,html寫法的第一天

WilsonLiu95 發布于2019-08-30 15:44 / 1758人閱讀

摘要：背景由于今天第一次寫文章發布在網上就轉發給了朋友然后朋友給我解釋了下和的作用說到了清除浮動這一塊于是乎就開始了教我浮動相關的知識目的做出的效果第一次嘗試要求做出的樣子代碼如下效果如下第二次嘗試要求給每個增加背景顏色代碼如下效

背景:由于今天第一次寫文章發布在網上,就轉發給了朋友.然后朋友給我解釋了下overflowY和overflowX的作用.說到了清除浮動這一塊~
于是乎就開始了教我浮動相關的知識~

目的:做出1234????????5 的效果

第一次嘗試:

要求:做出1234?????5的樣子

代碼如下:

效果如下:

第二次嘗試:

要求:給每個li增加背景顏色
代碼如下:

效果圖:

第三次嘗試 :

要求:簡化代碼,去掉那個手寫的4和5中間的空格,并給ul增加背景色,間距,圓角

效果圖:

嗯,勉強達到了某個人想要的效果~~~

后面他說還有很多種實現方式的~
比如:
1:一個是 li 設置 display: inline-block；然后結合 text-align 實現
2:還有一種是彈性布局，外面套個div，設置 display:flex; justify-content: space-between; 然后把 5 多帶帶拿出來
3:或者簡單些的，ul 設置 display:flex；然后 1~4 設置寬度，5 設置 flex: 1； text-align: right;

我就不一一實現了~有興趣的小伙伴自行實現把~

加更~~~~!!

第四次嘗試:

要求:再次簡化代碼,去掉1前面的空格

1前面有空格的原因:
打開F12開發者工具,查看空格的地方,發現了ul的padding默認左右有個40px,如圖:

更新后代碼如下:

最終效果圖:

GPU云服務器云服務器 php一周的第一天本月的第一天js html中css樣式 html的css樣式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116329.html

帶你輕松搞定時間選擇控件原理

摘要：雖然大家都用過這個時間選擇控件，但是卻很少有人去研究其中原理。最近這邊本人利用閑暇時間自己寫了一個時間選擇控件，借這個時間選擇控件向各位同學們闡述這個時間選擇控件的原理。前言 ??說到這個時間選擇控件，網上有很多各式各樣的，相信很多同學們也都有用過，所以大家對這個也不陌生。雖然大家都用過這個時間選擇控件，但是卻很少有人去研究其中原理。最近這邊本人利用閑暇時間自己寫了一個時間選擇控件，...

tigerZH 2019-08-21 11:52 評論0 收藏0
保姆級教程HTML兩萬字筆記大總結【建議收藏】（上篇）

摘要：標簽不區分大小寫，但推薦小寫。標簽可以嵌套，但不能交叉嵌套。標簽也稱為元素。比如行內標簽亦可成行內元素。 ??HTML必備知識詳解?? 第一部分：HTML框架簡介...

paulli3 2021-10-13 09:40 評論0 收藏0
React的10種有效的設計模式

摘要：設計的種模式本文翻譯自。剩下的肯定都是模式。真實的事實的特異性是網絡開發人員死亡的第一原因。這種設計僅僅適用于登陸操作就在主頁面內執行，而不是單獨彈出一個模態窗口。這可以正常的工作，但確不是最好的方式。設計React的10種模式本文翻譯自10 React mini-patterns。這篇文章由mrcode翻譯，如果哪里翻譯的不恰當或有錯誤的地方，歡迎指出。同時也希望大家關注我的...

yibinnn 2019-08-21 15:18 評論0 收藏0