CSS

因為雖然實現起來麻煩點，如果用內建的Select，很簡單的就完成了，但是本代碼實際上是在向大家講述一種Js在網頁中的應用實戰，多種元素之間的配合作用等。效果如下圖：  下拉select選擇框 請選擇 1986 1987 1988 1989 1990 請選擇年份

本來還以為這塊是由後台單獨去做的，今天看到這種效果，居然是CSS實現的。現在將它放到這裡與大家共用 精選 1.指令碼代碼收藏站,AJAX/JS/ASP/PHP一網打盡[精選]！ 2.看書了小說網！ 3.中文最強大的搜尋引擎！ 4.雲棲社區，下載中心！ 5.雲棲社區新增加photoshop，flash，製作教程經典收藏！ [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

先說說在嘗試的過程發現的幾個問題 1、盒模型問題 相信玩重構或者說是DIV+CSS的朋友應該都知道這個東西，廢話不多說，不知道而有興趣可以去網上搜尋一下。這裡我提到這個是因為這個布局是用百分比來控制的，所以當加對邊框加上1px的邊後，就不好減回來，我是捨棄了上邊的邊框樣式。 2、溢出問題 這個問題只要對overflow做hidden就可以了，防止內容過長而溢出。剛剛開始的時候可以對html跟body的overflow加一個hidden屬性。Blank 告訴我，IE預設是有捲軸的寬度（這個偶知道）

作者：馬健郵箱：stronghorse@tom.com首頁：http://stronghorse.yeah.net版本：1.01初始發布日期：2005.08.29最後更新日期：2005.09.28 目錄一、前言二、從E書或網頁中擷取檔案的一般步驟三、從E書或網頁中擷取連結進來的css檔案四、從E書或網頁中擷取連結進來的js檔案五、從E書或網頁中擷取Flash檔案六、從E書或網頁中擷取背景音樂檔案七、從E書中擷取影像檔八、進入frame頁面九、其它問題 一、前言

無論是誰，在製作頁面的過程都是會碰到這樣或者那樣的問題，出了問題就肯定要解決。解決問題的前提是要知道問題出在什麼地方，對於新手來說不一定一看到問題就知道問題出在哪裡。比如在IE6中“多了一隻豬”的問題，對於一些問題需要更多的經驗交流分享吸收後才能更好的成長。

如下所示：<div class="navlist clear"> <span><a href="/M/Page_32.html" title="內科" >內科</a></span><span><a href="/M/Page_35.html" title="外科" >外科</a></span><span><a href="/M/Page_37.html"

Positoin屬性有四個值： static、fixed、absolute和relative，後面兩個在布局中的定位裡是經常用到的，顧名思義，absolute是指絕對位置，即將對象從文檔流中拖出，使用left，right，top，bottom等屬性進行絕對位置，而其層疊通過z-index屬性定義。此時對象不具有邊距，但仍有補白和邊框。ralative是指相對定位，就是依據left，right，top，bottom等屬性在正常文檔流中位移位置。

序號 中文說明 標記文法 備忘 1 背景顏色 {background-color:數值} 2 背景圖片 {background-image: url(URL)|none} 3 背景重複 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 4 背景固定 {background-attachment:fixed|scroll} 5 背景定位

通用類 overflow:hidden;自動隱藏超出的內容，防止撐開層和表格的範圍 !important 指定樣式規則的應用優先權 文字類 color: #FF0000;文字顏色 font-family: "Arial", "Helvetica", "sans-serif";字型 font-size: 9px;字型大小 text-align：center; 置中(left為居左,right為居右) line-height：28px；行高(可用150%值) font-style:

先說下這套架構的優點：1.可以方便的把繁重的CSS編寫工作分配出去，而不會相互造成影響。2.結構清晰，利於維護和修改。3.每一張網頁都僅載入自己需要的CSS。總結下來就是：提高開發效率，提高維護效率，提高網頁載入效率。下面我解釋一下上面這張CSS結構圖：圖中間的5個黑色的圖示表示網頁，其中上面單獨的一張是主版頁面，下面四張是子頁。使用VS的人都知道主版頁面的作用，相當於asp中的include，把共通的部分作成母片，單獨的部分作成子頁，提高開發效率。圖上方綠色框內的是全域CSS部分，它們存放在s

BI上有高手專門討論了這種布局方法，但他用了較多的hack，還迴避了IE6的dtd。我在實際使用中，發現迴避掉IE6的dtd定義後，會導致ajax模態框無法置中（VS的一個控制項，自動產生的程式碼，很難修改）。 於是自己寫了個簡單的左右兩列的布局，沒用到什麼hack，很簡單，只是練手用用。

第一部：關於構建CSS架構我們要實現的目的：1.實現標準化，具備主流平台適應性的前端實現； 2.快速開發，在網站風格確定後，前端不應該成為整個項目裡瓶頸； 3.重構的需求，儘可能的讓類和區塊樣式可重用； 4.分離結構和表現的需求，遵守了語義化結構的約定; 5.構架完全符合金融網特色的CSS架構。 6.對代碼進行必要的搜尋引擎最佳化。第二部：關於CSS命名的一些約定：1.不使用大寫形式的類名和id名; 2.儘可能使用描述性的英文單詞的組合作為類名和id名; 3.id名及類名的多個英文單詞之間使用“

但是實際上，瀏覽器遠遠不止這幾個,Firefox分為Firefox 1.5,Firefox 2,Firefox 3幾個主要版本，IE7,IE6中也各有好幾個系列,另外除開這兩個主流廠商的產品之外，還有Opera,Konqueror,Netscape,chrome等一系列。

一、少用偏門。　　類似break-word斷行，z-index手動分層，還有像垂直對齊等等這些偏門CSS最好少用，因為不一定所有瀏覽器都支援，而且極難通過W3C檢測。 　　二、center不是float的值。　　很多新手都會把center誤認為是float的值，而偏偏不是如此。center只是text-align的值。 　　三、對齊不能包括兩個值。　　很多新手會在float或者text-align中填寫兩個值，比如：float:left top。這是不允許的，瀏覽器

看到一些網站的頁中大部分是這樣寫的 <style type="text/css" media="screen"> @import url("http://www.jb51.net/home/css/global/v2.0.css?t=20070518.css"); </style> 　　而很多網站使用的都是link <link rel="stylesheet" rev="stylesheet" href="default.css" type="text/css"

一.使用css縮寫使用縮寫可以協助減少你CSS檔案的大小，更加容易閱讀。css縮寫的主要規則請參看《常用css縮寫文法總結》，這裡就不展開描述。二.明確定義單位，除非值為0忘記定義尺寸的單位是CSS新手普遍的錯誤。在HTML中你可以唯寫width=100，但是在CSS中，你必須給一個準確的單位，比如：width:100px

你正在學習CSS布局嗎？是不是還不能完全掌握純CSS布局？通常有兩種情況阻礙你的學習：  第一種可能是你還沒有理解CSS處理頁面的原理。在你考慮你的頁面整體表現效果前，你應當先考慮內容的語義和結構，然後再針對語義、結構添加CSS。這篇文章將告訴你應該怎樣把HTML結構化。 

div+css排版的範例 Div布局 頂部 左側 中部 右側 全行 左側 中部 右側 全行 左側 中側 右側

1.CSS字型屬性簡寫規則一般用CSS設定字型屬性是這樣做的：font-weight:bold;font-style:italic;font-varient:small-caps;font-size:1em;line-height:1.5em;font-family:verdana,sans-serif;但也可以把它們全部寫到一行上去：font: bold italic small-caps 1em/1.5em

今天遇到一個問題， 當隱藏表格行 Tr 時　 $id("tr_" + id + "_1").style.setAttribute('cssText',"display:none;");， 表格行 Tr 裡面的 select 在 IE6 中隱藏不了，還是會顯示在頁面當中。想單獨設定 select 的樣式為隱藏 $id("new_attpm_id2_" + id).style.setAttribute('cssText',"display:none;");