Time of Update: 2018-12-06
1.使用背景圖片實現等高自適。這種方法感覺上是種視覺上的欺騙,實際是布局元素的高度並不是相等的。原理是:將需要等高自適的塊(如A、B)都包含在一個容器C中,給容器C一個背景圖片,這張圖片包含需要等高自適的塊A和B的背景(圖片要處理好,像素要算準)。當A、B高度不等時,由於較高的塊將容器C給撐開了,那麼容器C的背景圖片顯示的高度就是較高者的高度,導致視覺上A、B兩者的高度似乎相等了,實際是不相等的。實際操作方法和Demo參看:http://www.52css.com/article.asp?id=
Time of Update: 2018-12-06
先看圖1效果: 代碼如下:<div style=”border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;border-bottom:10px solid
Time of Update: 2018-12-06
1.基本選取器序號選取器含義1. * 通用元素選取器,匹配任何元素2. E 標籤選取器,匹配所有使用E標籤的元素3. .info class選取器,匹配所有class屬性中包含info的元素4. #footer id選取器,匹配所有id屬性等於footer的元素2.多元素的組合選取器序號選取器含義5. E,F 多元素選取器,同時匹配所有E元素或F元素,E和F之間用逗號分隔6. E F
Time of Update: 2018-12-06
文章目錄 盒子大小邊框(border)outline背景(background)font列表樣式border-radius(圓角半徑)
Time of Update: 2018-12-06
直接上案例吧.... a:link{text-decoration:none;color:#004779;}//正常連結狀態下的樣式..無底線 a:active{text-decoration:none;color:#0000FF;}//啟用狀態...無底線 a:visited{text-decoration: none;color:#004779;}//已訪問過...無底線 a:hover{text-decoration:underline;color:#0000FF;}//滑鼠停留.
Time of Update: 2018-12-06
最近在做項目的後期圖片定位、空間布局之類的美工細緻活,以前都沒什麼注意,用到了臨時穀哥|度娘一下。在網上找了些CSS的技巧,在此分享。 CSS是頁面效果呈現中非常重要的組成部分,它包括顏色、大小尺寸、背景和字型等。寫CSS很簡單很容易,但是要想寫出精鍊的CSS代碼還是有很多技巧的。下面就是技巧7則:1. 合并多個相同屬性 比如很多人寫margin會這樣寫:margin-top: 8px;margin-right: 4px;margin-bottom: 8px;margin-left: 4
Time of Update: 2018-12-06
1.超連結訪問過後hover樣式就不出現的問題? 被點擊瀏覽過的超連結樣式不在具有hover和active了,解決方案是改變CSS屬性的排列順序: L-V-H-A 2.IE6的雙倍邊距BUG 例如:<style type="text/css"> body {margin:0} div { float:left; margin-left:10px; width:200px;
Time of Update: 2018-12-06
非原創,來源網路。感謝原作者奉獻如此精彩文章。原文地址: http://www.jluvip.com/blog/article.asp?id=186選擇符分類介紹 1.通配選擇符文法:* { sRules } 說明:通配選擇符。選定文檔分類樹(DOM)中的所有類型的單一對象。假如通配選擇符不是單一選擇符中的唯一組成,“*”可以省略。 樣本:*[lang=fr] { font-size:14px; width:120px; } *.div { text-decoration:none; } 2.
Time of Update: 2018-12-06
原文:Efficiently Rendering CSS 我承認我並不經常想這個問題......我們寫的css的效率是怎麼樣的呢,瀏覽器渲染的速度又如何呢?這是應該是瀏覽器開發人員應該關心的(頁面載入更快,使用者就會更愉快)。Mozilla有一篇文章: about best practices . Google 當然也很關心這個問題,他們也有這樣一篇文章:Optimize browser rendering
Time of Update: 2018-12-06
文章目錄 CSS過渡效果的由來漸進增強設計的簡介首先介紹一些過渡的概念一個簡單的過渡例子增加多重過渡哪些屬性可以產生過渡?過渡計時和延遲全域過渡?
Time of Update: 2018-12-06
一.使用css縮寫 使用縮寫可以協助減少你CSS檔案的大小,更加容易閱讀。css縮寫的主要規則請參看《常 用css縮寫文法總結》,這裡就不展開描述。 二.明確定義單位,除非值為0 忘記定義尺寸的單位是CSS新手普遍的錯誤。在HTML中你可以唯寫width=100,但是在CSS中,你必須給一個準確的單位,比 如:width:100px width:100em。只有兩個例外情況可以不定義單位:行高和0值。除此以外,其他值都必須緊跟單位,注意,不要在數值和單位之間加空格。 三.區分大小寫
Time of Update: 2018-12-06
[轉載,存檔,備查]由於瀏覽器之間存在相容性問題,在製作網 頁的時候,為了使頁面能在不同瀏覽器中顯示相對一致;所以總結了幾個瀏覽器之間的Hack和在瀏覽器安全色問題上的一些相關注意事項。現在瀏覽器基本需要相容IE6;IE7;IE8;FF。第一節 CSS HACK 匯總速查一覽瀏覽器Hack(不支援的為紅色)IE6“*” “_” “\9” “!important”IE7“*“ “_” “\9” “!important”IE8“*“ “_” “\9”
Time of Update: 2018-12-06
在網上看到篇文章講全球很多高手的CSS全域樣式(reset.css),再一次體會到了什麼叫“細節決定成敗”。原文:http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/。 原文是藉著翻譯外掛程式看下來的,大概意思就是講什麼是Css,以及各瀏覽器的css規則的不同,而制定"Css Reset"也是為了相容與統一,正確有效使用"Css
Time of Update: 2018-12-06
/*html5doctor.com Reset Stylesheetv1.4.12010-03-01Author: Richard Clark - http://richclarkdesign.com*/html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q,
Time of Update: 2018-12-06
具體配置看我的另一篇文章apache部署django.正確部署完成後,鍵入地址開啟項目。項目中得CSS和JS只要用的不是絕對路徑都沒有問題。進入admin管理介面,發現成了大白頁,沒有了樣式。 現在我就來介紹一種解決辦法:在部署的那篇文章中我介紹過,在項目路徑下建一個apache目錄,裡麵包括針對項目的配置。其中有個檔案 apache_django_wsgi.conf 這個檔案是自己手動建的,包含針對項目的一些apache配置。(你直接在httpd.conf中加也是一樣) 添加下面這段代碼 1
Time of Update: 2018-12-06
在HTML中對於邊框的設定,在文字方面好象沒有較詳細的設定.. 至於圖形方面,<img>卷標提供了hspace,vspace,border等項目來設定邊框... CSS對邊框的延伸規格有較詳細的設定... 不管是文字或者圖形都可使用邊框來顯示... 以圖形為列,一張在網頁上顯示的圖形.. 邊框的性質有3個,就像一張圖檔周圍還有3個框.... 由內至外分別是padding,border-width,margin... 這3個框右分別有上、下、左、右,四個性質可設定它的大小... 共12
Time of Update: 2018-12-06
HTML檔案是通過CSS樣式進行顯示的控制的,也就是結合XHTML與CSS來表現頁面內容。那麼到底有哪些方式在XHTML檔案中引入CSS樣式呢?一、內聯引用CSS將STYLE屬性直接加在個別的元件標籤裡,<元件(標籤) STYLE="性質(屬性)1: 設定值1; 性質(屬性)2: 設定值2; ...}例如: <td style="color:#c00; font-size:15px; line-height:18px;>模板無憂 -
Time of Update: 2018-12-06
CSS文檔流與區塊層級元素(block)、內嵌元素(inline),之前翻閱不少書籍,看過不少文章, 看到所多的是零碎的CSS布局基本知識,比較表面。看過O'Reilly的《CSS權威指南》,發現裡面提到的文檔流概念讓我很敏感。 可惡的是書中並沒有解釋文檔流是什麼東西,或許作者覺得這個太簡單了以至於不值一提。但我覺得,這個概念實在太重要了。理解了它,一堆CSS布局的理論都 變得易於理解,並且體會到CSS這套設計的合理性所在。文檔流將表單自上而下分成一行行,
Time of Update: 2018-12-06
alpha濾鏡用於設定圖片或文字的不透明度。它是把一個目標元素與背景混合,通俗地說就是一個元素的透明度。通過指定座標,可以指定點、 線、面的透明度。文法:filter: Alpha(參數1=參數值, 參數2=參數值,…)說明:alpha屬性包括很多參數,如下表所示。alpha屬性的參數設定參數具體含義及取值opacity代表透明度水準,預設的範圍是從0到100,表示透明度的百分比。也就是說,0代表完全透明,100代表完全不透明finishopacity是一個選擇性參數,如果要設定漸層的透明效果,
Time of Update: 2018-12-06
相容IE6和Firefox的PNG背景透明CSS代碼 PNG的背景透明在網頁中應用比較廣泛,但瀏覽器的相容問題一直很讓人頭疼,這個JS焦點圖代碼,是用JS判斷的方法,用CSS變通的也實現了PNG背景透明的相容問題。 說明: 1、當CSS中出現兩個同樣的屬性,無論是否有!important,IE6隻識別最後一個屬性。(IE6是識別!important的,後面的background-image起幹擾作用,呵呵~)