月度归档： 2007年9月

各种样式的滚动文本框

发表在 Mood一条评论

來源：爬山虎的世界

【演示】  

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

①DIV：未设置宽度、高度、溢出；溢出默认为可见，宽度和高度自动调整

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

②DIV：设置宽度、高度，未设置溢出；溢出默认为可见，高度设置无效并自动调整

③DIV：设置宽度、高度，溢出为滚动；始终显示滚动条

④DIV：设置宽度、高度，溢出为自动；根据内容多少决定是否显示滚动条

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⑤DIV：设置宽度、高度，溢出为自动，假透明滚动条样式1；根据内容多少决定是否显示滚动条，利用颜色实现假透明效果1，适用于文字

⑥Table/DIV：设置宽度、高度，溢出为自动，背景图片、假透明滚动条样式1；根据内容多少决定是否显示滚动条，利用颜色实现假透明效果1，不适用于背景图片

⑦Table/DIV：设置宽度、高度，溢出为自动，背景图片、真透明滚动条样式1；根据内容多少决定是否显示滚动条，利用滤镜实现真透明效果1，适用于文字和背景图片

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⑧DIV：设置宽度、高度，溢出为自动，假透明滚动条样式2；根据内容多少决定是否显示滚动条，利用颜色实现假透明效果2，适用于文字

⑨Table/DIV：设置宽度、高度，溢出为自动，背景图片、假透明滚动条样式2；根据内容多少决定是否显示滚动条，利用颜色实现假透明效果2，不适用于背景图片

⑩Table/DIV：设置宽度、高度，溢出为自动，背景图片、真透明滚动条样式2；根据内容多少决定是否显示滚动条，利用滤镜实现真透明效果2，适用于文字和背景图片

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⑾DIV：增加“word-break:keep-all;”属性，即可实现横向滚动条。

⑿DIV/DIV：嵌入另外一个DIV，并且对他们设置“DIRECTION”属性，即可实现左侧滚动条。

⒀Table/DIV/DIV：左侧真透明滚动条和背景图片的综合运用。

 

【HTML代码】

 

①
<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; BORDER-LEFT: 1px solid; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>

②
<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>

③
<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: scroll; BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>

④
<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>

⑤
<DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: #216dad; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #216dad; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>

⑥
<TABLE cellSpacing=0 cellPadding=0 background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw border=0>
<TBODY>
<TR>
<TD>
<DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: #216dad; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #216dad; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>

⑦
<TABLE cellSpacing=0 cellPadding=0 background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw border=0>
<TBODY>
<TR>
<TD>
<DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; FILTER: chroma(COLOR=#ffffff); SCROLLBAR-HIGHLIGHT-COLOR: #216dad; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #216dad; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>

⑧
<DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>

⑨
<TABLE cellSpacing=0 cellPadding=0 background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw border=0>
<TBODY>
<TR>
<TD>
<DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>

⑩
<TABLE cellSpacing=0 cellPadding=0 background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw border=0>
<TBODY>
<TR>
<TD>
<DIV style="BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; FILTER: chroma(COLOR=#ffffff); SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>

⑾
<DIV style="word-break:keep-all;BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>

⑿
<DIV style="DIRECTION: rtl;BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT: 80px">
<DIV style="DIRECTION: ltr;">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></DIV>

⒀
<TABLE cellSpacing=0 cellPadding=0 background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw border=0>
<TBODY>
<TR>
<TD>
<DIV style="DIRECTION: rtl;BORDER-RIGHT: #216dad 1px solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px; FILTER: chroma(COLOR=#ffffff); SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px; SCROLLBAR-ARROW-COLOR: #216dad; BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT: 80px">
<DIV style="DIRECTION: ltr"><P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></DIV></TD></TR></TBODY></TABLE>

 

 

【说明】

v 必须在html编辑状态下编辑代码。

v 简单的文本框是通过DIV实现的，包含背景图片的文本框是通过将DIV嵌入到Table中实现的。

v 主要通过对DIV的Style属性来控制样式，主要设置如下：

　　overflow（溢出控制）：visible（默认，可见）、auto（自动）、scroll（显示滚动条）；

　　width（宽度）：数值；

　　height（高度）：数值；

　　color（字体颜色）：色彩代码；

　　font-size（字体大小）：数值；

　　line-height（行高）：数值；

　　border（边框）：宽度、类型和颜色，类型主要支持以下几种：none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset；

　　font-weight（字体粗细）：normal、bold、bolder、lighter；

　　font-family（字体类型）：Arial、Tahoma、Verdana、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆；

　　background（背景颜色）：色彩代码；

　　scrollbar-base-color,scrollbar-face-color,scrollbar-track-color,scrollbar-darkshadow-color,scrollbar-highlight-color,scrollbar-shadow-color,scrollbar-3dlight-color,scrollbar-arrow-color（滚动条各部分的颜色）：色彩代码；

　　filter:chroma(COLOR=转换成透明的颜色)（chroma过滤器）：色彩代码，该颜色将转换成透明效果；

　　word-break（断字）：normal（默认，正常断字）、keep-all（严格不断字）、break-all（严格断字）；

　　direction（文字方向）：ltr（默认，从左向右）、rtl（从右向左）。

v 辅助工具

　　在线滚动条配色器：通过本工具可以方便地在线设置滚动条样式。地址1 地址2  

什麽叫觸目驚心？如果你不曾體會過……

发表在 Mood一条评论

也許你見過這些圖片，可是，不管怎麽樣，你卻是應該把他看完，發人深省，我們應該反思，
社會何以變成現在這樣？是社會質變了，還是我們都麻木了，你覺得社會現在平等嗎？不，爲什麽會這樣，
不要說你看過多少多少遍，每一次看我都會陷入沉思，如果那是我……

轉：

真的縴夫，（那有幾多愛？）
天府的脊梁，當如此之多的圖片擺在我面前時，
那種強烈的的視覺衝擊和久違的震撼深深的打動了我，
我感……
>>>閲讀全文|非MSN用戶留言

MBTI職業性格測試

发表在 Mood留下评论

人的性格傾向，可能分開地使用擁有二隻手寫是同樣，只寫的所有也許寫，但日常地用途能與另一更好比較。MBTI根據榮耀標準心理類型理論成為，已經當前成為了當局的性格測試， Psytopic特別地製造了這個網上測試，希望可能幫助有些朋友。歡迎人力資源部門朋友，這個測試在就業做廣告和任務的實驗性用途; 可以也同時採取個人專業行業計劃分析參考工具;為之後幫助很好測試朋友，如果您想法有不適當或遺漏職業，歡迎一起完善這個測試。-psytopic.com

MBTI（Myers-Briggs Type Indicator），一種類強迫塑造，自已報告-像性格評估測試，與在獲取信息、牌子方面等等政策制定、治療生活心理活動規則和性格類型。

由美國的心理學家Katherine Cook Briggs (1875-1968)和她的心理學家女兒Isabel Briggs Myers根據瑞士著名精神分析科學家Carl G. Jung（榮格)，但是心理類型理論和他們關於人的性格區別長期觀察和研究成為。在長期到達了……
>>>閲讀全文|非MSN用戶留言

