CSS

BS架構的企業級應用中，當一個表格列數較多時，使用者一個常見的需求就是把前面幾個重要的列固定住，這樣拖動捲軸時固定的列會方便使用者查看資料，使用者體驗很好。一些重量級的JS組件庫也都有這個功能，那麼有沒有更簡單的方法實現這個功能呢？這個需求常見的解決方案是使用表格拼接的方法，這個方案如果要製作靜態網頁，或者功能簡單的動態網頁面，邏輯比較簡單，技術上也不複雜，很容易實現，但是如果要做成組件，動態功能較多的話，就需要寫大量的冗餘代碼，難以維護，甚至於一個簡單的功能，都需要寫很多的代碼，比如事件處理等

方法一：用觸發手機的橫屏和豎屏之間的切換的事件複製代碼 代碼如下:window.addEventListener("orientationchange", function() {// 宣布新方向的數值alert(window.orientation);}, false);方法二：監聽調整大小的改變複製代碼 代碼如下:window.addEventListener("resize", function() {// 得到螢幕尺寸 (內部/外部寬度，內部/外部高度) }, false);&

本文執行個體講述了JS+CSS實現帶小三角指引的滑動門效果。分享給大家供大家參考。具體如下：這是一款JS+CSS帶小三角指引的滑動門，有朋友說在IE6下看不到效果，其實能看到，因為那個小三角顏色比較淡，有時候因顯示器的原因看不太清，其實這個顏色是自己可以控制的，改一下就行了，帶三角指引後，使整個滑動門的結構更清淅，導向性更合理。運行效果截圖如下：線上示範地址如下：http://demo.jb51.net/js/2015/js-css-sj-move-menu-style-codes/具體代碼如下

本文執行個體講述了JS+CSS實現的可摺疊展開多級菜單效果。分享給大家供大家參考。具體如下：這是一款JS+CSS實現的多級摺疊菜單，可摺疊展開/合攏，沒有引用任何的外部檔案，也沒有用到圖片，雖然簡單，而且還有些粗糙，但核心的東西已經展示給大家了，正在研究摺疊菜單的朋友們，這一個小例子可能正是你需要的，好好研究一下吧。運行效果截圖如下：線上示範地址如下：http://demo.jb51.net/js/2015/js-css-simple-zdzk-menu-style-codes/具體代碼如下：&

本文執行個體講述了JS+CSS實現分類動態選擇及移動功能效果代碼。分享給大家供大家參考，具體如下：這是一個類似選項卡功能的選擇外掛程式，與普通的TAb區別是加入了動畫效果，多用於商品類網站，用作商品分類功能，不過其它網站也可以用，點擊運行一下你會知道它的奧妙，它用JavaScript類比出了Flash動畫的效果，很貼切。運行效果截圖如下：線上示範地址如下：http://demo.jb51.net/js/2015/js-css-cha-type-move-style-demo/具體代碼如下：<

本文執行個體講述了JS+CSS實現簡單的二級下拉導覽功能表效果。分享給大家供大家參考。具體如下：這是一款CSS配合JavaScript實現二級下拉導覽功能表，好像CSS要配合JS才能寫出好效果來，本款菜單同樣用到了JS，菜單目前支援兩級，下拉導航是我們經常用的一種菜單形式，把這個修改一下你就能用了，結構挺簡單，相信你會做好的。運行效果截圖如下：線上示範地址如下：http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/具

本文執行個體講述了JS+CSS實現電子商務網站導航模板效果代碼。分享給大家供大家參考。具體如下：這是一款JS+CSS實現的電子商務網站導航模板，二級導覽功能表，超強美化，超強實用性，分享給大家。運行效果截圖如下：線上示範地址如下：http://demo.jb51.net/js/2015/js-css-dzsw-wen-nav-style-codes/具體代碼如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

蘋果開關按鈕效果~~關閉時                                      開啟時html複製代碼

我看最近微博流行CSS置中技術，我看了幾編資料寫的都不多好，於是抽時間把相關資料整合了，具體內容如下。點擊此處下載源碼效果展示：要求:1.儘可能相容更多瀏覽器，這裡相容到ie7,ie6不支援max-*就不考慮了。2.瀏覽器尺寸變化時，圖片總是等比例展開或縮放。3.包裹圖片的div也是響應式的，並且每個div的尺寸是一樣的。4.圖片始終保持水平垂直置中。5.圖片的行列數不變，這裡一直都是3*3.下面來搞定一個個要求。滿足要求1意味著這裡要盡量不使用進階瀏覽器才有的屬性，比如進階瀏覽器置中常用的什麼

本文執行個體講述了JS+CSS實現簡單滑動門的方法。分享給大家供大家參考。具體如下：這是一款超簡約設計的滑動門菜單，滑鼠放到主菜單上，裡面的內容會跟著變化，實際上本示範是一個範例，從代碼中的注釋你就能感覺到，每一步都有注釋，對學習JavaScript和CSS都有協助，也為你以後寫出比這更漂亮、更實用的滑動門做鋪墊。運行效果截圖如下：線上示範地址如下：http://demo.jb51.net/js/2015/js-css-jdhd-menu-style-codes/具體代碼如下：<!DOCT

本文執行個體講述了JS+CSS實現另類帶提示效果的豎嚮導航菜單。分享給大家供大家參考。具體如下：這是一款JS+CSS打造另類帶提示的豎嚮導航菜單，覺得挺不錯，只是美工水平有限，有興趣的朋友就請繼續完善吧。運行效果截圖如下：線上示範地址如下：http://demo.jb51.net/js/2015/js-css-alert-txt-nav-menu-demo/具體代碼如下：<html><head><title>帶提示的豎嚮導航菜單</title>&l

本文執行個體講述了JS+CSS實現仿觸屏手機撥號盤介面及功能類比的方法。分享給大家供大家參考。具體如下：首先來看一下運行效果圖：具體實現代碼如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">&

本文執行個體講述了js+CSS實現類比select控制項的下拉式功能表效果。分享給大家供大家參考。具體如下：這是一個JS+CSS技術實現的Select控制項效果，類比出來的，比預設的Select更漂亮，有了這個模板，你修改Select就更方便了，由此你也可以將其製作成CSS下拉式功能表，在相容性方面暫未測試，在IE8下沒問題。運行效果截圖如下：線上示範地址如下：http://demo.jb51.net/js/2015/js-css-select-control-style-codes/具體代碼如

本文執行個體講述了JS+CSS實現TreeMenu二級樹形菜單。分享給大家供大家參考。具體如下：這是一款二級樹形菜單樣本：CSS TreeMenu ，非常漂亮的樹形菜單，用在網站右側比較合適。運行效果截圖如下：線上示範地址如下：http://demo.jb51.net/js/2015/js-css-treemenu-2l-menu-codes/具體代碼如下：<!doctype html public "-//W3C//DTD XHTML 1.0

本文執行個體講述了JS+CSS實現六級網站導航主菜單效果。分享給大家供大家參考。具體如下：這是一款JS+CSS實現支援6級的網站導航主菜單，級級相信夠大家用了，外觀藍色風格，也是使用最多的一種菜單顏色，而且菜單的相容性非常好，支援IE6\IE7\IE8，Firefox、GG瀏覽器等不同核心的主流瀏覽器。運行效果截圖如下：線上示範地址如下：http://demo.jb51.net/js/2015/js-css-6l-web-nav-menu-demo/具體代碼如下：<!DOCTYPE

本文執行個體講述了JavaScript+CSS實現仿天貓側邊網頁菜單效果。分享給大家供大家參考。具體如下：這是一款自己寫的仿天貓的菜單效果，二級分類的功能已經實現，但沒有美化，留著用的朋友自己完善吧，JS功能已經實現，滑鼠移在主分類上，二級分類向右伸出展開，目前淘寶網、天貓購物、京東都在用的導覽功能表特效，測試時候請先點擊一下菜單，主菜單就顯示出來了。運行效果截圖如下：線上示範地址如下：http://demo.jb51.net/js/2015/js-css-ftamil-web-menu-sty

本文執行個體講述了JS+CSS實現的經典tab選項卡效果代碼。分享給大家供大家參考。具體如下：這是一款經典的JavaScript+CSS tab選項卡代碼，由以前的一款改寫而成，自認為不錯的東西，發上來分享吧。運行效果截圖如下：線上示範地址如下：http://demo.jb51.net/js/2015/js-css-jd-tab-cha-style-codes/具體代碼如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/

本文執行個體講述了JS+CSS實現自適應選項卡寬度的圓角滑動門效果。分享給大家供大家參考。具體如下：這是一款JS+CSS打造自適應寬度的圓角滑動門，這裡的圓角主要是靠一張背景圖片去實現，所指的寬度是滑動門上的導航的寬度，不管文字有多少，它都會一直順著下去，不會被內容所撐破，相容性方面，相容IE6/7/8,Firefox未試，應該也相容

本文執行個體講述了JS+CSS實現仿msn風格選項卡效果代碼。分享給大家供大家參考，具體如下：這是一款來自MSN網站的選項卡，清新淡藍色風格，新聞類、資訊類、文章類網站都比較適合使用，代碼擴充性高，W3C標準設計，相容IE、Firefox等多種瀏覽器，整體效果非常不錯。運行效果截圖如下：線上示範地址如下：http://demo.jb51.net/js/2015/js-css-f-msn-style-menu-demo/具體代碼如下：<!DOCTYPE html PUBLIC

本文執行個體講述了js+css實現超簡潔的二級下拉式功能表效果代碼。分享給大家供大家參考。具體如下：這是一個很簡潔的CSS+JavaScript二級菜單，沒有使用過多的修飾素材，盡量不調用外部圖片，簡潔大方，而且便於二級開發完善，最初是一個政府網站上的菜單。運行效果截圖如下：線上示範地址如下：http://demo.jb51.net/js/2015/js-css-simple-2jxl-menu-style-codes/具體代碼如下：<!DOCTYPE html PUBLIC "-//W3