CSS

這個原理經常用到，記得當初，我第一次發現這個東西是在Google的音樂。http://www.google.cn/music/homepage看上面的分類導航，為什麼點擊選中之後，下面藍色的線沒了。今天看到新浪的首頁的導航條，也有這樣的應用。     這裡中間是有線，但左邊的線怎麼沒了。這兩個導航結構是相同的。這是標準的html代碼：<div> <ul> <li><a href=""></a></li>

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

瀏覽器越來越多，也就意味著做web前端開發的就越困難。現在的瀏覽器的核心都同，對於css的相容也會有一定的差別！以前講的用css hack來也不是一件容易的事，用過多的css hack來相容也會出現許多臃腫的代碼；所以掌握一些跨瀏覽器安全色的css編碼準則是非常有必要的。第一：理解css盒子模型（學習div+css布局也是很重要的，學會的css的盒子模型學習div+css也就不難了）透徹地理解 CSS 盒子模型是首要事情，CSS 盒子模型並不難，且基本支援所有瀏覽器，除了某些特定條件下的 IE

代碼Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://

FireFox: div 設定 margin-left, margin-right 為 auto 時已經置中, IE 不行FireFox: body 設定 text-align 時, div 需要設定 margin: auto(主要是 margin-left,margin-right) 方可置中FireFox: 設定 padding 後, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 widthFireFox:

<style type="text/css">.box {    vertical-align:middle;    width:160px;    height:160px;    text-align:center;    border: 1px solid #eee;}/* For IE7 */.box img {    vertical-align:middle;   border:0 ;  

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;

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

什麼是繼承？要想瞭解css樣式表的繼承，我們先從文檔樹（HTML

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

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來控制捲軸的樣式。    如果想修改瀏覽器捲軸的顏色，我們可以把下面的代碼插入到CSS裡，這樣就可以讓捲軸變色。    代碼如下： （放在body裡,不行就放在html標籤裡。）　　　　  scrollbar-face-color:#dddddd;   /*瀏覽器右邊捲軸凸出部分的顏色*/  　　　　scrollbar-highlight-color:#ffffff;  

本篇文章使用最新的IE10以及firefox與chrome測試（截止2013年5月27日22:23:22）CSS的原理：我們知道，CSS寫在不同的地方有不同的優先順序， .css檔案中的定義 < 元素style中的屬性，但是如果使用!important，事情就會變得不一樣。首先，先看下面一段代碼：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type"

 JQuery/AjaX/Javascript/DIV+CSS：Head First

　　BlendTrans濾鏡比起上一篇介紹的Revealtrans濾鏡來要簡單一些，它只有一個參數：Duration

1. position:static|無定位position:static是所有元素定位的預設值, 一般不用註明，除非有需要取消繼承的別的定位example: #div-1 {position:static;}2. position:relative|相對定位使用position:relative，就需要top,bottom,left,right4個屬性來配合，確定元素的位置。如果要讓div-1層向下移動20px,左移40px:example: #div-1

CSS布局常用的方法float:none|left|right 取值：none:預設值。對象不飄浮left:文字資料流向對象的右邊right:文字資料流向對象的左邊 它是怎樣工作的，看個一行兩列的例子 xhtml代碼: Example Source Code

在前面的文章裡介紹了 - 如何添加/移除CSS類，那種方法需要先定義好CSS類，然後針對"類"來改變某個元素的樣式。本文要介紹的是另外一種改變CSS樣式的方法 -

CSS對瀏覽器的相容性有時讓人很頭疼，或許當你瞭解當中的技巧跟原理，就會覺得也不是難事，從網上收集了IE7,6與Fireofx的相容性處理 技巧並整理了一下。對於web2.0的過度，請盡量用xhtml格式寫代碼，而且DOCTYPE 影響 CSS 處理，作為W3C的標準，一定要加 DOCTYPE聲明。CSS技巧1.div的垂直置中問題vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px;

CSS對瀏覽器器的相容性具有很高的價值，通常情況下IE和Firefox存在很大的解析差異，這裡介紹一下相容要點。1、DOCTYPE 影響 CSS 處理2、FF: div 設定 margin-left, margin-right 為 auto 時已經置中, IE 不行3、FF: body 設定 text-align 時, div 需要設定 margin: auto(主要是 margin-left,margin-right) 方可置中4、FF: 設定 padding 後, div 會增加