Profil de 维江ㄨ 鲫 鱼 汤 ㄨPhotosBlogListesPlus Outils Aide

Blog


怎样制作滚动文本框

原创:不知

转自:❀美丽驿站❀

整理:寂语

 

滚动文本框很实用,也很简单,代码如下:

<DIV align=center
style='
background-color: transprant;
border: solid 2px black;
width: 355px;
height: 200px;
overflow: auto;
scrollbar-face-color: #889B9F;
scrollbar-shadow-color: #3D5054;
scrollbar-highlight-color: #C3D6DA;
scrollbar-3dlight-color: #3D5054;
scrollbar-darkshadow-color: #85989C;
scrollbar-track-color: #95A6AA;
scrollbar-arrow-color: #FFD6DA;
'>日志文字</DIV>

返回普通编辑模式,你会发现并没有出现滚动条,不要着急,看看下面的部分代码解释第5条……

部分代码解释:

  1. align=center 表示框内内容居中对齐,缺省情况下为左对齐,即,如果框内文字需要左对齐,那就可以把align=center删掉……
  2. background-color: transprant; 表示框内背景色为透明,需要改颜色的话,把transprant改成16进制颜色值即可,例如#ffffff……
  3. border: solid 2px black表示文本框的边线状态,solid表示实线,可选的值有dashed(虚线),double(双线),outset等等,和前面的类似, 2px black分别表示边线粗细和颜色,可自行调整(black和#000000效果一样)……
  4. width: 355px; height: 200px; 分别表示滚动文本框的宽和高,自行调整,我的日志宽度是355px……
  5. overflow: auto; 这句比较关键,auto表示"自动",即框内内容不需要占据height: 200px这么高的高度时,就不会出现滚动条,一旦超过了,滚动条就会出现,多出的部分通过下拉滚动条来显示,overflow也设置的值还有scroll,即强制出现滚动条,但我不推荐用该值,因为这样也会强制出现横向的滚动条,很难看,用auto就可以了……
  6. 后面那部分代码,就是设置滚动条的颜色状态,根据自己的需要和喜好来调整,比较有用的是scrollbar-face-color: #889B9F;这句,其他部分不改也问题不大,看你的要求了……

将代码调整好后,返回普通编辑模式,双击滚动文本框,就可以进入框内编辑文字或图片,再次进入代码模式,会发现文本框代码有所变动,不过变化不太大,可以看懂……

示例:

<DIV align=center
style='
background-color: transprant;
border: solid 2px black;
width: 355px;
height: 200px;
overflow: auto;
scrollbar-face-color: #889B9F;
scrollbar-shadow-color: #3D5054;
scrollbar-highlight-color: #C3D6DA;
scrollbar-3dlight-color: #3D5054;
scrollbar-darkshadow-color: #85989C;
scrollbar-track-color: #95A6AA;
scrollbar-arrow-color: #FFD6DA;
'>日志文字</DIV>

如果您有问题,请点击这里进行提问

Commentaires (29)

Veuillez patienter...
Le commentaire entré est trop long. Raccourcissez-le.
Vous n'avez rien entré. Réessayez.
Il est actuellement impossible d'ajouter votre commentaire. Réessayez plus tard.
Pour ajouter un commentaire, tu dois avoir l'autorisation de tes parents. Demander l'autorisation
Tes parents ont désactivé les commentaires.
Il est actuellement impossible de supprimer votre commentaire. Réessayez plus tard.
Vous avez dépassé le nombre maximal de commentaires qu'il est possible d'envoyer le même jour. Réessayez dans 24 heures.
Votre compte a pu laisser les commentaires désactivés parce que nos systèmes indiquent que vous risquez d'arroser d'autres utilisateurs de messages. Si vous pensez que votre compte a été désactivé par erreur, contactez l'assistance en ligne de Windows Live.
Effectuez la vérification de sécurité ci-dessous pour finaliser l'envoi de votre commentaire.
Les caractères entrés pour la vérification de sécurité doivent correspondre à ceux de l'image ou du fichier audio.

Pour ajouter un commentaire, connectez-vous avec votre identifiant Windows Live ID (si vous utilisez Messenger ou Xbox LIVE, vous avez un identifiant Windows Live ID). Connectez-vous


Vous n'avez pas d'identifiant Windows Live ID ? Inscrivez-vous

Image de Anonyme
与你同在here a écrit :
非常实用,感谢
27 Déc.
Image de Anonyme
sz-shirleen a écrit :
谢谢ING
15 Déc.
Image de Anonyme
倪雷-kenny a écrit :
看明白了,非常感谢~~~
5 Déc.
Image de Anonyme
海底的冰 a écrit :
我也加上了 谢谢!
29 Nov.
Image de Anonyme
海底的冰 a écrit :
我也去试下看!
29 Nov.
Image de Anonyme
烟烟一吸 a écrit :
又学点东西~~谢谢。在这里感觉很好~
21 Nov.
Image de Anonyme
real-jessieq a écrit :
预览后不行。。。
8 Nov.
Image de Anonyme
wendymumu77 a écrit :
滚动文本框里 是帖不了图片吗 我试了很多次 还是不行,帮帮忙哦
~
30 Oct.
Image de Anonyme
shy_1204 a écrit :
我试了,很好,你是个好老师呀
3 Oct.
Image de Anonyme
永远的森森 a écrit :
字体大小怎么调
1 Oct.
Image de Anonyme
靡靡猫猫※虎斑猫猫 a écrit :
搞好了,谢谢哦,但是怎么样才能改变滚动框内字体的颜色呢,怎么样既能添加背景图案又可以有滚动框框呢?要多少字才可以会自动出现滚动框框呢?
28 Sept.
Image de Anonyme
靡靡猫猫※虎斑猫猫 a écrit :
唉,寄语,试了好多次,就是搞不定啊,一直出现框框都是四条直线,没有滚动的效果,怎么会这样,跟我详细说说好吗?
28 Sept.
Image de Anonyme
mango夕梨 a écrit :
偶也来借用一下
27 Août
Image de Anonyme
一旧cloud a écrit :
scrollbar大小能调节吗?
27 Août
Image de Anonyme
千祈知玲 a écrit :
请问要如何制作并排的滚轮?
22 Août
Image de Anonyme
"♂月月‖ a écrit :
感谢你``借用下``又学会了许多新东西哈~
你真是个勤劳的好人!(这句话我说了不只一次了!)你想的太周到了哈~
19 Août
Image de Anonyme
终末之冬 a écrit :
十分感谢。寂语前辈.n_n.
18 Août
Image de Anonyme
頭紋字Da a écrit :
怎么样弄有背景的滚动文本框呢?
17 Août
Image de Anonyme
lucky-yoyo a écrit :
太好用了 ^_^
16 Août
Image de Anonyme
久美子KUMIKO(雨楓) a écrit :
寂語…我用了…怪怪的…沒有置中…躲在邊邊啦
13 Août

Rétroliens (1)

L'URL de rétrolien de ce billet est :
http://king19120.spaces.live.com/blog/cns!29F140C794516526!921.trak
Blogs Web qui font référence à ce billet