Time of Update: 2018-12-06
結合JavaScript的下拉式功能表,純CSS的下拉式功能表我也寫過很多了。不過在微軟 Microsoft Expression Web 的相關網站上看到這個純CSS下拉式功能表的時候,我還是覺得很讚賞。這應該是最精簡、最乾淨的純CSS下拉式功能表了。先看一下效果(這是我重新實現的):下面是實現方法:首先是菜單的XHTML代碼:<ul> <li><a href="#">菜單一</a></li> <li><a
Time of Update: 2018-12-06
做網站時經常會用到,衡量一個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:
Time of Update: 2018-12-06
這個問題是在組件css載入方案中碰到的 情境: 元素的樣式我們可以寫在style裡面,也可以寫到外鏈css裡面,如果沒有設定,也會讀取瀏覽器預設的css的,現在我們要計算getComputedstyle某個元素的最終所使用的css樣式 區別: 1)style 是行內樣式的寫法,如果style 內有值的話,就會讀取出來,如果沒有,那麼就為空白,可讀可寫 2)getComputedstyle
Time of Update: 2018-12-06
style 也是標籤(在非ie核心的瀏覽器中支援),直接 我們將style設定成
Time of Update: 2018-12-06
上代碼:<!DOCTYPE HTML><html ><head><meta http-equiv="Content-Type" content="text/html;charset=gb2312" /><style type="text/css">.mod-test1{font:20px/1.5;color:red;}.mod-test1.bg{ background:#dfdfdf; display:inline-block;
Time of Update: 2018-12-06
總結下平時自己css 書寫的思考過程。記錄下1)觀察頁面結構,劃分小模組, 2)在結構上找相同相似的(那些是相同的,那些是可以合并的),3)對相似的結構進行抽取(對頁面進行規劃),4)對css進行規劃(粒度劃分,利用繼承),5)布局頁面(先主要的後次要的,有利於SEO檢索)6)調試瀏覽器的相容性。先ff,然後ie(最後ie6,ie下使用zoom:1,position:relative,)7)最佳化css(合并使用相同的css樣式,margin,border等等,css sprites)
Time of Update: 2018-12-06
用CSS開發也很久了。早就打算對我使用的CSS做一個總結,在接下來的一段時間我打算逐個解析下CSS的一些用法。下面是目錄:1)vertical-align在不同瀏覽器的表現2)display:inline-block在在瀏覽器中的應用3)line-height 在瀏覽器中的應用以及最佳實務4)overflow:hidden在各個瀏覽器中的應用5)水平置中&&垂直置中的一些想法6)表單問題總結與最佳實務7)html&& body 標籤與捲軸研究
Time of Update: 2018-12-06
list-style-type:none; /*不編號*/ list-style-type:decimal; /*阿拉伯數字*/ list-style-type:lower-roman; /*小寫羅馬數字*/ list-style-type:upper-roman; /*大寫羅馬數字*/ list-style-type:lower-alpha; /*小寫英文字母*/ list-style-type:upper-alpha; /*大寫英文字母*/ list-style-type:disc;
Time of Update: 2018-12-06
這裡向大家描述一下CSS display:none和visibility:hidden的區別,visibility:hidden隱藏,但在瀏覽時保留位置;而CSS display:none視為不存在,且不載入! 你知道CSS display:none和visibility:hidden的區別嗎,這裡和大家分享一下,使用CSS
Time of Update: 2018-12-06
給一個p標籤增加一個類(class),可是執行後該class中的有些屬性並沒有起作用。通過Firebug查看,發現沒有起作用的屬性被覆蓋了。這個時候突然意識到了CSS選取器的優先順序問題,這裡就CSS選取器的優先順序問題做了一些總結。51CTO推薦閱讀:巧妙地使用CSS選取器選取器種類嚴格來講,選取器的種類可以分為三種:標籤名選取器、類別選取器和ID選取器。而所謂的後代選取器和群組選取器只不過是對前三種選取器的擴充應用。而
Time of Update: 2018-12-06
一開始用clear屬性,只是跟float相對使用,今天看視頻的時候還是不大明白,查了下資料原來是這樣的哦,看咯。clear屬性值有四個clear:both|left|right|none;作用:該屬性的值指出了不允許有浮動物件的邊。 這個屬性是用來控制float屬性在文檔流的物理位置的。
Time of Update: 2018-12-06
什麼是繼承?要想瞭解css樣式表的繼承,我們先從文檔樹(HTML
Time of Update: 2018-12-06
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;
Time of Update: 2018-12-06
/*分析怪獸網布局*/#nav 導航 開始,做為網站上部的布局 #navmain 包括圖片和LOGO #navlogo 網站LOGO #navlogo #gsmymenu 個人登入後操作菜單下拉式功能表層 #gsmymenu #navuserbar 個人登入後主導航 #navuserbar #navsubject 網站主欄目導航 #navsubject #navmain #navsub 主欄目下級菜單 #navsub#nav 導航 結束#hidehr
Time of Update: 2018-12-06
上周末翻譯了molliza 和google關於高效CSS 的寫法的文章,覺得他們的說法有一些共同之處,就是CSS解析引擎是從右至左開始解析的,我們要做的就是減少CSS引擎的解析時間,所以避免一些低效的CSS 選取器去匹配大量元素能夠減少頁面載入的時間。結合我自己編寫CSS的經驗,我總結如下:1) CSS 的層級選取器不要超過3個,保持3個以內bad case: .class1 ul li a{}good case .class a{}2)
Time of Update: 2018-12-06
以下文章是 翻譯 google高效css寫法文章地址:http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors 使用高效的css樣式總體避免一些低效的key selectors去匹配大量的元素能夠加速頁面的展現
Time of Update: 2018-12-06
現在是一個推崇結構,表現,行為想分離的時代,最大的好處就是維護起來比較簡單,方便,代碼重用。把CSS,JS寫在HTML裡,就像一個大雜燴,很難理解,可讀性差,檔案大,維護起來非常麻煩。 但是CSS到底是內聯還是外聯呢?我們只要分析它的特點就不難得出答案。CSS內聯:就是把CSS放在HTML Head裡使用Style包圍。<style type="text/css"></style>CSS外聯:就是把CSS放到一個單獨的檔案裡,然後在HTML通過調用。<link
Time of Update: 2018-12-06
1 原則一: 繼承不如指定 2 原則二: #id > .class > 標籤選擇符 3 原則三:越具體越強大 4 原則四:標籤#id >#id ; 標籤.class > .class 5 6 CSS優先順序權重計演算法 7 8 CSS優先順序包含四個層級(標籤內選擇符,ID選擇符,Class選擇符,元素選擇符)以及各層級出現的次數! 9 10 根據這四個層級出現的次數計算得到CSS的優先順序。11 12 CSS優先順序的計算規則如下:13 *
Time of Update: 2018-12-06
/**--------------------------------------------------* Name: Kingwell CSS Framework* Version: 1.2(June,1 2012)* Author: Kingwell* E-mail: jinhua.leng##gmail.com* Copyright (c) 2012, KINGWELL. All rights reserved.*------------
Time of Update: 2018-12-06
原文:http://www.cnblogs.com/zhengchuyu/archive/2008/07/30/1256890.html 透明往往能產生不錯的網頁視覺效果,先奉上相容主流瀏覽器的CSS透明代碼:.transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;}上面的幾個屬性分別是:opacity: 0.5;