CSS

先一個例子，比如說下面這段代碼： <style type="text/css">a:link {text-decoration:none;color:blue;}a:hover {text-decoration:underline;color:red;}a:active {text-decoration:none;color:yellow;}a:visited

 50款CSS工具，包含，CSS網格和布局工具，CSS 最佳化工具，CSS 菜單產生工具，CSS 按鈕產生器，CSS 圓角產生器，CSS 架構，CSS Sprites產生器，CSS 排版工具以及 CSS 表單產生器。網格和布局The 1KB CSS Grid新穎的 CSS 網格工具，可用於簡化內容管理系統的頁面模板，輕巧易用。Variable Grid System基於 960px 的常規CSS網頁布局工具，用於快速產生基本的 CSS 網格。Grid Designer

 作為一個 Web 設計師，精通 CSS 是絕對必要的而且對於 Web 開發也是必須的。 良好的 CSS 編寫習慣可以協助你節省時間，並且能更好地進行網站的後期維護使得運行速度更快，從而節約頻寬。下面是6個非常有用的 CSS 資源網站，包括 CSS 學習技巧、CSS 文章、CSS 進階文檔等。  A List Apart http://www.alistapart.com/topics/code/css/  A List Apart 是一個非常有用的 CSS

現在在所謂“div+css”的風氣下，很多人放棄了表格，其實應該讓每個標籤物盡其用，在表現資料的地方，我們還是應該使用table。但是，我們在建立table的時候，會發現它會具有一些預設的樣式，比如儲存格td之間會有間距，所以我們通常開頭是這樣寫的：以下為引用的內容：<table border="0" cellspacing="0"

今天很開心因為解決了自己N久需要卻沒有得到解決的問題就是這個帶邊框的小三角。O(∩_∩)O哈哈~貼一下自己做的一個小demo的原始碼(這裡只給出了指向是朝上的例子，其他類似)：<!doctype html><html><head><meta charset="gbk"><title>First triangel with border

今天有位朋友一早從妙味課堂轉來一個有關於CSS布局的面試題，需要解決，花了點時間寫了幾個DEMO,放上來與大家分享受。那麼我們在看DEMO之前一起先來看看這個面試題的具體要求吧：左側固定寬，右側自適應螢幕寬；左右兩列，等高布局；左右兩列要求有最小高度，例如：200px;（當內容超出200時，會自動以等高的方式增高）要求不用JS或CSS行為實現；仔細分析試題要求，要達到效果其實也並不是太難，只是給人感覺像有點蛋疼的問題一樣。但是你仔細看後你會覺得不是那麼回事：左邊固定，右邊調適型配置，這個第一點應

<!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" lang="gb2312"><head><title>CSS+JS實現的靜態頁面翻頁效果</title><

很多時候我們必須使一些塊元素並排顯示，一般想到的是必須使用浮動，但是塊元素浮動給邊距(margin)的時候在IE下會出現加倍的BUG，所以很多時候不得不把這個塊元素套在一個內嵌元素裡面，然後給內嵌元素浮動和邊距。今天看到了懌飛、秦歌和烏龍茶關於display:inline-block的文章，很不錯，綜合一下，記錄下來。display:inline-block簡單來說就是將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，允許空格。但是這個屬性目前不是所有的瀏覽器

問題瀏覽器DEMO解決方案Hacking Rules: property:all-ie\9; property:gte-ie8\0;*property:lte-ie7; +property:ie7; _property:ie6;1input[button | submit] 不能用 margin:0 auto; 置中IE8bug | fixed為input添加width2body{overflow:hidden;}沒有去掉捲軸IE6/7bug |

Xhtml網頁有人說像盒子一樣的，通過DIV把內容資訊封裝起來的結構網頁，在可視的結構中各元素被呈現為了二維平面。圖解如下：CSS二維平面圖解下面我們來詳細分解下：最內的白色區為內容資訊展示區，可以是圖片也可以是文字，而內容呈現區由高度（height）、寬度（width）來控制；內容呈現地區被外層矩形補白（padding）（灰色區）包圍著，該層不能設定顏色，但是是透明呈現內容的背景色；接著是CSS元素的邊框(border)（紅色地區），這是外框邊框可設定寬度和顏色、實線、虛線等樣式；最外層白色地

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>   <title>active</title>   <style type="text/css"

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

轉載請註明出處：http://blog.csdn.net/cnnzp/article/details/6590087Webkit

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

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

table的cellpadding和cellpadding我們經常會用如下的方式來清除預設樣式：<table cellspacing="0" cellpadding="0"></table>很多朋友會說表現在結構中，這樣不符合標準，那如何將這個表現拿出來，有些朋友或許很迷惑。我們可以用table的border-collapse: collapse;屬性 來代替cellspacing="0"，用th,td的padding: 0; 屬性來代替cellpadding="0"。t

設計稿上，有一處內嵌的介紹資訊，當文字過長時，要求使用一個經過處理的捲軸來展示。如果僅要求IE瀏覽器，可以通過調整CSS的方式，來給捲軸換色。代碼如下：.uicss-cn { height:580px;overflow-y: scroll; scrollbar-face-color:#EAEAEA; scrollbar-shadow-color:#EAEAEA; scrollbar-highlight-color:#EAEAEA; scrollbar-3dlight-color:#EAEAEA;

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

CSS 控制列印樣式 <link href="/Skin/print.css" rel="stylesheet" type="text/css" media="print" />  這是匯入外部css檔案的代碼，並且匯入樣式應用在“預覽列印模式”下，此代碼引用的print.css檔案在正常瀏覽網頁的情況下是不起作用的，在列印頁面的時候才會應用。 link 是html標籤，匯入外部檔案。 href 是匯入檔案的路徑。

我們在設計網頁的時候一個比較頭痛的問題是究竟我們的瀏覽者的解析度是多少？如果使我們的瀏覽者能夠更好的去瀏覽到我的網頁，這個是我們設計前必須思考的問題。所以Leying在設計網頁的時候第一個想的是相容現在大多數瀏覽者的螢幕解析度，這裡頭有幾種最常用的方法：    1、硬行把網頁先用表格框起來，框的解析度應該是在760－780象素，其餘的空間可以給一個背景圖或者空白.    2、用自動縮放的方法也可以實現，這種方法比較古老，而且很簡單，這個不多說了；    3、用自動判斷的方法。    今天，就第三