Time of Update: 2017-01-13
css中能把cursor變成抓手樣的形狀,注意不是超連結的那種手,是抓手css:{cursor:url('絕對路徑的圖片(格式:cur,ico)'),-moz-zoom-out;}//FF下面css:{cursor:url('絕對路徑'),auto;}//IE,FF,chrome瀏覽器都可以例子 代碼如下複製代碼 .style1{ cursor: url('http://你地網站/手抓.jpg'); } 補充:問題一 瀏覽器不相容問題:
Time of Update: 2017-01-13
首先當然是一個任意的空標籤來當小三角,下邊的 CSS 丟進去即可: 代碼如下複製代碼
Time of Update: 2017-01-13
做開發幾年了,在前端開發中,竟然沒有留意position:fixed的用法。我們都知道CSS中定位屬性position的值,除了預設的值外,還有absolute,relative和fixed。我平時比較常用absolute和relative,而position:fixed卻沒多關注。或許是因為當初在CSS中文手冊中看到position:fixed旁邊有說明“IE5.5及NS6尚不支援此屬性”吧。昨天,在做一個項目時需要使一個層相對於瀏覽器邊框固定,那時用position:
Time of Update: 2017-01-13
定義連結樣式的四個偽類 1 :link 2 :visited 3 :hover 4
Time of Update: 2017-01-13
字型font:font-style | font-variant | font-weight | font-size | line-height | font-family ;Margin & Paddingmagin: magin-top | margin-right | margin-bottom | margin-left;P {magin:20px;}P {magin:20px 10px;}P {magin:20px 10px 100px;}
Time of Update: 2017-01-13
firefox7.0開始相容text-overflow:ellipsis;這樣的話,以後的省略符號就可以做到瀏覽器安全色了,程式碼片段為: 代碼如下複製代碼 width:200px;/*設定寬度*/white-space:nowrap;/*設定不折行*/text-overflow:ellipsis;/*這就是省略符號嘍*/-o-text-overflow:ellipsis;/*相容opera*/overflow: hidden;/*設定超過的隱藏*/ 例1.
Time of Update: 2017-01-13
有時候,我們會用圖片代替文字,最常用的就是用在input按鈕上。以前,我都會用text-indent:-9999px將文字移到頁面外面,但這個方法在IE6下有個“bug”,不屬於塊元素的應用此css屬性後,此塊的內容也會消失,這時候需要將這塊內容設定為塊元素(display:block;).最近,我習慣給一些固定長寬的元素使用line-height:999em進行移除文字,但這時候需要給此元素添加一個overflow:hidden進行截斷,否則此塊就會被line-heig
Time of Update: 2017-01-13
第一點,和我的相符,但我把它改成了position:absolute,問題依然存在。第二點、第三點和我的情況不符。接著就是一層一層地追,發現把這個層(A)比較高一級的父層(B)加上”position:relative;z-index:100;”就好了,原來是B層比與相鄰的層(C)低了,導致B層裡的任何一層無論怎麼設z-index,也高不過與B層相鄰的那個C層。第二次是任何瀏覽器都不起作用,還是一層一層的追,發現這一層的一個父層裡有”overflow:hidde
Time of Update: 2017-01-13
透明往往能產生不錯的網頁視覺效果,先奉上相容主流瀏覽器的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);
Time of Update: 2017-01-13
在CSS中有這樣的一個指令:(position)在DW中文版中翻譯為“定位”,常用的屬性有relative(相對)與 absolute(絕對)。有很多朋友對這條指令的用法還是不清楚,這裡做一定細緻的講解:position:relative;
Time of Update: 2017-01-13
css中,display:none; 的作用是讓html元素隱藏,反之讓其顯示,通常使用 display:block;。但 display:block; 的另一個作用是,讓當前html元素變成塊元素。 像 <select>/<input>/<span> 等元素都屬於佔位元素,也就是說,這幾個元素寫在一起,但只佔一行。而 <div>/<h1>/<h2>/
Time of Update: 2017-01-13
類別選取器 在 CSS 中,類別選取器以一個點號顯示: 代碼如下複製代碼 .center {text-align: center} 在上面的例子中,所有擁有 center 類的 HTML 元素均為置中。在下面的 HTML 程式碼中,h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選取器中的規則。 代碼如下複製代碼
Time of Update: 2017-01-13
通過依據元素在其位置的上下文關係來定義樣式,你可以使標記更加簡潔。在 CSS1 中,通過這種方式來應用規則的選取器被稱為上下文選取器 (contextual selectors),這是由於它們依賴於上下文關係來應用或者避免某項規則。在 CSS2 中,它們稱為派生選取器,但是無論你如何稱呼它們,它們的作用都是相同的。派生選取器允許你根據文檔的上下文關係來確定某個標籤的樣式。通過合理地使用派生選取器,我們可以使 HTML 程式碼變得更加整潔。比方說,你希望列表中的 strong
Time of Update: 2017-01-13
淘寶網頁中使用的是import,而很多網站都是使用link,當然還有一些頁面比較簡單,流量很大的網站,是直接將CSS寫在html代碼中的?他們有什麼區別?css用import還是link好?從經典論壇和另外一個網站大概瞭解了一下:1、淘寶網頁中大部分是這樣寫的:2、而很多網站使用的都是link:3、而像google 百度
Time of Update: 2017-01-13
一、條件注釋簡介1.IE中的條件注釋(Conditional comments)對IE的版本和IE非IE有優秀的區分能力,是WEB設計中常用的hack方法。2.條件注釋只能用於IE5以上。3.如果你安裝了多個IE,條件注釋將會以最高版本的IE為標準。4.條件注釋的基本結構和HTML的注釋(<!–
Time of Update: 2017-01-13
例 代碼如下複製代碼 <!doctype html> <html lang="zh-CN"> <head> <meta
Time of Update: 2017-01-13
當一個定義了寬度的塊狀元素中填充的全部為純英文或者純數位時候,在IE和FF中都會撐大容器,不會自動換行並且當數字或者英文中帶有漢字時,會從漢字處換行,而純漢字卻可以自動換行。這個問題如何解決?先來認識一下兩位主角word-wrap和word-breakword-break用來控制斷詞三種取值:(1)normal(2)break-all(是斷開單詞。在單詞到邊界時,下個字母自動到下一行。主要解決了長串英文的問題。)(3)keep-allword-wrap用來控制換行兩種取值:(1)normal (
Time of Update: 2017-01-13
一般的 position:fixed; 實現方法以我的部落格為例,在右下角 <div id="top">...</div> 這個 HTML 元素使用的 CSS 代碼如下: 代碼如下複製代碼 #top{position:fixed;bottom:0;right:20px;} 實現讓 <div id="top">...</div> 元素固定在瀏覽器的底部和距離右邊的20個像素。在 IE6
Time of Update: 2017-01-13
固定漂浮這種效果拖動時難免會產生抖動自己對CSS還是蠻有好感的,找來找去找到了天涯,仔細一看是純CSS的,沒有使用JS效果我覺得它比之前看到的要精簡些不用嵌套多餘的DIV 簡單的看一下CSS樣式部分: 代碼如下複製代碼 body { background-image:url(text.txt); /* for IE6 */background-attachment:fixed; }#bottomNav { background-color:#096; z-index:999;
Time of Update: 2017-01-13
z-index規範參考 •在 W3C CSS2.1 規範中,每個元素都具有三維的空間位置,除我們所熟悉的水平和垂直位置外,元素還可在 "Z軸" 方向上層層相疊、依次向前排開; •元素在 "Z 軸" 方向上的呈現順序,由層疊上下文和層疊層級決定。在文檔中,每個元素僅屬於一個層疊上下文。在給定的層疊上下文中,每個元素都有一個整型的層疊層級,它描述了在相同層疊上下文中元素在 "Z軸"