社區成員注意:同一主題下連續灌水回復3帖封ID,超過3帖封IP。詳細請看 [社区成员积分与等级制度]
社区成员积分与等级制度 常见的问题收集汇总 违规、恶意灌水处罚公告 版主、超级版主申请帖
     
1/1页1 跳转到查看:143
发新话题 回复该主题
1. 将鼠标移动到页面左上角待出现光标后,再慢慢移动到光标上,看帖更清爽
2. 键盘左右键可以进行前后翻页操作
帮助

带滚动条的div

带滚动条的div

(一)右侧滚动条
实例:

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

⑴ ⑵ ⑶ ⑷ ⑸ ⑹ ⑺ ⑻ ⑼ ⑽ ⑾ ⑿ ⒀ ⒁ ⒂ ⒃ ⒄ ⒅ ⒆ ⒇
⒈ ⒉ ⒊ ⒋ ⒌ ⒍ ⒎ ⒏ ⒐ ⒑ ⒒ ⒓ ⒔ ⒕ ⒖ ⒗ ⒘ ⒙ ⒚ ⒛
ⅰ ⅱ ⅲ ⅳ ⅴ ⅵ ⅶ ⅷ ⅸ ⅹ ⅺ ⅻ
Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ
㊀ ㊁ ㊂ ㊃ ㊄ ㊅ ㊆ ㊇ ㊈ ㊉
㈠ ㈡ ㈢ ㈣ ㈤ ㈥ ㈦ ㈧ ㈨ ㈩
№ ⅛ ¼ ⅜ ½ ⅝ ¾ ⅞
+ - × ÷ ± + - = ≡ ≠ ≒ ≈ ≌ ~ ~﹢ ╳ ⊕ Θ % ‰ % ∵ ∴ ∷ ∏ < > ≦ ≧ ≤ ≥﹤ ﹥∩ ∪ ∈ ¢ ° ⊥ ∠ ∟ ⊿ △ ㏒ ∑ ∂ ∫∮∞( 〔 ﹙﹚ 〕) { ﹛﹜} √ ㄨ


语句:
<DIV align=center>
<DIV style='color: blue; background-color: white; border: green solid 1px; width: 420px; height: 100px;
overflow: scroll; scrollbar-face-color: #ABCDEF; scrollbar-shadow-color: #6666FF; scrollbar-highlight-color: #CCCCCC; scrollbar-3dlight-color: #6666FF; scrollbar-darkshadow-color: #6699CC; scrollbar-track-color: #99CCFF; scrollbar-arrow-color: #99CCFF;'>
日志图文内容
</DIV></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é
© ® ℗ ℃ ℉ Ω ㏎




语句:
<DIV align=center>
<DIV style="BORDER: black solid 1px; OVERFLOW: auto; WIDTH: 420px; HEIGHT: 100px; DIRECTION: rtl" >
<DIV style="DIRECTION: ltr;" align=left>日志图文内容
</DIV></DIV></DIV>

Style 语句解释:
Direction: rtl —— 是将滚动条放置到左边的关键
Direction: ltr —— 是确保文字输入方式还是从左到右
其中滚动条样式、颜色都使用了默认值,所以这个例子除了将滚动条放置到了左侧以外,基本可以说是采用了最简单的滚动条语句。


(三)透明的滚动条
实例:

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


语句:
<DIV align=center>
<DIV style='color: navy; background-color: pink; border: orange solid 1px; width: 420px; height: 100px;
overflow: auto; scrollbar-face-color: pink; scrollbar-shadow-color: pink; scrollbar-highlight-color: pink; scrollbar-3dlight-color: pink; scrollbar-darkshadow-color: pink; scrollbar-track-color: pink; scrollbar-arrow-color: navy;'>
日志图文内容
</DIV></DIV>

Style 语句解释:
其实很简单,就是把所以滚动条的颜色都设成和背景色一样,比如这个例子中的 Pink。只保留 Scrollbar-arrow-color 为不同于背景色的颜色,比如例子中的 Navy。这样用鼠标点击两个向上、向下的小箭头即可滚动图文框中的内容。
附件:您所在的用户组无法下载或查看附件

TOP

 
1/1页1 跳转到
发表新主题 回复该主题