現在css3 都出來的,但是其實我由於一些原因,有些css2中都能支持的樣式,我都沒有使用過。我感覺我真的有必要靜下心來,去看看那些東西,看看哪些以前都被忽視掉的。 今天我主要來講三個對於我們編程經常用到的,具體如下。
一、 有序列表序號a、應用場景有一個列表,需要有序號展示,方便用戶知道當前列表記錄數,用戶可以任意刪除其中一條記錄,刪除后,序號重新整理。
b、思考我以前的不知道有樣式的通常做法是,列表信息在展示時通過索引+1,變成當前記錄的序號,這個方法很簡單。但是在記錄任意刪除時就麻煩了,明明可以把自己通過jquery當前記錄remove掉就了,序號要重新整理就是一見頭痛的事。其實習慣了也不頭痛,我會使用$.each(),使用其中的索引,也能達到效果。但是我們程序員,就是要用最簡單的方式,實現最強大的功能。這樣我們才有更多的時間去關注系統業務邏輯。
c、 學習http://www.w3school.com.cn/cssref/pr_list-style-type.asp
d、 注意畢竟css是外國人的弄出來的,中文的一、二、三這種序號無法通過這種方式實現
e、 圖例
二、 顯示省略符號來代表被修剪的文本a、應用場景這個場景,我想我不用描述大家都知道,要顯示的內容較多時,如果不進行修剪,頁面有可能會撐變形。
b、思考其實我們以前總是喜歡通過程序,截斷字符串,然后拼接省略號來展示。通常情況下,這個方式基本達到我們想要的結果。但是我們想有沒有想過,假設我們在寬度為100px的div里,字符串只能展示10個漢字,那我們實現程序的時候,通過截取9個漢字+“…”來展示,當我們實際展示的字符串沒有超過10個漢字,我們還不能拼接“…”。前面這個通過程序來邏輯來處理,是不是感覺很麻煩?更麻煩的情況是,把div的寬度調整到200px,那頭疼的問題來了,修改程序的截取19個漢字。瞬間是不有點煩躁了?最麻煩的情況,現在來了,英文字母,“I”與“M”,他們10個“I”和10個“M”各自所占的寬度,相差甚遠。我不再描述,我相信我講這個英文字母的用意。
c、 學習http://www.w3school.com.cn/cssref/pr_text-overflow.asp
d、 注意要想達到截取的效果,當前標簽的寬度必須是固定的。否則可能達不到修剪的效果。
e、 圖例![]()
三、 后台a、應用場景這里我就用一幅圖展示,就不過多的描述了。
b、思考這個場景我們遇到的比較少,通常漢字根本出現這種情況,但是英語就會出現了,像上面的第二行,系統把它識別成一個單詞,所以不給予強制換行。但是這個就跟我們想要的美觀樣式,就差的很遠了。
c、 學習http://www.w3school.com.cn/cssref/pr_word-break.asp
d、 注意在中文范圍內基本不用考慮這個問題,英文單個單詞超長,才會出現這樣的問題。這個問題是我們測試部倒騰出來的,是希望大家能注意到有這么回事。
e、 圖例
總結:這個話題,主要是出於兩個目的,一是,希望大家能回頭看看已經學過的知識,我是不是有些遺漏了,或者當時認識還不夠深刻;二是,希望大家往前看看,有沒有更好的辦法代替原來笨拙的實現方式。上面寫的內容,其實算是舊東西,但是很多攻城獅還是采取老的方式實現。所以這里只是起一個拋磚引玉的作用,希望大家能掌握新的知識把原來老舊的知識給替換掉,同時也要能夠對過往進行回眸。