CSS

文章目錄 1. CSS Design Awards2. Awwwards3. Webcreme4. Best Web Gallery5. Unmatched Style6. The Design Inspiration7. Css-Showcase8. Css Cake9. CSS Winner10. Moluv11. 101 Best Websites12. Dzine Mart13. Site Inspire14. Css Mania15. CSS

文章目錄 jQuery 操作 CSSjQuery 尺寸 方法 jQuery 操作 CSSaddClass() - 向被選元素添加一個或多個類removeClass() - 從被選元素刪除一個或多個類toggleClass() - 對被選元素進行添加/刪除類的切換操作css() - 設定或返回被選元素的一個或多個樣式屬性。jQuery css() 方法〈1〉返回 CSS 屬性css("propertyname");〈2〉設定 CSS

頁面遮罩彈出框是最常見的一種情況，今天用jQuery實現頁面遮罩彈出框，主要用的技術有JQuery，css和html,html代碼如下：複製代碼 代碼如下:<div id="main"><a href="javascript:showBg();">點擊這裡查看效果</a> <div id="fullbg"></div> <div id="dialog"> <p class="close"><a href="

CSS與JS緊密配合，為我們的頁面增添了很多別緻的效果。為了達到某種特殊的效果我們需要用Javascript動態去更改某一個標籤的CSS屬性。例如常用的關閉某個漂浮的廣告顯示:document.getElementById('ad').style.display='none';相當於：.ad{ display:none}. 下面就是JS 控制CSS樣式表的文法對照： CSS文法 (不區分大小寫)JavaScript文法 (區分大小寫) borderborder

附上代碼： 複製代碼 代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;

改進版本最佳化了這個問題，通過簡單的Javascript代碼就可以增加菜單。同時使得HTML頁面非常簡潔，只需要寫2行代碼即可！O(∩_∩)O 1.使用前提，在HTML頁面中引入一個CSS檔案，和一個JavaScript檔案。如下： 複製代碼 代碼如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Menu</TITLE&

強制不換行 div{ white-space:nowrap; } 自動換行 div{ word-wrap: break-word; word-break: normal; } 強制英文單詞斷行 div{ word-break:break-all; } CSS設定不轉行： overflow:hidden 隱藏 white-space：normal 預設 pre 換行和其他空白字元都將受到保護 nowrap 強制在同一行內顯示所有文本，直到文本結束或者遭遇 br 對象 設定強行換行：

我們羅列了十幾條相關的知識與注意點，大家可以系統的探討一下，讓我們編寫的Web頁面開啟更加流暢。 　　請不要告訴我，你看不懂E文，只是你不願意看！！！ 　　1、How the style system breaks up rules 　　The style system breaks rules up into four primary categories. It is critical to understand these categories, as they are the

詳細講解兩者的關係，需要配合例子，請先看例子： 以下是引用片段： <!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

本文將講述HTML和CSS的關鍵—盒子模型(Box model). 理解Box model的關鍵便是margin和padding屬性, 而正確理解這兩個屬性也是學慣用css布局的關鍵.注: 為什麼不翻譯margin和padding? 原因一, 在漢語中並沒有與之相對應的詞語; 原因二: 即使有這樣的詞語, 由於在編寫css代碼時, 必須使用margin和padding, 如果我們總用漢語詞語代替其來解釋的話, 到了實際應用時容易混淆margin和padding的概念.如果有一點Html基礎的話,

  1、 常見實用的水平導航條 建立一個html檔案：代碼：<!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

當嵌套主版頁面的子頁面與主版頁面不在同一級目錄時，往往會牽涉到 外部圖片、js、css檔案引用的路徑問題。（以下是引用別人加自己整理） 1. 圖片、<a>標籤 非常好解決 <img runat="server" src="~/images/log.gif" mce_src="~/images/log.gif"></script> <a href="~/book/buy.aspx" mce_href="~/book/

