CSS

firefox7.0開始相容text-overflow:ellipsis;這樣的話，以後的省略符號就可以做到瀏覽器安全色了，程式碼片段為：  代碼如下複製代碼 width:200px;/*設定寬度*/white-space:nowrap;/*設定不折行*/text-overflow:ellipsis;/*這就是省略符號嘍*/-o-text-overflow:ellipsis;/*相容opera*/overflow: hidden;/*設定超過的隱藏*/ 例1.  

有時候，我們會用圖片代替文字，最常用的就是用在input按鈕上。以前，我都會用text-indent:-9999px將文字移到頁面外面，但這個方法在IE6下有個“bug”，不屬於塊元素的應用此css屬性後，此塊的內容也會消失，這時候需要將這塊內容設定為塊元素（display:block;）.最近，我習慣給一些固定長寬的元素使用line-height:999em進行移除文字，但這時候需要給此元素添加一個overflow:hidden進行截斷,否則此塊就會被line-heig

第一點，和我的相符，但我把它改成了position:absolute，問題依然存在。第二點、第三點和我的情況不符。接著就是一層一層地追，發現把這個層（A）比較高一級的父層（B）加上”position:relative;z-index:100;”就好了，原來是B層比與相鄰的層（C）低了，導致B層裡的任何一層無論怎麼設z-index，也高不過與B層相鄰的那個C層。第二次是任何瀏覽器都不起作用，還是一層一層的追，發現這一層的一個父層裡有”overflow:hidde

透明往往能產生不錯的網頁視覺效果，先奉上相容主流瀏覽器的CSS透明代碼:  代碼如下複製代碼 .transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;} 上面的幾個屬性分別是:opacity: 0.5; 這是最重要的，因為它是CSS標準.該屬性支援Firefox, Safari和 Opera.filter:alpha(opacity=50);

在CSS中有這樣的一個指令：（position）在DW中文版中翻譯為“定位”，常用的屬性有relative（相對）與 absolute（絕對）。有很多朋友對這條指令的用法還是不清楚，這裡做一定細緻的講解：position:relative;

 css中，display:none; 的作用是讓html元素隱藏，反之讓其顯示，通常使用 display:block;。但 display:block; 的另一個作用是，讓當前html元素變成塊元素。 像 <select>/<input>/<span> 等元素都屬於佔位元素，也就是說，這幾個元素寫在一起，但只佔一行。而 <div>/<h1>/<h2>/

類別選取器 在 CSS 中，類別選取器以一個點號顯示：  代碼如下複製代碼     .center {text-align: center} 在上面的例子中，所有擁有 center 類的 HTML 元素均為置中。在下面的 HTML 程式碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選取器中的規則。  代碼如下複製代碼    

淘寶網頁中使用的是import,而很多網站都是使用link，當然還有一些頁面比較簡單，流量很大的網站，是直接將CSS寫在html代碼中的？他們有什麼區別？css用import還是link好?從經典論壇和另外一個網站大概瞭解了一下：1、淘寶網頁中大部分是這樣寫的：2、而很多網站使用的都是link：3、而像google 百度

一、條件注釋簡介1.IE中的條件注釋（Conditional comments）對IE的版本和IE非IE有優秀的區分能力，是WEB設計中常用的hack方法。2.條件注釋只能用於IE5以上。3.如果你安裝了多個IE，條件注釋將會以最高版本的IE為標準。4.條件注釋的基本結構和HTML的注釋(<!–

例  代碼如下複製代碼     <!doctype html>    <html lang="zh-CN">    <head>            <meta

一般的 position:fixed; 實現方法以我的部落格為例，在右下角 <div id="top">...</div> 這個 HTML 元素使用的 CSS 代碼如下：  代碼如下複製代碼 #top{position:fixed;bottom:0;right:20px;} 實現讓 <div id="top">...</div> 元素固定在瀏覽器的底部和距離右邊的20個像素。在 IE6

z-index規範參考　　•在 W3C CSS2.1 規範中，每個元素都具有三維的空間位置，除我們所熟悉的水平和垂直位置外，元素還可在 "Z軸" 方向上層層相疊、依次向前排開； •元素在 "Z 軸" 方向上的呈現順序，由層疊上下文和層疊層級決定。在文檔中，每個元素僅屬於一個層疊上下文。在給定的層疊上下文中，每個元素都有一個整型的層疊層級，它描述了在相同層疊上下文中元素在 "Z軸"

1 網頁中引用外部CSS的兩種方式網頁中引用外部CSS檔案有兩種方式：link和@import，兩者引用的方式在頁面上的展現效果是一樣的。link引用方式如下：<link href="styles.css" type="text/css" />@import引用方式如下：<style type="text/css">@import

div置中的完美解決方案！ （水平垂直置中）1,關於置中使用css為：  代碼如下複製代碼 position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2; 對於ie6,只能把position:改成absolute; 圖片在div中置中利用圖片的margin屬性將圖片水平置中，利用div的padding屬性將圖片垂直置中。方法一：css代碼如下：  代碼如下複製代碼 div

解析CSS列表樣式屬性list-style平時製作頁面中可對屬性list-style在list-item對象中常用，但用的都不深。一般都設為none重設整個頁面就差不多OK，可能很多人包括本人對屬性list-style-type更細節方面的屬性並不是很瞭解，更有可能對屬性list-style和屬性list-style-type概念會比較模糊，現有必要把它提出來重新學習一下，故整理如下。義和用法list-style

我們知道如果輸入的是英文字母，那麼，無論你div設定寬度為多少，英文字母都是不換行直接在同一行輸出，導致div的寬度遠遠超出設定的大小。在div的style中設定word-break:break-all;即可實現自動換行。在IE瀏覽器中我們可以直接換行自動換行  代碼如下複製代碼 div{ word-wrap: break-word; word-break: normal; } 強制英文單詞斷行  代碼如下複製代碼 div{word-break:break-

原理很簡單：將left和top設定為50%來定位div到瀏覽器中央，再將margin-left和margin-top值設定為寬和高的一半，使div置中顯示。加上這個東西：  代碼如下複製代碼 1 text-align:center; 2 margin-left:auto;  3 margin-right:auto;或：1 text-align:center; 2 margin:0 auto; 這兩個在Chrome、FireFox、IE7

解決辦法第三種方法設定父元素的字型為“0”，然後在“inline-block”元素上重設字型需要的大小。  代碼如下複製代碼 ul {   list-style: none outside none;   padding: 10px;   background: green;   text-align: center;   font-size: 0px;   &

在FF , OPERA , SAFARI , IE7 , IE8 方法如下：  代碼如下複製代碼  img{max-width:100px;max-height:100px;}img{min-width:100px;min-height:100px;} IE6及其以下版本的瀏覽器，利用其支援的expression屬性:   代碼如下複製代碼 * html img { /* for IE6 */width: expression(this.

先把自己的一些瞭解分享給大家。1.原點位置，即外層塊元素的左上方2.background-position 位置設定是指圖片與座標原點的位移量3.原點是不會動的，移動的是圖片 X座標為正則圖片左上方向右平移，為負則圖片左上方向左平移4.Y座標為正則圖片左上方向下平移，為負則左上方向上平移5.百分比的計算是有公式的：X軸( container寬度 – 圖片寬度 )*含符號百分比6.Y軸( container高度 – 圖片高度)*含符號百分比再看CSS background-