我的頭髮，無語了……

发表在 Mood留下评论
天哪，沒想到頭髮又變短了~隻怪我一時衝動，主要是理髮師太差了，
一直都在聽我指揮，可惜啊~
說我又說不明白，真暈了，以後再也不嘗試了……還是去了以前的那個店……
一進去那，我就知道完了……“啊？不看你穿的衣服我還以爲是個女的呢……”，我暈（這叫中性美，嘿嘿……）。
“還沙宣？”哈哈~我還説是我設計的，是那個理髮師不行……然後就……
改口了，“你看你跟個老太太似的”，天哪~
那是一個損啊，不過還好，總算我還很滿意，哈哈……嘗試的後果，以後可不敢了~
雖然短了，不過還好~呵呵~
回了趟我親愛的一中，那可是我親愛的母校~雖然很是厭惡，但是也還是有美好的回憶啊……
最近聽了不少音樂，朋友推薦了一首Westlife的《The Rose》還不錯~
而自己呢，則大多數聽的是日文歌曲，大塚 愛、宇多田光、熊木杏里……
當然也由中文歌，不過都不是新專輯。總之還不多，看的電影不多，其實也就是沒看……也不知爲什麽，看不下去呢~
還是比較欣賞久石讓的音樂~很好聽……

MSN Spaces播放器

发表在 Mood7条评论
凡是MSN Spaces网頁上如果有Microsoft Media Player播放器，都可利用一下腳本代碼實現一些簡單的應用。
 只要降下列所需的代碼，複製到瀏覽器的地址欄内輸入，即可得到想要的效果。
 
功能  立即獲得當前播放歌曲或影片的名稱。
代碼  javascript:PTMediaPlayer.controls.Pause();window.alert(PTMediaPlayer.currentMedia.getItemInfo("Author")+ " – " + PTMediaPlayer.currentMedia.getItemInfo("Title"));PTMediaPlayer.controls.Play();
功能  顯示當前播放媒體的來源地址。
代碼  javascript:PTMediaPlayer.controls.Pause();window.alert(PTMediaPlayer.currentMedia.sourceURL);PTMediaPlayer.controls.Play();
功能  立即下載當前播放的媒體。
代碼  javascript:PTMediaPlayer.controls.Pause();location.href=PTMediaPlayer.currentMedia.sourceURL;PTMediaPlayer.controls.Play();

功能  將目前播放媒體的來源地址立即複製到剪貼簿（dipboard）。
代碼  javascript:PTMediaPlayer.controls.Pause();window.clipboardData.setData("Text",PTMediaPlayer.currentMedia.sourceURL);PTMediaPlayer.controls.Play();

加入收藏夾的方法：
    1、另外打開瀏覽器IE，隨便打開网址，將當前頁面加入收藏夾，名稱自己任意起。
    2、複製上面的腳本代碼。
    3、在收藏夾剛才收藏的那個鏈接上單擊鼠標右鍵，選擇“屬性”，彈初新窗口，將腳本粘貼到[URL]後面的文本框中（覆蓋原先的网址），單擊[確定]按鈕，會出現詢問你“是否保留這一目標”的對話框，選擇[是]即可。
使用收藏夾的方法：
    1、打開有著Microsoft Media Player的MSN Spaces任何网誌。
    2、打開IE菜單[收藏夾]剛才收藏的网址，即可得到想要的效果。