CSS

在網頁中應用選項卡可以使網頁顯得更緊湊，結合AJAX技術可以使頁面在有限的空間內展現更多的內容。本文主要介紹幾種簡潔的選項卡效果的實現（不涉及滑動門和AJAX），附有執行個體，無圖片，相容性較好，方便大家直接使用。 第一種形式: 通過更換顯示樣式實現，這種很常見，就不多說了。<div id="tabs0"> <ul class="menu0" id="menu0"> <li

這個效果是今天有人寫郵件給我問的一個效果，記前以前利用A標籤的背景寫過一個類似的效果。於是剛剛回來就寫了一下他要求的效果！順便貼出來和大家分享一下，如果你很有創意，那麼你一定能作出更有意思的效果。他提出來的效果，是九天音樂首頁一個FLASH的作的效果，要用CSS模仿同樣的效果，可能是因為不想用FLASH或是SEO之類的目地。於是用FW作了兩張GIF的圖片，來模仿這樣的效果，由於是是測試用，所以圖片等很多方面沒有考慮的特別細。有些粗糙，但看上去還是有那麼點意思的，呵呵……

用margin和overflow屬性實現div間距的方法_經驗交流通常我們在製作的時候，會分別給四個p加上不同的css屬性，來實現中間間隔。但我們更希望的是不需要對html標籤做標識，直接能通過css實現，今天在論壇上小志提出了一個很不錯的解決方案。使用overflow:hidden屬性。或許很多人已經是這樣用了，我沒用過，覺得耳目一新。呵呵。其實道理很簡單，我們按照正常的設定li的margin-right、margin-bottom屬性，這樣的結果自然會比我們期望的要多出來右邊和下方的，這個時

用css alpha 濾鏡 實現input file 樣式美化代碼_經驗交流在WEB上傳檔案時，要用到上傳框： <input type="file" id="f" name="f">哪怕你將 f 的onclick控制代碼賦給某個對象，如： <input type="file" id="f" name="f"> <input onclick=&

消除鋸齒圓角 This is content here http://www.spiffycorners.com/index.php?sc=spiffy&bg=3847B4&fg=D68A88&sz=3px [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

提出問題： 我設定nowrap和不設定nowrap效果都一樣。就是表格隨著文字自動伸展，為什嗎？ →回答問題： TD元素noWrap屬性的行為與TD元素的width屬性有關。 ◆如果未設定TD寬度，則noWrap屬性是起作用的。 ◆如果設定了TD寬度，則noWrap屬性是不起作用的。 樣本檔案，點擊運行按鈕，查看效果： www.jb51.net 指令碼之家wrap屬性研究 測試字串： 我終於明白，我其實有一條韌性十足的命，它遠比我想象中的那條命結實得多、耐磨的多……

在網上搜尋了一下都沒怎麼看到純用CSS製作標籤導航方面的教程或者說明，大部分都是要涉及到JS的編寫的。這對於很多CSS學習中的人來說實在有些不夠體貼，既然沒人做那我來先來試試！我在這裡做的CSS標籤導航是純CSS無JS無背景圖片的綠色導航。此文章適合初學者，高手可以路過，呵呵！ nav02 指令碼之家01 指令碼之家02 指令碼之家03 指令碼之家

應用CSS製作的新聞網站中的文章列表：ul是html中的無序列表，li是列表中的清單項目。如果沒有CSS定義它的外觀，它預設是顯示成一列列表，並且它會存在項目符號(比如方塊或實心的黑點)的列表內容。CSS網頁布局中，除了新聞列表、連結運行ul、li製作以外，我們通常將菜單也用ul、li來實現。 CSS新聞列表製作webjx.com 2007年12月21日新聞標題01 2007年12月21日新聞標題02 2007年12月21日新聞標題03 2007年12月2

看到了 分享：絕對經典的滑輪新聞顯示(javascript+css) 這個文章，都是css+js的控制經典，其實單css就可以搞定了，只不過是為了相容那垃圾的 IE 才不得做個js ， 以下的代碼如果去掉js部分地話，在Opear和Firrfox都能正常的，但是IE下就不行了。 大家有興趣的可以測試一下。也希望能幫到有需要的人。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

inline style embeded style external style user style inline style是醜陋的，它們穿梭在HTML文檔中，與HTML元素扭成一團，給Web前端開發人員造成了許多麻煩。它們往往以這樣的面目出現： This is a paragraph. embeded style比inline style紳士一些，它們也寄宿在HTML文檔中，但是它們不屑於與HTML元素扭成一團。它們往往在 external

