CSS

原文：http://www.ndesign-studio.com/blog/mac/css-dock-menu來自：http://www.diglog.com/story_technology_design_18907/If you are a big Mac fan, you will love this CSS dock menu that I designed. It is using Jquery Javascript library and Fisheye component

 序號中文說明標記文法1邊界留白{margin:margin-top margin-right margin-bottom margin-left}2補　　白{padding:padding-top padding-right padding-bottom padding-left}3邊框寬度{border-width:border-top-width border-right-width border-bottom-width border-left-width}　　寬度值：

 CSS運用的二十四則技巧在CSS網頁布局開發中，會有很多小技巧，新手朋友往往對此很不熟悉。在某一兩個小問題上，或許糾纏很長時間才能搞明白，雖然在的文檔中，多次提及過這方面的內容，但依然有很多朋友在這些問題上犯錯。我們今天看看這些CSS技巧，認真讀一讀，或許您並不能完全理解，您可以在進行搜尋，擴充您所想要得到的知識，相信您會有很多收穫！一、ul標籤在Mozilla中預設是有padding值的，而在IE中只有margin有值。二、同一個的class選擇符可以在一個文檔中重複出現，而id選擇符卻只能

小知識：什麼是CSS hack？由於不同的瀏覽器，比如IE6、IE7、IE8、Firefox等，對CSS的解析認識不一樣，因此會導致產生的頁面效果不一樣，得不到我們所需要的頁面效果。這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時相容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。這個針對不同的瀏覽器寫不同的CSS code的過程，就叫CSS hack，也叫寫CSS hack。 各瀏覽器CSS

文章目錄 原理應用之圓角產生其他小問題 之前在懶懶分會上分享的一點關於border畫小圖的內容, 完整的ppt在這裡.原理css盒模型一個盒子包括: margin+border+padding+content – 上下左右邊框交界處出呈現平滑的斜線. 利用這個特點, 通過設定不同的上下左右邊框寬度或者顏色可以得到小三角, 小梯形等. – 調整寬度大小可以調節三角形形狀. 樣本1一般情況下, 我們設定盒子的寬高度, 及上下左右邊框,

網上有相關的文章，但是都沒有說思想。之前只是有這個認識，但是沒有親自寫過類似的東西，這回做了一個這樣類似的東西。發現一個道理就是：只看不做，終無成也。經過自己的嘗試，發現需要兩個前提：1、高度自適應的這個元素，假設為A，它必須要有一個或多個它的兄弟元素（節點），假設為B；2、Height(B) > Height(A)。如果不符合上面的條件的話就沒必要做自適應了。需要做的有兩點：1、對A的父級元素（節點），假設為C，設定：overflow-y: hidden; //隱藏掉有可能超出的部分2、

CSS優先順序包含四個層級（文內選取器，ID選取器，Class選取器，元素選取器）以及各層級出現的次數。根據這四個層級出現的次數計算得到CSS的優先順序。 CSS優先順序的計算規則如下：* 頁面中直接設定style,加1,0,0,0* 每個ID選取器(如 #id),加0,1,0,0* 每個Class選取器(如 .class)、每個屬性選取器(如 [attribute=])、每個偽類(如 :hover)加0,0,1,0* 每個元素選取器（如p）或虛擬元素選取器(如 :firstchild)等，加0

body{ background-image:url(about:blank); background-attachment:fixed;}.myDiv{ position:fixed !important; position:absolute; top:expression(eval(document.documentElement.scrollTop));}body元素中background-image:url(about:blank);background-attachment:

 1、強制不換行，同時以省略符號結尾。<div style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" >你好朋友朋友朋友我為什麼不能看到效果啊</div>2、css自動換行div{ word-wrap: break-word; word-break: normal;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;

ASCII 藝術是一種使用電腦可列印字元（一般為ASCII碼中的96個可列印字元）表現圖形的一種技術，傳統的 ASCII 藝術基於 HTML 代碼，然而由於不同瀏覽器的差別，在一種瀏覽器下可以完美顯示的 ASCII 藝術，到了別的瀏覽器就面目全非，Web2.0 時代，應該多在 CSS 上做文章，因為目前主流瀏覽器對 CSS 的支援都強式一致性，使用 CSS 實現 ASCII 藝術可以更好地保持不同瀏覽器間的相容。下面這個圖很難想象是用 ASCII 藝術做出來的，當然為了簡便，我使用的是圖片，

這本書某些地方看起來並不是很嚴謹，有些小錯，新手入門不建議選，有了基礎再看不遲。從《CSS權威指南》的談原理，到《CSS那些事兒》的執行個體操作，從紙上談兵到沙場實戰，這是讓自己得到質的飛躍必經階段，閱讀本書，就是一次不錯的實踐。第1章講的跟《CSS權威指南》有些重複，選擇符、偽類、偽對象等；第2章介紹Editplus編輯器，重點說了EP的文法、自動完成、使用者組工具、模板、快速鍵、剪輯，如果打算用EP作為編輯器的話，可以看一看。第3章是關於盒模型的。文中提到兩點值得注意的：①IE怪異模式的盒模

float是什嗎？      float是CSS控制中的定位屬性。我們經常在傳統印刷產品中看到圖片被文本圍繞，這種方式一般被稱為“文本環繞”。在網頁設計中，應用了CSS的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的圖片一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對位置的頁面元素相比是一個明顯的不同。絕對位置的頁面元素被從網頁流裡面移除了，就像印刷布局裡面的文字框被設定為無視頁面環繞一樣。絕對位置的元素不會影響其它元素，其它元素也不會影響它，無論它是否和其它元素挨著。      舉

同一元素應用多個class的優先順序的測試使用多個class，以空格分開，如：<span class="a2 a1">效果： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />         X-UA-Compatible是針對ie8新加的一個設定，對於ie8以下的瀏覽器是不識別的，這個區別與 content="IE=7"在無論頁面是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer

 <div> <ul> <li>txt</li> <li>text</li> </ul</div>此代碼在ff 裡面顯示 ：ul 在div 的最左邊， 上邊補白相差10-20px（大致是這個距離） 在ie 裡顯示：ul在div 的最右上方。。 為答成一致：在ul 裡面可以加入以下：屬性： padding:0px; margin-left:0px; margin-top:0px;

1、顯示文章：空兩格 <p style="text-indent: 2em">愛施德發生髮送</p> 2、導航內容滾動公告：    <SCRIPT language=JavaScript>     var EventsDesc = new Array(); var EventsURL = new Array();    var sysnotice = '<s:property value="#request.sysNoticeList"/>';  

 HEAD地區代碼：<style><!--a.parentlink{ text-decoration: none; color: #333333; font-size: 12px }a.parentlink:hover,a.childlink:hover { color: #000000; }a.childlink,td.childlink{ text-decoration: none; color: #666666; font-size: 12px }.px7{

CSS代碼.test{    background:#000;    color:white;    width:200px;    position:absolute;    left:10px;    top:10px;       filter: Alpha(opacity=10);       -moz-opacity:.1;       opacity:0.1;    }   這裡關鍵的是CSS代碼filter: Alpha(opacity=10);      

    前幾天幫人改一個網站的介面，頁碼的部分要能自動適應內容的長度，還要置中。由於頁碼部分的<div>是嵌套在另一個<div>只內的，他們的前端能作出自動長度，但是只能靠左對齊，用的<divstyle="float: left;">，說是<div style="float: center;">無效，我試了一下，的確<div style="float: center;">沒有效果，網上找了一下發現很多說的方法也是float: left;