CSS

儘管在我的網站和文章裡都有提到CSS製作菜單的方法，但很多初學者還是不太清楚如何?，以及實現原理，我想專門寫一篇詳細教程會對大家比較有協助。我們先來看一個菜單的例子，最終效果是:首頁產品介紹服務介紹支援人員立刻購買聯絡我們 然後我們來詳細講解步驟第一步：建立一個無序列表我們先建立一個無序列表，來建立菜單的結構。代碼是：<ul><li><a href="1">首頁</a></li><li><a

前言　　如果你想嘗試一下不用表格來排版網頁，而是用CSS來排版你的網頁，也就是常聽的用DIV來編排你的網頁結構，又或者說你想學習網頁標準設計，再或者說你的上司要你改變傳統的表格排版方式，提高企業競爭力，那麼你一定要接觸到的一個知識點就是CSS的盒子模式，這就是DIV排版的核心所在，傳統的表格排版是通過大小不一的表格和表格嵌套來定位排版網頁內容，改用CSS排版後，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網頁。因為用這種方式排版的網頁代碼簡潔，更新方便，能相容更多的瀏覽器，比如PDA裝置

網頁採用了UTF-8編碼格式，這本來沒有問題，問題是外部CSS檔案預設是 ANSI編碼，並沒有儲存為UTF-8格式。可能你會發現在一般情況下這樣也是沒有問題的，然而當CSS檔案中包含有中文注釋時就可能不盡如人意了!估計是IE6版本以下的瀏覽器在解析這個CSS檔案時因為編碼問題而無法正確解析，所以才會發生CSS在IE6下不起作用的情況。看來微軟已注意到這個問題，在IE7中把它修複了。但是用IE6的人還是不少。因此這個問題需要解決：方法一：把 CSS、JS 和網頁檔案都統一儲存為 UTF-8 格式。

用css控制滑鼠樣式的文法如下:<span style="cursor:*">文本或其它頁面元素</span> 把 *

之前寫過關於清除浮動的一些方法介紹---（http://www.cnblogs.com/qiwenke/archive/2012/10/07/2714434.html），最近在學習的過程中又翻閱到了不少好的文章---（如http://www.iyunlu.com/view/css-xhtml/55.html）----因此重頭審視之前寫的文章的時候，發現漏洞百出。特此加上一篇簡單的補充作為自己的學習筆記：一、仍然以原來代碼為例（如下）：<div class="container">

第三天

html,body,h3 {}{ font-family:Verdana,Arial; font-size:12px;}div {}{ overflow:hidden;}#list {}{ width:198px;}.top {}{ background:url(skin/bg_01.gif) left top no-repeat;}.top h3 {}{ margin:0; height:30px; line-height:30px; text-indent:5px;}.mid {}{ bor

     清除浮動一個凡是做頁面的人都會遇到的一個東西，但是是否大家都能夠清楚的知道，全方位的瞭解呢？於是一閑下來了馬上寫了這樣的一篇文章，不能講面面俱到，然而基本能將我所知道的傾囊相授了。 我們粗略的一起來看看清除浮動的辦法一共有多少個。對應的DEMO1. 採用偽類:after進行後續空制的高度位零的偽類層清除優點結構語義化完全正確，不會產生其餘的怪異問題。缺點複用方式不當容易造成代碼量急劇增大。建議最外層輕浮動時使用，或清晰模組化複用方式的人使用。 2. 採用CSS

文章目錄  HTMLCSSjQuery 經常漂流在css-tricks看到這篇文章，就順便搬了過來，下面譯文都是用css-tricks口吻來描述的。       我的樂隊有幾個朋友剛剛經曆了一場小型的成員陣容的變化。他們需要更換其首頁上的照片。我想這可能是有趣的事情出現了少許的互動。    

註：【轉載請註明文章來源、保持原樣】出處：http://www.cnblogs.com/jyli/archive/2010/01/31/1660364.html 請作者：李嘉昱CSS在Webkit中的實現屬於相對獨立的一個模組，注意這裡說的是相對。CSS在Webkit中的作用自然是不言而喻的，在Web早期，文檔的結構和樣式還未分離的那個時代，HTML擔負了文檔的結構和樣式這兩個雙重任

CSS盒子(CSS box)首先要清楚，CSS中沒有box這個屬性。CSS的盒子(box)是由以下幾個部分組成的：內容(content)、填充(padding)、邊框(border)和邊界(margin)。盒子的內容當然是必須有的，而填充、邊框和邊界都是可選的。盒子裡由外至裡依次是：margin 邊距 border 邊框 padding 間隙 (也有人稱做補丁) content (內容，比如文本，圖片等) CSS 邊距屬性

