現(xiàn)在css3 都出來(lái)的，但是其實(shí)我由于一些原因，有些css2中都能支持的樣式，我都沒(méi)有使用過(guò)。我感覺(jué)我真的有必要靜下心來(lái)，去看看那些東西，看看哪些以前都被忽視掉的。 今天我主要來(lái)講三個(gè)對(duì)于我們編程經(jīng)常用到的，具體如下。

一、 有序列表序號(hào)

a、應(yīng)用場(chǎng)景

有一個(gè)列表，需要有序號(hào)展示，方便用戶知道當(dāng)前列表記錄數(shù)，用戶可以任意刪除其中一條記錄，刪除后，序號(hào)重新整理。

b、思考

我以前的不知道有樣式的通常做法是，列表信息在展示時(shí)通過(guò)索引+1，變成當(dāng)前記錄的序號(hào)，這個(gè)方法很簡(jiǎn)單。但是在記錄任意刪除時(shí)就麻煩了，明明可以把自己通過(guò)jquery當(dāng)前記錄remove掉就了，序號(hào)要重新整理就是一見(jiàn)頭痛的事。其實(shí)習(xí)慣了也不頭痛，我會(huì)使用$.each()，使用其中的索引，也能達(dá)到效果。但是我們程序員，就是要用最簡(jiǎn)單的方式，實(shí)現(xiàn)最強(qiáng)大的功能。這樣我們才有更多的時(shí)間去關(guān)注系統(tǒng)業(yè)務(wù)邏輯。

c、 學(xué)習(xí)

http://www.w3school.com.cn/cssref/pr_list-style-type.asp

d、 注意

畢竟css是外國(guó)人的弄出來(lái)的，中文的一、二、三這種序號(hào)無(wú)法通過(guò)這種方式實(shí)現(xiàn)

e、 圖例

二、 顯示省略符號(hào)來(lái)代表被修剪的文本

a、應(yīng)用場(chǎng)景

這個(gè)場(chǎng)景，我想我不用描述大家都知道，要顯示的內(nèi)容較多時(shí)，如果不進(jìn)行修剪，頁(yè)面有可能會(huì)撐變形。

b、思考

其實(shí)我們以前總是喜歡通過(guò)程序，截?cái)嘧址?#xff0c;然后拼接省略號(hào)來(lái)展示。通常情況下，這個(gè)方式基本達(dá)到我們想要的結(jié)果。但是我們想有沒(méi)有想過(guò)，假設(shè)我們?cè)趯挾葹?00px的div里，字符串只能展示10個(gè)漢字，那我們實(shí)現(xiàn)程序的時(shí)候，通過(guò)截取9個(gè)漢字+“…”來(lái)展示，當(dāng)我們實(shí)際展示的字符串沒(méi)有超過(guò)10個(gè)漢字，我們還不能拼接“…”。前面這個(gè)通過(guò)程序來(lái)邏輯來(lái)處理，是不是感覺(jué)很麻煩？更麻煩的情況是，把div的寬度調(diào)整到200px，那頭疼的問(wèn)題來(lái)了，修改程序的截取19個(gè)漢字。瞬間是不有點(diǎn)煩躁了？最麻煩的情況，現(xiàn)在來(lái)了，英文字母，“I”與“M”，他們10個(gè)“I”和10個(gè)“M”各自所占的寬度，相差甚遠(yuǎn)。我不再描述，我相信我講這個(gè)英文字母的用意。

c、 學(xué)習(xí)

http://www.w3school.com.cn/cssref/pr_text-overflow.asp

d、 注意

要想達(dá)到截取的效果，當(dāng)前標(biāo)簽的寬度必須是固定的。否則可能達(dá)不到修剪的效果。

e、 圖例

三、 后臺(tái)

a、應(yīng)用場(chǎng)景

這里我就用一幅圖展示，就不過(guò)多的描述了。

b、思考

這個(gè)場(chǎng)景我們遇到的比較少，通常漢字根本出現(xiàn)這種情況，但是英語(yǔ)就會(huì)出現(xiàn)了，像上面的第二行，系統(tǒng)把它識(shí)別成一個(gè)單詞，所以不給予強(qiáng)制換行。但是這個(gè)就跟我們想要的美觀樣式，就差的很遠(yuǎn)了。

c、 學(xué)習(xí)

http://www.w3school.com.cn/cssref/pr_word-break.asp

d、 注意

在中文范圍內(nèi)基本不用考慮這個(gè)問(wèn)題，英文單個(gè)單詞超長(zhǎng)，才會(huì)出現(xiàn)這樣的問(wèn)題。這個(gè)問(wèn)題是我們測(cè)試部倒騰出來(lái)的，是希望大家能注意到有這么回事。

e、 圖例

總結(jié)：這個(gè)話題，主要是出于兩個(gè)目的，一是，希望大家能回頭看看已經(jīng)學(xué)過(guò)的知識(shí)，我是不是有些遺漏了，或者當(dāng)時(shí)認(rèn)識(shí)還不夠深刻；二是，希望大家往前看看，有沒(méi)有更好的辦法代替原來(lái)笨拙的實(shí)現(xiàn)方式。上面寫(xiě)的內(nèi)容，其實(shí)算是舊東西，但是很多攻城獅還是采取老的方式實(shí)現(xiàn)。所以這里只是起一個(gè)拋磚引玉的作用，希望大家能掌握新的知識(shí)把原來(lái)老舊的知識(shí)給替換掉，同時(shí)也要能夠?qū)^(guò)往進(jìn)行回眸。

總結(jié)

以上是生活随笔為你收集整理的html没有css还有用吗,如果css足够强大了，你还会用编程的方式实现去实现css已有的功能吗？_html/css_WEB-ITnose...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。