發表文章

目前顯示的是有「css」標籤的文章

jQuery - css - dynamic change style

圖片
最近工作上所開發的網頁系統,打算把切換介面風格的功能做上去,於是研究了一下如何動態改變CSS並且套用,發現還挺簡單的~ 只需要置換網頁所Link的CSS file即可 ,以下弄個實際範例,透過jQuery來操作: 首先我們建立一個簡單的網頁 <html> <head> <title>Sample</title> <link rel="stylesheet" type="text/css" href="style_1.css" class="pagestyle" id="style_1" /> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script type="text/javascript"> </script> </head> <body> <div class="outborder" id="div_1"> <div class="inline">Sample text</div> </div> </body> </html> 這個網頁所使用的CSS file為 style_1.css ,其內容如下: /*  *  Style 1  */ body { text-align:center; } .outborder { padding:5px;  background:red ; } .inline { padding:5px;  color:black; font-size:40px; font-weight:bold;  background:yellow ; } 接下來我們建立第二種風格,檔案為 style_2.css...

HTML - CSS - footer floating toolbar bottom 瓢浮置底的工具列

圖片
哈哈 前幾天花了不少時間用 HTML footer bottom 等相關字眼在那邊找怎麼做置底的工具列... 怎樣看都不是我要的那種, 結果今天用 html floating toolbar bottom 終於找到了! 而且還很簡單! 只要把你要置底的東西 ex. #footer { width:100%; height: 100px ; position:fixed; bottom:0px; z-index:1; } 就成功啦 另外要注意的是, 因為這東西是會蓋過下面的內容, 所以你得讓下面內容的底部也空出該footer高度的空間出來, 以免看不到蓋住的內容... ex. #page { padding:0 0 100 0; } PS: #page為我頁面內容的容器(div)