« 上一篇下一篇 »

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