带滚动条的div

（一）右侧滚动条

实例：

数字、数学符号

⓪ ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳
❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾

⑴ ⑵ ⑶ ⑷ ⑸ ⑹ ⑺ ⑻ ⑼ ⑽ ⑾ ⑿ ⒀ ⒁ ⒂ ⒃ ⒄ ⒅ ⒆ ⒇

⒈ ⒉ ⒊ ⒋ ⒌ ⒍ ⒎ ⒏ ⒐ ⒑ ⒒ ⒓ ⒔ ⒕ ⒖ ⒗ ⒘ ⒙ ⒚ ⒛

ⅰ ⅱ ⅲ ⅳ ⅴ ⅵ ⅶ ⅷ ⅸ ⅹ ⅺ ⅻ

Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ

㊀ ㊁ ㊂ ㊃ ㊄ ㊅ ㊆ ㊇ ㊈ ㊉

㈠ ㈡ ㈢ ㈣ ㈤ ㈥ ㈦ ㈧ ㈨ ㈩

№ ⅛ ¼ ⅜ ½ ⅝ ¾ ⅞

+ - × ÷ ± ＋ － ＝ ≡ ≠ ≒ ≈ ≌ ~ ～﹢ ╳ ⊕ Θ % ‰ ％ ∵ ∴ ∷ ∏ ＜ ＞ ≦ ≧ ≤ ≥﹤ ﹥∩ ∪ ∈ ￠ ° ⊥ ∠ ∟ ⊿ △ ㏒ ∑ ∂ ∫∮∞（ 〔 ﹙﹚ 〕） ｛ ﹛﹜｝ √ ㄨ

语句：

日志图文内容

Style 语句解释：

Color: blue —— 前景文字颜色为蓝色

Background-color: white —— 背景颜色为白色

Border: black solid 1px —— 黑色实线边框，宽度为 1px

Width: 420px; Height: 100px —— 滚动窗口宽度 420px，高度 100px

Overflow: scroll —— 总是显示滚动条；如果将 scroll 改为 auto，则仅当日志内容超过边框限制时，才显示滚动条（不需要下面的滚动条就用这个命令）；如果将 sroll 改为 hidden，则滚动文字窗口内不显示任何滚动条（特殊用途，以后讲吧）

其他语句均为滚动条颜色设置，大家可以自己动手改改看。

---

（二）左侧滚动条

实例：

特殊中文字符

㊐ ㊊ ㊎ ㊍ ㊌ ㊋ ㊏ ㊑ ㊒ ㊓ ㊔ ㊕ ㊖ ㊗ ㊘ ㊜ ㊝ ㊞ ㊟ ㊠ ㊡ ㊢ ㊩ ㊪ ㊫ ㊬ ㊭ ㊮ ㊯ ㊰ ㊚ ㊛ ㊙ ㊣ ㊤ ㊥ ㊦ ㊧ ㊨

㈱ ㍿ 囍 卐 卍

特殊西文字符

ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ

Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ø ù ú û ü ý þ ÿ ō ǒ ǎ

À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö Ø Ù Ú Û Ü Ý Þ ß ε ф μ ξ ζ ω Ω ψ Ψ Café

© ® ℗ ℃ ℉ Ω ㏎

语句：

日志图文内容

Style 语句解释：

Direction: rtl —— 是将滚动条放置到左边的关键

Direction: ltr —— 是确保文字输入方式还是从左到右

其中滚动条样式、颜色都使用了默认值，所以这个例子除了将滚动条放置到了左侧以外，基本可以说是采用了最简单的滚动条语句。

---

（三）透明的滚动条

实例：

图形符号

♂ ♀ ♠ ♣ ♥ ♦ ♤ ♡ ◇ ♧ ❤ ❥ ☜ ☞ ☎ ☏ ♨ ☺ ☻ ﹡ ＊ ¤ ☼ ☀ ☽ ☾ ☆ ★ ☄ ☁ ☂ ✚ ✟ ✙ ✣ ✤ ✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✪ ☆ ★ ❂ ❁ ❀ ✿ ✱ ✲ ✳ ❃ ✾ ✽ ✼ ✻ ✺ ✹ ✸ ✷ ✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ✱ ☸ ❣ ❦ ❧ ✁ ✄ ☪ ☣ ☢ ☠ ☭ ❣ ♈ ☮ ✈ ✡ ✓ ✔ √ ☑ ☒ ✗ ✘ ㄨ ✕ ✖ ✖ ✎ ✏ ✐ ✌ ✍ ✉ ↂ ☯ ♛ ♕ ﹎ ₪ ¡ Þ ௫ ღ 〝〞ミ灬?? ツஐ ? ? ﻬ L ☊ ☋ ♋ ☌ ☍ Ξ ぷ 々∞ o'.'o ☃ ☹ 〠 〄 ♝ ♞ ♟ ºº 큐 〒 ≡ ⁂ и ァ γ ㄒ ︶︿ しノж ю Ю 乀 ◖◗ Ш ๑ ۩ ۞ ˇ 彡

语句：

日志图文内容

Style 语句解释：

其实很简单，就是把所以滚动条的颜色都设成和背景色一样，比如这个例子中的 Pink。只保留 Scrollbar-arrow-color 为不同于背景色的颜色，比如例子中的 Navy。这样用鼠标点击两个向上、向下的小箭头即可滚动图文框中的内容。

[@more@]

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/106943/viewspace-926978/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/106943/viewspace-926978/