CSS

如果我我們設定LI為position:relative;設定span為position:absolute;那麼我們會發現無論SPAN的z-index值設定得再高都將永遠在後面父級的下面。前段時間記得好像是誰在群裡提出了一個實在是讓大家都覺得很不理解的一個問題： <ul> <li>第一塊</li> <li><span>第二塊</span></li> <li>第三塊</li>

Selector:first-letter {font-size:2.5em; font-family:"楷體_GB2312"; font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00;} 如果你覺得還不是很清楚，那麼這裡就細細講述一下：

我們可以通過一段代碼來分析一下其中的微妙差別: 在IE瀏覽器裡，我們可以通過多少方法來索引到這個文字框對象？(為區別起見，我們把NAME和ID設成了不同的值) 1. oDemo 2. demoform.oDemo 3. document.all.oDemo 4. document.all.demoform.oDemo 5. document.forms[0].oDemo 6. document.forms['demoform'].oDemo 7.

一、In-line 行內 　　行內樣式是在html標籤裡直接使用style屬性 text 　　設定段落文字紅色。 　　但要記住，最後的HTML應該是獨立出來，使用表現文檔，所以行內樣式應該在任何地方避免。 二、Internal 內部 　　使用於整個頁面的植入內部樣式在head標籤裡面，style標籤包圍樣式。 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> CSS Example ...

例如寬度為210px的ul裡 分別有4個li 這個4個li的寬度根據它們的自身內容長度為80px、120px、140px、80px。 我需要的效果是4個li向左自動排文。當第三個li和前兩個li的長度之和大於ul的寬度時候 第三個li則會下移一行。在第二行顯示。而不是把ul撐寬，或者是把自己撐高（內容換行，高度增加） 分別定義了ul的寬度210px和li的寬度自動，發現結果是：

在下不才，歸納幾點html編碼要素，望能指點各位：1.文字本身的大小不相容。同樣是font-size:14px的宋體文字，在不同瀏覽器下占的空間是不一樣的，ie下實際占高16px，下留白3px，ff下實際占高17px，上留白1px，下留白3px，opera下就更不一樣了。解決方案：給文字設定 line-height 。確保所有文字都有預設的 line-height 值。這點很重要，在高度上我們不能容忍1px 的差異。 2.ff下容器高度限定，即容器定義了height之後，容器邊框的外形就確定了，

今天看了振之關於有序列表的一篇文章，覺得挺不錯的。寫個例子：類型值 產生樣式 序列舉例 A 大寫字母 A、B、C、D、E a 小寫字母 a、b、c、c、e I 大寫羅馬數字 I、II、III、IV、V i 小寫羅馬數字 i、ii、iii、iv、v 1 阿拉伯數字 1、2、3、4、5 有序列表_www.jb51.net 第一名 第二名 第三名 第四名 第五名 第六名 第七名 第八名 第九名 第十名

今天我們簡單的介紹一下head地區主要放置了內容。這裡就不強調css和javascript了，這兩者是大家所熟知的。 head區一般必須加入的標識有： 公司著作權注釋 網頁顯示字元集 簡體中文： 繁體中文： 英 語： 或者： 原始製作者資訊 網站簡介 搜尋索引鍵 網頁的css規範 網頁標題 這裡是你的網頁標題 head區可選加入的標識有： 設定網頁的到期時間。一旦網頁到期，必須到伺服器上重新調閱。 禁止瀏覽器從本地機的緩衝中調閱頁面內容。

IE直接用:word-break:break-all; /*允許詞內換行*/ word-wrap:break-word; /*內容將在邊界內換行*/ /*需要注意的預設是：*/ word-wrap:normal /*允許內容頂開指定的視窗邊界*/ 而firefox卻沒有很好的實現辦法 ，一個折中方案就是使用捲軸，但網上也提出了一種用js來判斷換行的辦法，這裡摘錄下(轉自網路，特此說明)。 JavaScript複製代碼 註：以上指令碼放在前面.

