java范例

          java

          DIV滾動條

          百度空間這幾天的精華帖子
          2006年08月29日 星期二 下午 04:06
          【改編】各模塊添加滾動條實例 + 參數詳解

          作者:眾網友+王士偉
          出處:緣定滄桑居


          在“友情鏈接”處添加滾動條只需下面一條代碼即可:

          #m_links{overflow-y:auto;height:250px}

          不過,加一些參數可以讓滾動條更有個性,和頁面搭配得更完美。下面就是我的頁面各種滾動條的詳細代碼,大家可以參照著修改:

          文章列表的滾動條:

          #m_blog{scrollbar-face-color: #E100E1;
           scrollbar-shadow-color: maroon;
           scrollbar-highlight-color: white;
           scrollbar-3dlight-color: #E100E1;
           scrollbar-darkshadow-color:#E100E1;
           scrollbar-arrow-color:#E100E1;
           scrollbar-base-color: #E100E1;
           scrollbar-track-color: #E100E1;
           overflow-y:auto;height:1194px;
           filter: chroma(color=#E100E1);}  /*文章列表的滾動條*/

          友情鏈接的滾動條:

          #m_links{scrollbar-face-color: #E100E1;
           scrollbar-shadow-color: maroon;
           scrollbar-highlight-color: white;
           scrollbar-3dlight-color: #E100E1;
           scrollbar-darkshadow-color:#E100E1;
           scrollbar-arrow-color:#E100E1;
           scrollbar-base-color: #E100E1;
           scrollbar-track-color: #E100E1;
           overflow-y:auto;height:823px;
           filter: chroma(color=#E100E1);}  /*友情鏈接的滾動條*/

          文章分類的滾動條:

          #m_artclg{scrollbar-face-color: #E100E1;
           scrollbar-shadow-color: maroon;
           scrollbar-highlight-color: white;
           scrollbar-3dlight-color: #E100E1;
           scrollbar-darkshadow-color:#E100E1;
           scrollbar-arrow-color:#E100E1;
           scrollbar-base-color: #E100E1;
           scrollbar-track-color: #E100E1;
           overflow-y:auto;height:250px;
           filter: chroma(color=#E100E1);} /*文章分類的滾動條*/

          最新評論的滾動條:

          #m_comment{scrollbar-face-color: #E100E1;
           scrollbar-shadow-color: maroon;
           scrollbar-highlight-color: white;
           scrollbar-3dlight-color: #E100E1;
           scrollbar-darkshadow-color:#E100E1;
           scrollbar-arrow-color:#E100E1;
           scrollbar-base-color: #E100E1;
           scrollbar-track-color: #E100E1;
           overflow-y:auto;height:458px;
           filter: chroma(color=#E100E1);} /*最新評論的滾動條*/

          參數說明:

          1、overflow-y : 設置當對象的內容超過其指定高度時如何管理內容;overflow-x : 設置當對象的內容超過其指定寬度時如何管理內容。

          參數:
          visible:擴大面積以顯示所有內容
          auto:僅當內容超出限定值時添加滾動條
          hidden:總是隱藏滾動條
          scroll:總是顯示滾動條

          2、height : 設置滾動條的高度(修改其后數值即可)。

          3、滾動條顏色參數設置:

          scrollbar-3d-light-color 設置或檢索滾動條亮邊框顏色
          scrollbar-highlight-color 設置或檢索滾動條3D界面的亮邊(ThreedHighlight)顏色
          scrollbar-face-color  設置或檢索滾動條3D表面(ThreedFace)的顏色 
          scrollbar-arrow-color  設置或檢索滾動條方向箭頭的顏色
          scrollbar-shadow-color  設置或檢索滾動條3D界面的暗邊(ThreedShadow)顏色
          scrollbar-dark-shadow-color 設置或檢索滾動條暗邊框(ThreedDarkShadow)顏色
          scrollbar-base-color  設置或檢索滾動條基準顏色

          空間模塊巧移動 + 文字快速插鏈接

          一、首先說說空間模塊巧移動:

          改變空間主頁各模塊的排布位置可以在空間中依次點擊:設置-高級設置-自定義模板-開始自定義

          然后鼠標拖動各個欄目的標題處,移動到你想要的位置,松手即可。

          但是如果你曾經把一個模塊拖動到“文章列表”下面,而后來發表了許多文章,想把下面的那個模塊拖回來是就會發現,無法移動到上面。

          其實有個簡單的方法:
          先到下面鼠標左鍵按住想要拖動的模塊的標題欄,接著按鍵盤上的“Pg Up”(上頁)鍵,就會發現頁面向上翻了,而模塊還在鼠標指針上。
          按幾次達到想要的位置后,松開鼠標左鍵,該模塊就會移到你想要的地方去了^_^


          二、然后我們說說文章快速插鏈接:

          我們在文章中經常會遇到插入超鏈接的情況,直接貼網址雖然也可以自動轉換為超鏈接,但是我覺得就影響了文章的美觀。
          所以我比較喜歡用文字鏈接,但是每次都用鼠標點上面的設置鏈接按鈕也未免太慢了……

          用過微軟FRONT PAGE的朋友應該知道,該軟件插入超鏈接是有快捷鍵的,我在空間里測試里一下,的確可以用!

          所以寫日志時想給文字加超鏈接,先將鏈接指向的網址復制一下,然后選中想要加的文字,最后按快捷鍵“CTRL+K”——在彈出的提示框中粘貼剛復制的地址,確定即可。 




           
          2
          其實模塊拖動還有個更好的技巧:

          1, 依次點擊空間的:設置-高級設置-自定義模板-開始自定義—內容模塊
          2, 把所有的模塊都取消,確定
          3, 再把你要的模塊都添加回來,確定
          4, 現在所有的模塊里都是空的(只是顯示為空,你的文章等其實都在),要拖動很方便的。
            
           


          對于CTRL+K插入超鏈接的方式,只有在IE瀏覽器下支持,其它瀏覽器(例如:firefox、maxthon)不支持。

          2 常用插入圖片位置的代碼及效果圖
          圖片顯示位置——文章列表1:
          #m_blog div.tit{font-size:14px;font-weight:bold; background:url(
          http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=clock&tformat=24&timezone=GMT+0800&ft=0) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; }

          效果:
          貼子相關圖片:
          3 回復:【原創】常用插入圖片位置的代碼及效果圖
          圖片顯示位置——文章列表:
          #m_blog div.tit{font-size:14px;font-weight:bold; line-height:24px; text-indent:120px; background:url(
          http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=clock&tformat=24&timezone=GMT+0800&ft=0) no-repeat; }

          效果:
          貼子相關圖片:
          4 回復:【原創】常用插入圖片位置的代碼及效果圖
          圖片顯示位置——文章列表:
          #tabline{top:89px; background:url(
          http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=clock&tformat=24&timezone=GMT+0800&ft=0) no-repeat bottom; padding-bottom: 32px; margin-bottom: 6px; }

          效果:
          貼子相關圖片:
          5 回復:【原創】常用插入圖片位置的代碼及效果圖
          圖片顯示位置——相冊下面:
          #m_album div.image{text-align:center; background:url(
          http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=clock&tformat=24&timezone=GMT+0800&ft=0) no-repeat bottom; padding-bottom: 45px; margin-bottom: 1px; }

          效果:
          貼子相關圖片:
          6 回復:【原創】常用插入圖片位置的代碼及效果圖
          圖片顯示位置——每個友情鏈接下面:
          #m_links div.line{margin-top:5px;line-height:8px;border-top:1px solid #F4C1B5; background:url(
          http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=clock&tformat=24&timezone=GMT+0800&ft=0) no-repeat bottom; padding-bottom: 16px; margin-bottom: 10px; }

          效果:
          貼子相關圖片:
          7 回復:【原創】常用插入圖片位置的代碼及效果圖
          圖片顯示位置——每個最新評論下面:
          #m_comment div.item{color:#000000;font-size:12px; background:url(
          http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=clock&tformat=24&timezone=GMT+0800&ft=0) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; }

          效果:
          貼子相關圖片:
          8 回復:【原創】常用插入圖片位置的代碼及效果圖
          圖片顯示位置——每個文章分類下面:
          #m_artclg div.line{margin-top:5px;line-height:8px;border-top:1px solid #F4C1B5; background:url(
          http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=clock&tformat=24&timezone=GMT+0800&ft=0) no-repeat bottom; padding-bottom: 16px; margin-bottom: 10px; }

          效果:
          貼子相關圖片:
          9 回復:【原創】常用插入圖片位置的代碼及效果圖
          圖片顯示位置——其他區域:
          #comm_info div.line{margin-top:5px;line-height:8px;border-top:1px solid #BBC1C6; background:url(
          http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=clock&tformat=24&timezone=GMT+0800&ft=0) no-repeat bottom; padding-bottom: 22px; margin-bottom: 6px; }

          效果:
          貼子相關圖片:
          10 回復:【原創】常用插入圖片位置的代碼及效果圖
          新加圖片顯示位置——個人控制條中間:
          #tabline{margin-top:-131px;right:5px;line-height:8px; background:url(
          http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=date&ft=3&dformat=yymmdd) no-repeat bottom; padding-bottom: 40px; margin-bottom: 10px}/*個人控制條日期顯示*/

          效果:
          貼子相關圖片:

          posted on 2008-04-29 13:44 王波 閱讀(2808) 評論(3)  編輯  收藏

          Feedback

          # re: DIV滾動條 2009-04-14 17:08 11

          #m_artclg{scrollbar-face-color: #E100E1;
          scrollbar-shadow-color: maroon;
          scrollbar-highlight-color: white;
          scrollbar-3dlight-color: #E100E1;
          scrollbar-darkshadow-color:#E100E1;
          scrollbar-arrow-color:#E100E1;
          scrollbar-base-color: #E100E1;
          scrollbar-track-color: #E100E1;
          overflow-y:auto;height:250px;
          filter: chroma(color=#E100E1);} /*文章分類的滾動條*/
            回復  更多評論   

          # re: DIV滾動條[未登錄] 2014-04-14 13:57 w

          sdfsd  回復  更多評論   

          # re: DIV滾動條asdd 2014-11-04 16:12 asd

          asd  回復  更多評論   


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 蒙自县| 元阳县| 江城| 左云县| 通渭县| 普定县| 古丈县| 永济市| 马鞍山市| 裕民县| 萝北县| 罗山县| 五台县| 如皋市| 寻乌县| 延吉市| 武胜县| 永春县| 依兰县| 平罗县| 榕江县| 上饶县| 常宁市| 呼玛县| 土默特右旗| 洪泽县| 道真| 龙口市| 镇巴县| 高州市| 兴安盟| 扶沟县| 改则县| 陇南市| 乌拉特前旗| 攀枝花市| 沂南县| 息烽县| 特克斯县| 平和县| 西乌珠穆沁旗|