CSS

如題，這樣層次關係比較瞭然。未添加背景色Code highlighting produced by Actipro CodeHighlighter

其實這種菜單個人認為應該稱作二級，但很多朋友都習慣把它叫作三級，就順其自然吧！在IE6.0 IE5.X Firefox1.x NS7.2 Opera8.0中都能正確顯示，只用到很少的JS代碼，使用時只要把<ul></ul>部分插入需要的地方即可。水平方向菜單示範>>  垂直方向菜單示範>>水平方向的代碼:CSS代碼 #nav, #nav ul {float: left;list-style: none;line-height:

1．很普通的一個導航條，不同之處是只採用了一張背景圖片，如左圖。2．初始狀態：背景為上半部分，翻轉為下半部分，預覽最終效果>>，代碼如下。#nav{width: 400px;text-align: center;font-size: 11px;font-family: Arial, Helvetica, sans-serif;}#nav ul{margin: 0px;padding: 0px;list-style-type: none;}#nav li{float:

更多CSS布局、網站訪問無障礙化、網站親和力（Accessibility）文章.如果你要製作一條高度小於12PX（大約）的線條，在IE中會顯示出高於實際高度的，看下面。 .line10{background: #CCCCCC;height: 6px;}可看出實際高度大於6PX，這也算是IE的一個BUG吧。以下三種方法可解決這個問題，推薦使用第一種方法。1..line11{background: #CCCCCC;height: 6px;overflow: hidden;}<div

此POPMENU根據alistapart 的articles改編，比DW中用顯示、隱藏層的方法要簡單。在IE6.0 IE5.X Firefox NS都能正確顯示，只用到很少的JS代碼，使用時只要把<ul></ul>部分插入需要的地方即可，不會因解析度不同而發生錯位的現象。菜單示範>>CSS代碼li ul {display: none;left: -40px;position: absolute;top: 24px;width: 490px;

完全用DIV+CSS做的菜單，相比傳統用圖片做的開啟速度更快。預覽最終效果>>#nav{height: 44px;width: 425px;background: #FFFFFF;}.vline{background: #999999;width: 1px;height: 20px;}#nav ul{margin: 0px;padding: 0px;list-style-type: none;}#nav li{float: left;font-family:

<form action="#" method="post" name="myform" id="myform"><div class="bo"><label for="name">姓名：</label><input type="text"size="20" name="name" id="name" maxlength="10" /></div><div class="bo"><label

CSS + JS 構建的圖片查看器這是一個使用 CSS + JS 構建的簡易圖片查看器，採用縮圖點擊查看大圖，可以分別顯示每張圖片的描述，大圖顯示位置採用固定寬度和高度，超出部分隱藏，點擊大圖可查看完全尺寸，相容性：IE、Firefox 、Opera。JS部分function showPic (whichpic) { if (document.getElementById) { document.getElementById('placeholder').src = whichpic.href;

預覽最終效果>>form{margin: 0px;padding: 4px;}#member{width: 170px;background: #F1F1F1;text-align: center;}label{width: 40px;float: left;text-align: right;padding: 3px 0px 1px;color: #666666;}input{border: 1px solid #CCCCCC;margin: 1px;padding:

這是用DIV+CSS+JS構成的樹型菜單，採用列表,符合WEB標準，在大多數WIN瀏覽器下，相容性不錯，xhtml見效果頁,我現在做的是二個菜單,如果需要添加,可把<ul class="collapsed" id="submenuid2">......</ul>之間的內容加上去,"submenuid"加1,查看效果。CSS代碼body {margin: 0px;padding: 0;font: 12px " Arial, Helvetica,

作者網站：http://www.cssplay.co.uk一個簡單、隱藏的菜單，初始時只有一個指示用的功能表標籤，當滑鼠移動到功能表標籤上時顯示出完整的菜單。Javascript有許多版本,但很少有CSS的版本，我認為到目前為止這個菜單是唯一的. 菜單工作在 IE5.5, IE6, IE7, Firefox, Opera, Netscape 8 and Mac Firefox 1.5 and Safari ，不能工作在 Mac IE5.x.它也可以做成多級展開菜單. 階層式樣式表加正常的樣式表（

日前在http://www.dynamicdrive.com 看到一例Image Thumbnail Viewer的指令碼，效果還不錯，支援FF1+ IE5+ Opr7+，能通過W3C的檢驗，在IE5.5+中有圖片談出擦除過場效果。重寫了DIV+CSS部分。預覽最終效果。CSS:#main{background: #F1F1F1;width: 400px;margin: 0 auto;padding: 10px;}#dynloadarea{width: 400px;height: 300px;}

這是一個比較典型的三行二列布局，每列高度（事先並不能確定哪列的高度）的相同，是每個設計師追求的目標，按一般的做法，大多採用背景圖填充、加JS指令碼的方法使列的高度相同，本文要介紹的是採用容器溢出部分隱藏和列的負底邊界和正的內補丁相結合的方法來解決列高度相同的問題。先看代碼：#wrap{overflow: hidden;}#sideleft, #sideright{padding-bottom: 32767px;margin-bottom: -32767px;

由於各瀏覽器（IE、gecko、opera......)對CSS的渲染方式都有所不同，造成顯示效果不同，所以可通過對其載入不同CSS的方法來解決，下面介紹下二種方法來實現，不一定很實用，難的玩一把。純CSS方式Code.box{ width: 20em; height:20em; background: #369;}/*--gecko核心--*/@media all and (min-width: 0px){ box{ background: #CC0000; }}/

這是一個完全用CSS實現的中英文雙語導覽功能表，無指令碼和圖片，初始時，菜單語言是英文，當滑鼠移至上方在菜單上時，其變成中文，當然你也可以反過來做。實現原理：XHTML<ul id="nav"><li><a class="bi" href="index.html">Home<span>首　頁</span></a></li></ul>從上面代碼可以看出，中文放在 span

當前頁面--比如說現在的頁面是首頁，那麼在導覽列上首頁的色彩等和其他欄目有所不 同，用以給瀏覽者一個明顯的指示。下面來說下具體的做法，菜單的基本實現和一般的CSS菜單沒多大區別，著重說下如何 實現當前頁。設菜單有5個欄目：home、about、products、services、contact，分別給每個欄目一 個ID，m1-m5，CSS可寫成如下： #home #nav li#m1 a,#about #nav li#m2 a,#products #nav li#m3 a,#services #

作者：Stu Nicholls   翻譯：forestgan資訊這是 cssplay的站長根據其最近創作的dropdown and flyout menus而改編而成的，當滑鼠按順序懸停在菜單上時，可在同一位置顯示不同的頁面，可在Opera, IE5.5, IE6, IE7 beta,Safari 1.3.2 & Firefox.中正確顯示和工作，不相容Mac

這是div+css布局中經常會碰到的基礎問題，個人覺得採用背景圖填充的方法，還是比較簡單和切實可行的。最終效果。CSS：body{background: #EDEDED;font-size: 70%;font-family: Arial, Helvetica, sans-serif;line-height: 130%;color: #666666;margin: 0;padding: 0;text-align: center;}#layout{width: 760px;/*--for

原理將二個相同而色彩不同的文字重合在一起，通過分別給其加 clip 屬性，使上面和下面的文字被剪下位置不同，從而產生二種不同的色彩。clip : 摘自蘇沈小雨CSS手冊clip : auto | rect ( number number number number ) 參數： auto : 　對象無剪下rect ( number number number number ) :

http://space.itpub.net/183473/viewspace-473227   關於CSS對各個瀏覽器安全色已經是老生常談的問題了, 網路上的教程遍地都是.以下內容沒有太多新穎, 純屬個人總結, 希望能對初學者有一定的協助.一、CSS HACK以下兩種方法幾乎能解決現今所有HACK.1, !important隨著IE7對!important的支援, !important