serif 的意思是，在字的筆畫開始及結束的地方有額外的裝飾，而且筆畫的粗細會因直橫的不同而有不同。相反的，sans serif 就沒有這些額外裝飾，而且筆畫粗細大致上是差不多。 像 Times、Times New Roman 等都是屬於 serif 的字體，而 Arial、helvetica 則是屬於 sans serif 的字體。serif 和 sans serif 的一般比較serif 的字體較易辨識，也因此易讀性較高。反之 sans serif 則較醒目，但在走文閱讀的情況下，sans

其實建議用css控制超出隱藏顯示也就是標題因為設計的寬度問題所以沒有顯示全，看樣子是使用程式來截字的。我想很多網站都遇到這樣的情況。為了視覺效果不得不進行截字顯示以滿足網站的整體視覺效果。通常我們採用截字的方法是兩種，一種是通過後台輸出時來事先設定一定的字元數量。另一種是通過CSS或是JS來對已經輸出的完整的內容進行視覺剪截。

font的縮寫，如果省略family， 如這樣子： font:700 14px/22px; 則在Firefox下是不生效的 完整的寫法是：font:700 14px/22px arial; 我垂直不置中 我垂直置中 [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

這是一個很簡單的應用，不過在設計中，這樣做可以減輕伺服器的壓力，是請求次數減少，是一個不錯的方法。 特別要說明的是，在這種小圖片上即使是兩張圖片其實就回應時間來說也慢不了多少，不過有一個問題，就是兩張圖片交替時容易出現背景圖片從新載入而導致很段時間不顯示的效果。（時間長短視伺服器的響應速度和圖片大小而變化） 下面是css的部分： body { font-family: "Lucida Sans", "Lucida Sans Unicode"; font-size: 14px;

下面用一些比較常用的屬性來做樣本。 margin 　　margin-top:1px; 　　margin-right:1px; 　　margin-bottom:1px; 　　margin-left:1px; 　　代碼簡化為：margin:1px 　　margin-top:1px; 　　margin-right:2px; 　　margin-bottom:1px; 　　margin-left:2px; 　　代碼簡化為：margin:1px 2px

target="_blank"是否的存在是否有必要我想目前還有很多正處在一種盲區。我查閱了相關的文獻，發現其實情況並非是我們所想的那樣，事實上target="_blank"並非是不符合標準的，而用rel與JS的解決方案也是沒有必要的，因為這是個誤區，只要我們瞭解了rel與target的真正含義我們就清楚了其實這裡本不應存在爭議。下面我將我通過查閱文獻所得到的知識與大家分享，我們先來瞭解一下target與rel的含義： target

題目的痛點在於兩點： 垂直置中； 圖片是個置換元素，有些特殊的特性。 至於如何解決，下面是一個權衡的相對結構乾淨，CSS簡單的解決方案： .box { /*非IE的主流瀏覽器識別的垂直置中的方法*/ display: table-cell; vertical-align:middle; /*設定水平置中*/ text-align:center; /* 針對IE的Hack */ *display: block; *font-size:

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.

今天有個學生問我：頁面中使用GIF格式，失真太大，怎麼辦呢？這個問題比較簡單啊，只要用JPG就可以了。我們常用的頁面的圖片格式有三種，GIF、JPG、PNG。那麼這三種格式我們怎麼選擇使用呢？下面就我的一些經驗來談談我對於這三個格式的使用上的一些看法。下面我們先瞭解一下幾種格式的比較正式的解釋(註：以下內容來源自百度知道)： GIF 意為Graphics Interchange

指令碼之家DIV+CSS實現的滑動門菜單特效 指令碼之家 [2007-05-16] 指令碼之家jb51.net,網頁設計,網站製作建設,css學習,網頁標準化 網路編程 [2007-05-16] 指令碼之家jb51

最後感謝raozou分享效果代碼! [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]說明:這段代碼沒有文件類型和命名空間的申明,我已試過,如果加上,藍色方快兒將位於頂部且一部分被瀏覽器隱藏,大家可以試試!此外,FF不支援expression. DIV垂直置中 頁面水平垂直置中 [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行] DIV垂直置中 頁面水平垂直置中 [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]&#