CSS

很早以前的，還沒有DW的時候，我們就會搞灰階串連了。 無標題文檔 [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

區塊層級元素div盡量少用，其實和table一樣，嵌套越少越好，它也是會影響速度的！ ol 有序列表。 …… …… …… 表現為： 1…… 2…… 3…… ul 無序列表，表現為li前面是大圓點而不是123 …… …… 多人容易忽略 dl dt dd的用法 dl 內容塊 dt 內容塊的標題 dd 內容 以這麼寫： 標題 內容1 內容2 

[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

很多朋友現在還在用Dreamweaver（下稱DW），不可否認這是個非常優秀的軟體，他基本上實現了所見即所得 (WYSIWYG)。當然也正是因為這樣讓很多網頁製作人員對於(x)HTML標籤變得一無所知。然而要學習WEB標準就必需要與標籤打交道，你必需要瞭解他們的特點。就算你不打算自己打代碼，繼續使用DW來完成自己的工作也必需要知道DW生存的代碼的作用。如果你希望減少冗餘代碼，提升網頁的品質，那麼你就更需要認知(x)HTML標籤。

通過PS截屏得到的結論當設定td{height:22px;} 時， 頁面顯示: ie是22px， ff是21px; 實踐證明ie總會大2px，ff會少1px。當設定td{line-height:22px} 時，頁面顯示: ie是24px； ff也是24px； 比實際的都大了2px，但是保持一致了。大家也可以自己測一下。 戴爾 Vostro 1400 ￥5899 ↓1355

本翻譯並未得到作者或網站授權。一切權利都歸原作者及原網站所有。 如果你得到原作者或原發表網站的授權，可以自由使用本翻譯。 1.CSS字型屬性簡寫規則 一般用CSS設定字型屬性是這樣做的： font-weight:bold; font-style:italic; font-varient:small-caps; font-size:1em; line-height:1.5em; font-family:verdana,sans-serif; 但也可以把它們全部寫到一行上去： font: bold

使用 line-height 垂直置中 line-height:24px; 使用固定寬度的容器並且需要一行垂直置中時，使用 line-height 即可（高度與父層容器一致），更多的垂直置中總結可以看這裡。 清除容器浮動 #main { overflow:hidden; } 期前也提到過這樣的問題，更多資訊可以看這裡。 不讓連結折行 a { white-space:nowrap; } 上面的設定就能避免連結折行，不過個人建議長連結會有相應的這行（有關換行方面的討論，參看圓心的記錄）。 始終讓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "../../../www.w3.org/TR/xhtml1/DTD/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN"> <head>

理論基礎是必要的，實踐是提升和理解理論的方法，兩者同樣重要，任何設計和開發人員離開這兩者的平衡，不論偏向哪一方，都會範或左或右的錯誤。不過我所講的這個方法在實際應用中到底有什麼用呢。顯然，它不能夠給我們創造出圓角矩形，也不能夠給我們創造出分列布局，更加不可能給我們一個固定在文檔頭部的導覽列。這個演算法的實踐應用在於： 良好的CSS編程規範 。這是一個宏觀的實踐，與我剛才提到的微觀實踐同樣重要，但卻更加難以掌握。

本文主要來講述一下 iframe 的用法與注意事項: 好多同志對 iframe 是如何控制的,並不是十分瞭解,基本上還處於一個模糊的認識狀態. 注意兩個事項,ifr 是一個以存在的 iframe 的 ID 和 NAME 值:  document.getElementById(“ifr”);  window.frames[“ifr”]; 要想使用iframe內的函數,變數就必須通過第二種方法.因為它取的是一個完整的DOM模型(不知道這樣說對不對)

內容再豐富的網站，如果慢到無法訪問也是毫無意義的； SEO做的再好的網站，如果搜尋蜘蛛抓不到也是白搭(頁面效率和搜尋蜘蛛之間的關係，需要進一步的確認，此為和上篇保持統一)； UE設計的再人性化的網站，如果使用者連看都看不到也是空談。所以網頁的效率絕對是最值得關注的方面。雖然我們在

ContentTypes : "ez","application/andrew-inset" ContentTypes : "hqx","application/mac-binhex40" ContentTypes : "cpt","application/mac-compactpro" ContentTypes : "doc","application/msword" ContentTypes : "bin","application/octet-stream" ContentTypes :

更加壞的事情是，即使你僅僅針對IE設計，不考慮其它瀏覽器，由於IE模型絕對可以說是一隻讓人難以捉摸其脾氣的怪物，所以你單純為IE設計也會遇到眾多難題，發現很多的效果總是繞來繞去都難以實現。我們都知道，XHTML+CSS的目標就是實現內容與表現分離，理論上對於任何特定一份內容，我們都可以通過CSS實現任何我們想要的表現形式，或者細緻地說是布局形式。雖然現實與這個目標有一定差距，但是CSS已經能夠滿足大多數常見的布局需求，這有CSS Zen

先說下這套架構的優點：1.可以方便的把繁重的CSS編寫工作分配出去，而不會相互造成影響。2.結構清晰，利於維護和修改。3.每一張網頁都僅載入自己需要的CSS。總結下來就是：提高開發效率，提高維護效率，提高網頁載入效率。下面我解釋一下上面這張CSS結構圖：圖中間的5個黑色的圖示表示網頁，其中上面單獨的一張是主版頁面，下面四張是子頁。使用VS的人都知道主版頁面的作用，相當於asp中的include，把共通的部分作成母片，單獨的部分作成子頁，提高開發效率。圖上方綠色框內的是全域CSS部分，它們存放在s

解決方案在一個導航系統中顯示子功能表最好的辦法是在一個列表中建立子列表。這樣標記的兩級導覽列很容易被理解 – 哪怕瀏覽器不支援CSS。為了產生多級導覽列，我們建立一個嵌套的列表，為這些新的清單項目樣式化顏色、邊界和連結屬性："http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Lists as navigationcontent="text/html; charset=utf-8" />RecipesStartersMain

第一個是從360而來的效果:普通的a標記的分頁，相容性好。綠色樣式示範代碼:共1678條評論12345...168下一頁>> [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]第二種：深藍色效果，當然顏色大家可以自行修改。效果:示範代碼:css 分頁樣式2 首頁 上頁 1 2 3 4 5 下頁 尾頁 第3頁 共8頁 [Ctrl+A 全選

網頁布局+純CSS縱向下拉式功能表 IE6/IE7相容 網頁布局+純CSS縱向下拉式功能表 logo banner mail 第一分類 XHTML

在前面我們已經講過了strong與em的區別。除了strong與em之外還有一些相似的標籤比如q、cite、blockquote。這三個都屬於引用一類，但是這裡還是有一些區別的，首先來一一解釋。 ，q的作用是引用非塊元素，也就是引用不能形成段落的內容，可能是某人說的一句話，也可能是一句文檔摘錄等，特點很明顯這裡是“一句”。並且q本身並不會產生段落。q本身並沒有什麼樣式，一般瀏覽器也不會給他設定一個預設樣式使起突出。但是我們可以通過CSS去使之與一般內容區分開。在q標籤中還有一個屬性是非常重要的，

可以通過不同規則來定義不同內容塊裡的連結樣式。類似這樣：#nav a:link或者 #main a:link或者#footer a:link。也可以定義不同內容塊中相同元素的樣式不一樣。例如，通過#main p和#sider p分別定義#main p和#sider p的樣式。從結構上講，你的頁面是由圖片、連結、列表、段落等組成的，這些元素本身並不會對顯示在什麼網路 裝置中（PDA還是手機或者網路電視）有影響，它們可以被定義為任何的表現外觀。

CSS List Grid View Layout CSS List Grid Layout Compatible and tested with IE6, IE7, Safari 2, Safari 3, Firefox 2, Opera 9.21 List Grid View sodales porta libero.n sodales porterat.