今天有讀者詢問製作滑鼠經過時切換圖片的效果，這種效果也稱為“翻轉”效果(roll-over)。原來這種效果大多使用Javascript實現，實際上用CSS可以非常方便地製作出來的。這裡給出一個最簡單的效果，在深入的複雜效果變化就非常多了，有興趣的讀者可以慢慢深入研究。先看一下這個效果，將滑鼠移到按鈕圖片上時，圖片就會成另一個了。Button

由於各瀏覽器（IE、gecko、opera......)對CSS的渲染方式都有所不同，造成顯示效果不同，所以可通過對其載入不同CSS的方法來解決，下面介紹下二種方法來實現，不一定很實用，難的玩一把。純CSS方式Code.box{ width: 20em; height:20em; background: #369;}/*--gecko核心--*/@media all and (min-width: 0px){ box{ background: #CC0000; }}/

    在這個瀏覽器百花爭鳴的時代，作為前端開發的我們為了我們漂亮的設計能適應各個瀏覽器可為煞費苦心，主要體現在javascript和css上面。javascript我這次就不談了，先說說css。      為了適應不同瀏覽器不同的版本（版本主要就ie來說），ie這朵奇葩現在我們要相容6-9，它的10也快出來了。。。在ie下我們可以寫條件注釋來區分 ie和其他瀏覽器，以及ie的版本，這些請大家自行google。這篇文章主要討論的是css

　　不知道大家有沒有注意到Google今天官網上的logo，剛開始一看還以為是gif，在仔細一看，發現並非如此，原來是使用CSS Sprite技術，利用一個初始圖片和一張畫滿各個動作的拼接圖片，從而實現了動畫效果。　　本人一時手癢，就想把這個扒下來，但發現Google的js寫的太牛逼了，無奈，只能自己用自己的思維去類比一個了。首先，需要兩張圖，分別是：　　當有這兩張圖後，我們就可以開始類比了。　　我先通過firebug觀察，發現google首頁在啟動並執行時候會迴圈載入以下html代碼：<

1、如何設定文字字型、顏色、大小 —— 使用fontfont-style設定斜體，比如font-style: italic;font-weight設定文字粗細，比如font-weight: bold;font-size設定文字大小，比如font-size: 12px;（或者9pt，不同單位顯示問題參考CSS手冊）line-height設定行距，比如line-height: 150%;color設定文字顏色（注意不是font-color），比如color: red;font-family設定字型，

      按鈕是網頁最常用的控制項了，怎樣設計一個更好看的按鈕，這兩天實驗了幾種方法：      1、用Javascript交換圖片的方式先在網頁中製作圖片，然後把圖片轉換為伺服器端控制項，為該控制項添加事件處理。不過，很遺憾，運行時不響應，我估計跟圖片被交換了有關。      2、按鈕在交到頁面時，其實就是一個input，那麼用css寫一個樣式就ok了。結果，發現用戶端的頁面中，按鈕的ID雖然是原來的ID，但是寫的CSS並沒有起作用。原來，.net自己為按鈕加了一個style，優先順序顯然比

CSS開發中常用技巧總結使用css縮寫好處使用縮寫可以協助減少你CSS檔案的大小，更加容易閱讀。明確定義單位，除非值為0，以及px和em區別。忘記定義尺寸的單位是CSS新手普遍的錯誤。在HTML中你可以唯寫 width="100"，但是在CSS中，你必須給一 個準確的單位，比如：width:100px  width:100em。只有兩個例外情況可以不定義單位：行高和0值。除此以 外，其他值都必須緊跟單位，注意，不要在數值和單位之間加空格。px單位適合固定式配置如960Grid。

    在Web設計中，CSS(Cascading Style Sheet)其實是很熟悉的東西，不過在看一些複雜網頁的CSS時，常常被一些莫名其妙寫法搞得比較鬱悶。於是在Google上翻啊翻，翻了一堆CSS的手冊來看也沒有徹底搞明白是怎麼回事。下面總結一下，希望能作為一個快速參考來對付那些"怪異"的CSS。    什麼是"怪異"的CSS？比如這些： <style>.col, .col_wide{}{    border: 1px solid #ebf0fa;}.col_cap *,