而現在對於 inline-block 屬性運用的需求也越來越多，可惜依舊只有 Firefox3 beta、IE8 beta、Opera、Safari 支援 inline-block 屬性（註：原來只有 Opera、Safari 支援），但 IE6、IE7 可以通過觸發 hasLayout 來類比，Firefox2 有-moz-inline-box 和 -moz-inline-stack 私人屬性（這兩個屬性的比較引用自秦歌的《display:inline-block的應用兩例》）。

作者：Cutsin 原文地址：http://www.moonless.net/blog/2007/09/csspositionz-index.html 註：本文僅供交流使用，如有不當之處歡迎批評指正，但請註明詳由，謝謝！

網站導航是網站中最重要的元素，是網站提供給使用者的最直接最方便的訪問網站內容的工具。網站導航從形式上主要由橫嚮導航、縱嚮導航、下拉及多級菜單導航第三種形式。 　　橫嚮導航　作為門戶網站的設計而言，主導航一般採用橫嚮導航。由於門戶網站下方文字較多，且每個頻道均有一同的樣式區分，因此在頂部固定一個地區設計統一風格且不佔用過多空間的導航是最理想的選擇，國內大部分門戶均採用這種形式。 　　縱嚮導航　目前在門戶網站的設計中已經不再流行，縱嚮導航更傾向於表達產品分類。 　　下拉導航　主要用於功能複雜的網站。

雖然完成了標籤式導航，但是廣場狀的導航似乎並不能夠順應現在的設計潮流，其實導航不僅可以使用css的顏色來定義，同樣可以採用精心設計的圖片或其它元素來構建導航，在這裡我們將開始改善導航的設計，使它成為更加出色的標籤效果。 　　我們將考慮去掉單一的方塊狀背景元素，使用帶色彩的圓角標籤來完成我們的設計。不過從這個改進中能夠體會到css設計的另一個優勢，就是可以不需要修改結構代碼，只需要修改樣式，便可以完成改進，所以這裡可以直接看看css代碼的設計： <style> body {

執行個體： 整體觀察思考：在開始製作頁面前，我們首先要觀察圖的結構，考慮怎樣布局，布局對一個網站來說非常重要，他是整個體系的骨骼。再看此圖很經典的三行兩列結構，分為四塊，TOP、RIGHT、LEFT、BOTTOM。如 以上我們思考過整體的結構,接下來我們要考慮如何把思考出來的結構變化成"骨骼"如(盒模型來分析) 製作流程：主體製作 --> 細節製作 一、製作主體：xhtml： css：@import url("http://

幾乎被設計師遺忘了的標籤 Dascom News Last Amish shooting victim to be released from hospital Last Amish shooting victim to be released from hospital Last Amish shooting victim to be released from hospital Last Amish shooting victim to be

CSS條狀圖表是我們在網頁設計中常常會遇到的一種形式。條狀圖表可以將數量，以條狀圖形的形式直觀的表示出來。 　　CSS基本條狀圖表的實現方法是什嗎？我們看下面的執行個體介紹： 複製代碼 代碼如下: 24% 這是xhtml代碼，定義了一個容器，應用類graph，其中包括了一個xhtml元素strong，並且對這個元素應用類bar。 　　我們看下面的CSS定義： 複製代碼 代碼如下:.graph { position: relative; /* IE is

網上找到的正規描述： 引用內容 這個值導致一個元素產生一個塊狀盒模型（block box），而本身作為單一的內聯盒模型（inline box）流動排列（flow），類似一個被替代的元素。Display值為inline-block的元素內部形成一個塊狀盒模型，而本身形成類似一個內聯的被替代元素 PS：可惜IE不支援，FF也不支援。HOHO～ IE解決方案：觸發IE的layout，從而使該元素具備類似line-block的特性。

以前總結過Div的換行和不換行的css寫法。但對於表格儲存格只知道一個屬性nowrap可以使其不換行。 近日有此需要，但發現加上nowrap在某些情況下還是會換行！無奈，沒有一個強制不換行的方法嗎？ baidu了一下，令俺非常欣慰，還真的找到了辦法，問題解決了。 用CSS實現表格儲存格資料自動換行或不換行 1、自動換行：

純DIV/CSS對聯漂浮廣告代碼(無JS) 源碼網兩側漂浮。經測試，相容IE6，IE7，Firefox瀏覽器。 CSS代碼為： 複製代碼 代碼如下:.r1{width:80px;height:80px;background:red;float:right; position:fixed !important; top/**/:200px; position:absolute; z-index:300;