文本域CSS样式在线生成

CSS的出现,大大方便了我们对网站的控制及美观程度。今天给大家提供一个在线生成文本域CSS样式的网站,该站点提供可以随意改变和更换文本形状,不需要会写CSS代码,只要看图操作就可以生成你想要的文本排列样式。下面我们先看一幅图片,然后秦爱简单介绍一下文本域控制的步骤。

css 文本控制

1、文本域控制方法

css文本域样式选项

在一个可视化的文本框中,你可以看到两条带绿头儿的黑线,点击绿头儿就可以将其拉到任意位置,在黑线上单击就会生成绿色可控制的点,可以根据你的想法无限生成。锚点越多,做出的效果越平滑。Reset left line 意思是恢复左边的线到最初形状,即直线;Reset right line 意思是恢复右边的线到最初直线形状;Hide lines 意思是隐藏线,用于你在调整形状后观看整体效果。I'm done 是所有工作都做完后生成代码用的,暂时不用。

2、个性化选项

css样式参数

在这个Options中,我们可以看到三个部分,根据参数你可以灵活定制,以适应自己的网页内容。

◆ Width of content area - 是文本域中内容的宽度

◆ Height of content area - 是文本域中内容的高度

◆ Apx Line-height of text - 是文本的线高

◆ Text-Align - 文本对齐方式

◆ Font-family - 文本字体类型

◆ Font-size - 字体尺寸

◆ URL of Tracing Image - 跟踪图像的URL地址

◆ Content 中共有两个p和/p,一个是左边线控制的,另一个是右边线控制的。你可以将p和/p中的内容换成需要的内容。

◆ Update setting 是更新设置,当你对上述选项调整之后,点击一下更新即可。

3、生成你需要的CSS样式及JS代码

css样式代码

这是最后一步,你可以生成你纯CSS样式代码及带CLASS的CSS样式,(CSS/XHTML)如果你需要Javascript也可以将其生成JS代码,当你点击了 I'm done 或更新设置后,代码就已经生成,你直接复制其中的代码对你需要控制的文本域进行控制了。

通过CSS样式来控制文本域无论从网站加载速度及方便性都提供了不错的思路,尤其对一些需要进行特效处理的文本更为实用。如果您对秦爱的介绍还有不清楚的地方,也可以看官方的视频,不过是英文的哦。

【现有评论11条,我也说两句

  • quote  1. Hugh | http://www.quhuashuai.com |
  • 我对CSS的了解还属于初步,连自己改个模板都需要点时间,呵呵,今年准备好好学学php和css,最起码自己能更明白一点。
  • 2008-1-6 8:24:46
  • quote  6. 没有篱笆的家园 | http://ialive.cn/index.php |
  • 文本个性化显示,图片行不行啊...显示成不同形状,也很有意思
  • 2008-1-6 14:16:25
  • quote  7. cyg | http://www.chenyg.cn/blog |
  • 这个网站还不错对初级学习者比较适用;不过要想学好CSS,最好还是多看看教程全面学习。
  • 2008-1-6 14:57:52
  • quote  9. 麦田里的守望者 | http://www.2000xg.com/ |
  • 这东西简直就是对CSS不太懂的朋友的宝典啊,呵呵!
  • 2008-1-6 15:21:06
  • quote  10. 怕瓦落地 | http://www.pawaluodi.com |
  • 呵呵,那些想浓浓校内代码的“同学们”应该可以好好利用利用了!
  • 2008-1-7 12:38:55

发表评论:

  • RSS订阅地址  通过邮箱订阅最新文章
  • 谷歌订阅 Blogines订阅
  • 抓虾订阅 鲜果订阅

站内搜索

最近发表

© 2004 秦爱网志 对部分内容保留所有权,博客程序归 Z-Blog 所有 辽ICP备05002435号