CSS

<html><head><title>css圓角效果</title><style type="text/css">div.RoundedCorner{background: #FFCB2D; width:150px;}b.rtop, b.rbottom{display:block;background: #FFF}b.rtop b, b.rbottom b{display:block;height: 1px;overflow:

在項目中用到的透明效果,除了用PNG24圖片外就是用如下樣式了:filter:alpha(opacity=70);       /* IE */  -moz-opacity:0.7;             /*  Moz + FF */opacity: 0.7;          /* 支援CSS3的瀏覽器（FF 3.6也支援）*/今天卻用傻了,居然IE不透明了,相關代碼如下:.mes_show{background:#EBEBEB;position:relative;margin-top:-

現總結命名規則如下，畢竟是外國人發明的啊

結合after或before偽類，在元素的開頭或結尾附加上一定的內容，content：""的引號中即是添加的內容，比如說我們這麼寫：<div>學而時習之不亦說乎</div>div:before{content:"子曰："}那麼在顯示時就會顯示子曰：學而時習之不亦說乎這其中“子曰：”並不會出現在DOM文檔中ps：其實這個主要是用來解決相容性問題參考：http://www.w3school.com.cn/css/pr_gen_content.asp

做網站時經常會用到，衡量一個DIV+CSS架構師的水平時，這個也很重要。區別不同瀏覽器的CSS hack寫法： 區別IE6與FF：        background:orange;*background:blue; 區別IE6與IE7：        background:green !important;background:blue; 區別IE7與FF：        background:orange; *background:green; 區別FF，IE7，IE6：

　　這個問題是在組件css載入方案中碰到的　　情境：　　元素的樣式我們可以寫在style裡面，也可以寫到外鏈css裡面，如果沒有設定，也會讀取瀏覽器預設的css的，現在我們要計算getComputedstyle某個元素的最終所使用的css樣式　　區別：　　1）style 是行內樣式的寫法，如果style 內有值的話，就會讀取出來，如果沒有，那麼就為空白，可讀可寫　　2）getComputedstyle

style 也是標籤（在非ie核心的瀏覽器中支援），直接 我們將style設定成

用CSS開發也很久了。早就打算對我使用的CSS做一個總結，在接下來的一段時間我打算逐個解析下CSS的一些用法。下面是目錄：1）vertical-align在不同瀏覽器的表現2）display:inline-block在在瀏覽器中的應用3）line-height 在瀏覽器中的應用以及最佳實務4）overflow：hidden在各個瀏覽器中的應用5）水平置中&&垂直置中的一些想法6）表單問題總結與最佳實務7）html&& body 標籤與捲軸研究  

大多數的CSS屬性都很容易使用。常常，當您對標記語言的元素使用CSS屬性時，產生的結果會隨著您重新整理頁面而立即呈現。而另一些CSS屬性，卻會有一些複雜，且只能在給定的環境下才會工作。Z-index屬性便屬於上面所說的後面的那一組。Z-index無疑的比其他任何屬性都會頻繁的導致（相容性）上的混亂和（開發人員心理上）的挫敗感。但滑稽的是，一旦你真正理解了Z-index，你會發現它卻是一個非常容易使用的屬性，並且會為解決很多layout方面的挑戰提供強有力的協助。在這篇文章裡，我們會準確的說明究竟

文章目錄 CSS-Based SolutionsFurther SolutionsTooltips: WordPress-PluginsSelected Scripts: Quick Overview Web users love informative clues. Whatever questions and misunderstandings might occur - delivering precise answers

Oraginal link, http://www.noupe.com/css/21-fresh-ajax-css-tables.html1) Tablecloth - Css Globe has decided to present Tablecloth. Which is a lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements.2) Create a

Oraginal link, http://www.noupe.com/css/47-excellent-ajax-css-forms.htmlStyling Forms1) Uni Form - an attempt to standardize form markup (xhtml) and css, "modularize" it, to get nice looking, well structured, highly customizable, semantic,

先看看原始碼，特別是下面幾行CSS樣式，  <style type="text/css">        .tnt        {            writing-mode: tb-rl;            text-align: left;            font-size: 9pt;        }    </style>原始碼，<html><head>    <title>豎排文字</title>

有些時候我們需要提示客戶“DO NOT COPY”, 就像在MS Word中所做的那樣，昨天遇到這樣的case，就嘗試用CSS+DIV解決：  頁面代碼如下，還有一些地方需要改進，比如調整浮水印的大小以覆蓋全部頁面等：  Code highlighting produced by Actipro CodeHighlighter

1、簡介：為何使用表格排版是不明智的？ 表格之所以存在於 HTML 中，只是為了一個目的：顯示表格狀的資料。然而此後的 border="0" 使得設計師可以將圖片和文本放在這無形的網格中。迄今為止，表格仍然主導著視覺豐富的網站的設計方式，但它卻阻礙了一種更好的、更有親和力的、更靈活的，而且功能更強大的網站設計方法。2、概覽：這對我有什麼用處？我們將告訴你這樣一種工作方式，它會：使你的頁面載入得更快 降低你的流量費用 讓你在修改設計時更有效率而代價更低 協助你的整個網站保持視覺的一致性

/*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; line-height:28px; font-size:12px; font-family:Arial, Helvetica, sans-serif;}.con{ text-align:left; width:500px; height:400px; margin:0px auto;

　　做web開發，對css樣式都有所瞭解，讓各瀏覽器都正確解析網頁，還真得費一凡功夫，今天，先說說padding吧　　製作網頁時在IE7下顯示正常了，IE6下用些hack方法基本也解決了，就是IE8和firefox下還是有問題啊，相容性問題真讓人崩潰。 假設現在設定一個padding值，這個值在FF、IE8、IE6中都不一樣首先考慮的是FF下的值.test{padding:10px}接著考慮IE8下的值.test{padding:10px;*padding:9px}最後考慮IE6下的值.test

div {background-color:red\0;  /* ie 8/9*/background-color:blue\9\0;  /* ie 9*/*background-color:green;  /* ie 7*/_background-color:gray;  /* ie 6*/}注意寫csshack的順序，其中：1.background-color:red\0;IE8和IE9都支援；2.background-color:blue\9\0;

上周末翻譯了molliza 和google關於高效CSS 的寫法的文章，覺得他們的說法有一些共同之處，就是CSS解析引擎是從右至左開始解析的，我們要做的就是減少CSS引擎的解析時間，所以避免一些低效的CSS 選取器去匹配大量元素能夠減少頁面載入的時間。結合我自己編寫CSS的經驗，我總結如下：1) CSS 的層級選取器不要超過3個，保持3個以內bad case： .class1 ul li a{}good case .class a{}2)

<html><head><style type="text/css">.list{width:800px;height:40px;background-color:#D5000A;border-radius:5px;box-shadow:-2px 2px 5px black;margin:auto;text-align:left;}.nav{list-style:none;}ul.nav li{float:left;padding:5px