純CSS的下拉式功能表

結合JavaScript的下拉式功能表,純CSS的下拉式功能表我也寫過很多了。不過在微軟 Microsoft Expression Web 的相關網站上看到這個純CSS下拉式功能表的時候,我還是覺得很讚賞。這應該是最精簡、最乾淨的純CSS下拉式功能表了。先看一下效果(這是我重新實現的):下面是實現方法:首先是菜單的XHTML代碼:<ul> <li><a href="#">菜單一</a></li> <li><a

CSS hack:針對IE6,IE7,firefox顯示不同效果

做網站時經常會用到,衡量一個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值

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

css style標籤所見即所得 (WYSIWYG)

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

css的寫法,記錄下。

上代碼:<!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;

我的css之路(總結1)

總結下平時自己css 書寫的思考過程。記錄下1)觀察頁面結構,劃分小模組, 2)在結構上找相同相似的(那些是相同的,那些是可以合并的),3)對相似的結構進行抽取(對頁面進行規劃),4)對css進行規劃(粒度劃分,利用繼承),5)布局頁面(先主要的後次要的,有利於SEO檢索)6)調試瀏覽器的相容性。先ff,然後ie(最後ie6,ie下使用zoom:1,position:relative,)7)最佳化css(合并使用相同的css樣式,margin,border等等,css sprites)

深度解析CSS 屬性的用法

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

CSS符號屬性

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;

CSS display:none和visibility:hidden區別

這裡向大家描述一下CSS display:none和visibility:hidden的區別,visibility:hidden隱藏,但在瀏覽時保留位置;而CSS display:none視為不存在,且不載入!  你知道CSS display:none和visibility:hidden的區別嗎,這裡和大家分享一下,使用CSS

詳解CSS選取器、優先順序與匹配原理

給一個p標籤增加一個類(class),可是執行後該class中的有些屬性並沒有起作用。通過Firebug查看,發現沒有起作用的屬性被覆蓋了。這個時候突然意識到了CSS選取器的優先順序問題,這裡就CSS選取器的優先順序問題做了一些總結。51CTO推薦閱讀:巧妙地使用CSS選取器選取器種類嚴格來講,選取器的種類可以分為三種:標籤名選取器、類別選取器和ID選取器。而所謂的後代選取器和群組選取器只不過是對前三種選取器的擴充應用。而

div+css中clear用法

一開始用clear屬性,只是跟float相對使用,今天看視頻的時候還是不大明白,查了下資料原來是這樣的哦,看咯。clear屬性值有四個clear:both|left|right|none;作用:該屬性的值指出了不允許有浮動物件的邊。 這個屬性是用來控制float屬性在文檔流的物理位置的。

CSS樣式表繼承詳解

什麼是繼承?要想瞭解css樣式表的繼承,我們先從文檔樹(HTML

IE9的css hack

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;

分析怪獸網CSS DIV布局

/*分析怪獸網布局*/#nav 導航 開始,做為網站上部的布局 #navmain 包括圖片和LOGO  #navlogo 網站LOGO  #navlogo    #gsmymenu 個人登入後操作菜單下拉式功能表層  #gsmymenu    #navuserbar 個人登入後主導航  #navuserbar    #navsubject 網站主欄目導航  #navsubject #navmain  #navsub 主欄目下級菜單 #navsub#nav 導航 結束#hidehr

高效CSS寫法

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

高效css 寫法

以下文章是  翻譯 google高效css寫法文章地址:http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors 使用高效的css樣式總體避免一些低效的key selectors去匹配大量的元素能夠加速頁面的展現

CSS內聯還是外聯? 內聯PK外聯

現在是一個推崇結構,表現,行為想分離的時代,最大的好處就是維護起來比較簡單,方便,代碼重用。把CSS,JS寫在HTML裡,就像一個大雜燴,很難理解,可讀性差,檔案大,維護起來非常麻煩。 但是CSS到底是內聯還是外聯呢?我們只要分析它的特點就不難得出答案。CSS內聯:就是把CSS放在HTML Head裡使用Style包圍。<style type="text/css"></style>CSS外聯:就是把CSS放到一個單獨的檔案裡,然後在HTML通過調用。<link

關於CSS的優先順序,CSS優先順序計算

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 *

CSS Reset CSS Framework

/**--------------------------------------------------*     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.*------------

css透明詳解

原文: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;

總頁數: 694 1 .... 193 194 195 196 197 .... 694 Go to: 前往

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.