頁面中元素一般分為兩種：區塊層級元素，行內元素（內嵌元素），即然分為兩種元素，那麼他們之間必然有區別：1.區塊層級元素總是獨自佔一行，前面和後面就好像有個分行符號，內嵌元素總是和其它的內聯兄弟佔一行2.區塊層級元素可以設定寬和高度值，內嵌元素就不行了，他們的寬和高總是隨著自身的內容自動擴大和縮小3.區塊層級元素的margin和padding都正常，內嵌元素左右maring和左右padding正常，上下不正常不識別，也就是說不能通過margin-top和padding-top來改變行高.（行內元素

css()  可以為這個方法傳遞一個字串的屬性名稱。例如：css('backgroundColor').對於由多個單片語成的屬性名稱，JQ中可以理解為CSS標記法(如：css('background-color'))，也可以理解為駝峰大小寫形式的DOM標記法(如：css('backgroundColor'))。CSS()的三種用法：            1. css(key, value) 給匹配的元素，設定一個樣式。                  key (String):

字型的處理在網頁設計中無論怎麼強調也不為過，畢竟網頁使用來傳遞資訊的，而最經典最直接的資訊傳遞方式就是文字，所以，瞭解一點字型的基本知識對於設計來說還是非常重要的。 　　中文和英文的最大區別就是中文是方塊字，英文是拼音文字，這對字型的處理的影響是巨大的。看看下面的圖示就會發現，英文字型裡的那些變化在中文字型裡都弱化了。　　作為中文的讀者，習慣性的接受方塊形狀做為閱讀的單元，其實對於眼睛來說，這是一種容易疲勞的方式，閱讀的時候你的視線實際上是跟隨整行文字的外形。看看這個例子。　　NOW I'VE

Firefox中使用display: table-cell; vertical-align: middle;可以實現div垂直置中，而IE6中則需要藉助IE6中css的特點實現垂直置中。為了實現Firefox和IE6相容的垂直置中，還需要 藉助於!important標記。Firefox支援!important標記，而IE6忽略!important標記，因此可以使用! important標記區別Firefox和IE6。[範例程式碼] <html>    <body>    

　　左右對齊：設定常值內容兩端，調整文字的水平間距，使其均勻分布在左右頁面邊界之間。左右對齊使兩側文字具有整齊的邊緣。所選的內容每一行全部向頁面兩邊對齊，字與字之間的距離根據每一行字元的多少自動分配。------------------------------------------------轉載原文---------------------------------------------------在做表單時我們經常遇到讓上下兩個欄位對齊的情況，比如姓名， 手機號碼，

利用 CSS 來實現對象的垂直置中有許多不同的方法，比較難的是選擇那個正確的方法。我下面說明一下我看到的好的方法和怎麼來建立一個好的置中網站。使用 CSS 實現垂直置中並不容易。有些方法在一些瀏覽器中無效。下面我們看一下使對象垂直集中的5種不同方法，以及它們各自的優缺點。(可以看看 測試頁面 ，有簡短解釋。)方法一討論: http://www.missyuan.com/viewthread.php?tid=377041這個方法把一些 div 的顯示方式設定為表格，因此我們可以使用表格的

看了一下google的html、css代碼規範,簡單的作下記錄。一、省略ur地址中的 http: 或 https: 的部分  , 在引用樣式表檔案、指令檔、圖片以及其它媒體檔案時，都可以這樣做，除非使用這兩種協議都無法擷取到資源，也就是說必須使用其它協議才能擷取到資源的，就不能省略啦，只有http:和https:是可以省略的。這樣做的好處是能減少檔案的體積，而且還能避免一些相對url中混亂問題的產生。<!-- 不推薦 --><script

  jQuery學習入門之css（）和addClass（）的不同  這兩天研究jQuery的，剛剛開始入門，從昨天開始呢，就發現一個方法addClass的，教程裡有一個方法是這樣寫的  $(document).ready(function() {      $("p").addClass("red");     });  但是沒有仔細看這個的，以為red是具體的顏色red，然後當我自己寫例子，定義了一個$("p").addClass("Green"); 

1.無序清單項目樣式屬性(list-style-type)…… <style type="text/css"> .w1 { list-style-type:circle;} .w2 { list-style-type:square;} .w3 { list-style-type:disc ;} </style> …… <ul class="w1"> <li>無序清單項目1</li> <li>無序清單項目2<