CSS高級應用：定義列表的特殊用法

2020-03-24 18:52:01

字體：大中小

來源：轉載

供稿：網友

由于本人才疏學淺，對DIV+CSS也沒有深入徹底研究透，只是憑自己的一點認識而寫，希望高手不要扔磚。廢話少說，直接進行正題。現在全國大大小小的網站都在搞一場技術“革命”，就是所謂“網站重構”說簡單點就是DIV+CSS進行網站制作。用DIV+CSS代替傳統的Table制作框架和美化頁面。在重構之前，肯定要了解為什么重構，為什么要用DIV+CSS技術?了解了這個問題，那么大家才有使用此技術重構網站的動力。各大CSS學習網站和教程無一例外都會列舉出以下使用DIV+CSS的好處： 1、內容和形式分離，網頁前臺只需要顯示內容就行，形式上的美工交給CSS來處理。生成的HTML文件代碼精簡，更小打開更快。 2、改版網站更簡單容易了，不用重新設計排版網頁，甚至于不用動原網站的任何HTML和程序頁面，只需要改動CSS文件就完成了所有改版。對于門戶網站來說改版就像換件衣服一樣簡單容易。 3、搜索引擎更友好，排名更容易靠前。以上三點是N多好處最吸引人，最突出的三點。我就這三點進行一一介紹：第一點、內容和形式分離，網頁前臺只需要顯示內容就行，形式上的美工交給CSS來處理。生成的HTML文件代碼精簡，更小打開更快。這個是DIV+CSS技術最現著的特點，也是CSS存在的根源。完全的顛覆現在傳統(table)網頁設計的技術。所有現在用table制作的內容，都可以用CSS來解決掉，而且解決的更完美，更強大。不需要大家再表格套表格，只需要用div套div就可以實現以往表格套表格所有的美工，這樣的結果就是使用div+CSS技術，讓生成的網頁文件大小更精簡，更小。table時代，一個頁面表格達到10個以上是非常普遍的事情，但是現在用DIV+CSS，一個table都可以不用，就完全達到之前的效果，這就直接導致網頁文件大小比使用table時減少50%-80%，更節約各位站長的硬盤空間，訪問者打開網頁時更快，而且用div+CSS時，不像以往使用table時，必須把全部table讀取完了才顯示頁面內容，現在是可以讀一個div就顯示一個效果，大家打開網頁不用等。好處真是明顯而強大
這個優點的確是顯著的，凡是使用傳統table建的網頁，內容多的話，有時候達到30K左右都有可能，文件打了打開時，肯定就有0.0幾秒的延遲。使用DIV+CSS,由于沒有表格使用，你前臺打開看到的全是直接內容，CSS文件都是導入鏈接的，是另一個文件，根本和HTML文件大小沒關系，這種生成的HTML文件，一個也就10K左右大小。文件數量少時看不出來，但是文件萬級以上時，還是會節約幾十M大小的。這些優點其實拿到現在來說，個人感覺用處不大，為什么呢? 因為table雖然生成的HTML文件要大一些，占空間多點，但是現在的html' target='_blank'>虛擬主機空間幾百塊錢就可以達到3G以上，一個中小型門戶或是網站，完全夠用，就算不夠用，你數據量達到十萬級別以上，生成的HTML文件也用不了2G，這個成本其實對于中小型網站長來說完全可以不計。再說使用table說的是打開速度慢。這個在現在的網絡環境下面來說，也可以忽略的，現在大家上網都是用的寬帶，至少也是512K以上，一個網頁30K，打開也就一秒不到的時候，使用DIV+CSS也就快那么0.0幾秒，這基本上是大家感覺不到的。而且既然都是生成HTML，那對服務器來說影響的效果是一樣的，只要你的虛擬主機網絡穩定，那么在table和div+css上就沒差別。但是使用table制作網頁框架和表格時，全是選擇化制作的，也就是說不用大家去寫代碼，很簡單輸入邊框和行數列數就可以達到制作出來的要求，但是使用div+CSS時，完全是靠手寫代碼，一個表格寫四行代碼的話，如果一個頁面涉及十多個div表格生成，手寫代碼將超過50行，而且如果你數學不好，或是邏輯思維能力不強的話，你手寫出來的表格將是亂78糟，出現表格重疊和位置完全不正確。因為用div+css寫表格時，表格間的邏輯排列關系完全是靠自己手寫代碼判斷，如果你沒有很強的手寫代碼能力和邏輯性，你所花費的時間，比你用table制作時間至少是4倍左右。基本上一個頁面定義的ID和class類，完整頁面是不會少于20個的，一個ID或class手寫5句，你制作一個HTML頁面將超過100句代碼，當然其中很多是可以存成一個CSS文件來重復調用的。也就是說相同的頁面內容的話，排版一樣的情況下，可以直接導入鏈接CSS來實現
這個就很像之前生成HTML時，制作一個網頁模板。但制作這個模板花的時間是用table制作時的幾倍。這里有些人要說，但是我改版的時候，就只需要再寫一個css就可以了，不用再生成HTML了。那么我要說，當你再寫一個CSS文件改版時，我可能都已經用table制作好一個頁面模板，而且還自動生成HTML全站的頁面了。這不是不可能的。如果作為站長的你，對于手寫代碼不是特別有信心，邏輯思維能力不是特別強，建議還是使用傳統的table制作網頁更熟練和快捷。第二點，改版網站更簡單容易了，不用重新設計排版網頁，甚至于不用動原網站的任何HTML和程序頁面，只需要改動CSS文件就完成了所有改版。 DIV+CSS對于門戶網站來說改版就像換件衣服一樣簡單容易，改版時，不用改動全站HTML頁面，只需要重新寫CSS，再用新CSS覆蓋以前的CSS就可以實現改版了。方便吧。方便是方便了，但是一個網站，我想問一下是不是一個月就要改次版?或是半年就要改一次?估計這么頻繁的網站少的很哦。現在很多知名網站，行業的，門戶的，包括個人網站，最多也是一年改一次版。一年改一次版，你一年才用一次重新寫CSS，而且你寫的CSS時間所用時間，比我用table制作時慢一二倍(技術熟練情況下)。那我何必還要用CSS啊?我用table一樣可以完成的效果，二分鐘就做好了表格，你用css寫要用十分鐘。全國中小型站長的網站數據量一般也就在十萬條數據之內，現在用自動批量生成HTML功能，生成完也用不了幾個小時時間吧。費這點神一年也就一次，沒什么大不了的。所以除非你網站一個月改一次版，那么你還是用最熟練和方便的方法來實現網頁設計為妙。當然如果你CSS已經學的如火純青了，而且是代碼狂人。你當我說的廢話。
第三點，搜索引擎更友好，排名更容易靠前。當我看到CSS優點有這個時，我冷笑了二聲。翻譯和編寫者真的是太不了解中國的網絡環境了，這條拿到國外來說，如常用google.com的環境下，完全可行。但是拿到中國以百度為壟斷的網絡環境下，完全可以忽略。搜索引擎主要的排名依據不管百度和google，都是title和權重為主。他們不可能拿到這二點不用，而是用你的content內容來為主抓數據吧。而且最重要的一點，中小型網站主80%左右的流量是百度來的，百度現在完全是人工在排序，你以為你用了div+CSS百度就先排你在前面啊??如果你這樣認為你就是太不配做中國站長了。退一萬不說，就算你DIV+CSS有這優點，能讓你頁面在百度搜索時排前幾位，你以為這個位置你能坐的長啊?不出一個月只要你這頁面給你帶去的流量達到一定數量，百度K你沒商量。(我是指K這個關鍵字) 綜上所述，個人感覺DIV+CSS不能太迷信它的很好很強大，它作為制作網頁，美化網頁的一個重要輔助是很強大方便的。可以彌補table制作框架和表格時的很多不足和美工上的缺點，但是完全只用它來做，太費時費力，對于全國中小型網站長來說，真的不太適合。我個人覺得用table+DIV+CSS是最好的組合，也是最省時省力的辦法。我的廢話太多，寫了一長竄，不足之處非常多，認識也不夠深入。大家不要介意哈。 PS：很多CSS資料宣傳的CSS生成網頁代碼少，指的是生成的HTML文件的代碼少，因為這種HTML文件根本沒有美化過的，美化過程語句全在CSS文件中，一個CSS文件代碼是奇多無比。一個HTML要配合一個CSS文件來用，不能單獨使用
有序無序單標簽很簡單，只要知道用法就行，但是關鍵點我認為不在于知道這個標簽長什么樣，重點是在于什么樣的數據適合使用什么樣的列表。什么樣的數據是有序的，什么樣的數據是無序的？閱讀完要思考，這樣才能學到東西，知識才能是自己的。定義列表其形式特別，用法也很特別，相比較無序列表來說用到定義列表的就少很多。也有很多朋友還沒有開始使用這個列表，那么下面就來分解一下這個列表的代碼： dl
dt /dt
dd /dd
/dl 看上面這段代碼我們發現這里并沒有出現 li 標簽，而是由DL、DT、DD三個標簽組成，根據外型以及之前的列表我們可以知道，DL是這個列表的一個容器，就像個箱子，不同的是這次箱子里不只有統一標準的單個小盒子了。而是出現兩個不同的內容我們怎么理解這個DT與DD呢？從語義上來講，DT是名稱，是標題，而DD是解釋，是內容。DT與DD都是盒子，DD只對應解釋他上面的一個DT，不能越級或是向下解釋。當DT不存在的時候那么DD也就沒有存在的意義，而DT是否一定需要DD跟隨其后，這點上我還沒有找到確切的文獻可以說明這一點，但是以我對于定義列表的理解，我認為如果數據中只有DT沒有DD那么這就一不能成為定義列表，直接用UL無序列表就可以了。但是當數據中只有某一個或是少數幾個沒有DD，而大部分都有DD，那么我認為這種形式是可以存在的。 dl
dt 有序列表 /dt
dt 有序列表 /dt
dt 有序列表 /dt
dt 有序列表 /dt
/dl 以上這種很明顯就不合適了，這樣的形式就是無序列表，何必要用定義列表呢，從語意上也說不通。 dl
dt 有序列表 /dt
dd 有序列表就是有序列的數據以列表形成組織而成的數據形式 /dd
dt 有序列表 /dt
dd 有序列表就是有序列的數據以列表形成組織而成的數據形式 /dd
dt 這一句沒有解釋 /dt
dt 有序列表 /dt
dd 有序列表就是有序列的數據以列表形成組織而成的數據形式 /dd
/dl 上面這種形式則我個人認為是可行的。那么一個DT是否可以帶多個DD呢？這點上我同樣沒有找到文獻說明不可以，并且在一些知名的網站中這種一個DT帶多個DD的依然很多。我對此的看法是，物殊情況下一個DT帶多個DD是可以的，但是一般情況上我認為這種做法還是有所欠缺。從釋上來看，多個DD是否表明著多個解釋？或是解釋內容要分段也不需要讓DD來當這只抓耗子的狗。一個DD中完全可以內嵌很多個段落標簽。再則從樣式應用上來講，多個DD整體松散，其設計的擴展性不足。比如，當我們要做一個點擊DT隱藏對應的DD的效果時，這種多DD的做法就不那么好實現了。所以在不是特殊用途情況下盡可能不要使用一個DT帶多個DD的做法，還是把內容放在DD里，分段的就讓段落標簽去做，分列表的就讓有序或是無序列表去表現。還是開始講的，標簽本身沒什么，重點要思考如何應用
本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS各種常用效果總結

下一篇：css教程：關于CSS不透明的詳細介紹