積跬步,聚小流 幾種方法實現分割線

2021-06-27 14:14:48 字數 1173 閱讀 9671

其實這個問題想了實現了有一段時間了,只是單純自己想了個辦法簡單實現了效果,沒想出太多辦法來,最關鍵的是,我也不知道這原來是叫「分割線」,只知道是什麼樣,連搜都不著知道怎麼搜,趕巧今天碰到了,就學習了下,先來描繪下要實現的「分割線」效果。

對,就是這個效果,記住了,這叫「分割線」...

最開始反應過來的是層疊起來實現效果,也是之前一直在用的方法

今天又學習了另外幾個方法,小有收穫

然後進行樣式設定

.line_divide
這個看起來是不是很高大上啊,再來看個更簡潔的

———————————

————————————

一般來說,最先反應過來的是不是都是直接加「-」就好了呢,但是沒辦法「-」和「-」之間總有一些間隔,這就美中不足了,但是如果中間的間隔空隙沒有了呢,然後就學到了乙個新的樣式

.line_divide

.line_divide span

letter-spacing:字母間距,所有瀏覽器都支援,允許為負值,可以為預設值、設定固定值和父類繼承的值(不相容ie),w3cschool就是這麼寫的,好東西啊。

雖然說這幾個方法已經很好的達到了所想要的需求,但是同時看到了乙個麻煩點,但是也學到了不少東西的乙個方法:

再來看下它的樣式

.line_divide

.line_divide b

.line_divide span

這是看到的原**,裡面看到了兩個非常棒的樣式啊,vertical-align和display:inline-block,突然彷彿回到了剛開始學習的時候,都用過的啊,用在這裡,妙不可言啊

要睡了,這屋裡沒有暖氣真要人命啊,感覺手要凍了...

積跬步,聚小流 html知識大綱歸納總結

習慣於從熟悉的地方入手的我,每要開始整理學習新東西之前,喜歡把熟悉的相關知識再溫習一遍,既是總有所得的緣故,也是如此會將鬥志燃到最烈。我總感覺這是病,只是不願治.這次的前端整理,便直接從html入手開始 html作為前端最基礎的知識,所有前端工作者都會,但是有相當一部分人對它的重視遠遠不夠。萬里高樓...

不積跬步無以至千里,不積小流無以成江海

勸學篇 君子曰 學不可以已。青,取之於藍,而青於藍 冰,水為之,而寒於水。木直中繩,輮 煣 以為輪,其曲中規。雖有 又 槁暴 曝 不復挺者,輮 煣 使之然也。故木受繩則直,金就礪則利,君子博學而日參省乎己,則知明而行無過矣。故不登高山,不知天之高也 不臨深溪,不知地之厚也 不聞先王之遺言,不知學問之...

JS實現繼承的幾種方法

call方法的第乙個引數的值賦值給類 即方法 中出現的 this call方法的第二個引數開始依次賦值給類 即方法 所接受的引數 call 相同,第二個引數為陣列型別,這個陣列中的每個元素依次賦值給類 即方法 所接受的引數 this 的指向,我們就是利用它的這個特性來實現繼承的。補充知識點 func...