10个给力的在线Web设计开发工具介绍

桃扇骨 2022-09-29 05:21 177阅读 0赞

引用：[http://www.javaeye.com/news/19474][http_www.javaeye.com_news_19474]

1.在线文本生成器  
  
BlindTextGenerator：对设计师来说，这是一个简单又好用的文本生成小工具。内含许多种字体，可设置字符的大小，数量，样式，段落的数量及对齐方式等，还可以很方便且精确地调节文本区块的大小。

![596a0905-db81-34c7-b6de-416a1346a355.jpg][]

[http://www.blindtextgenerator.com/lorem-ipsum][http_www.blindtextgenerator.com_lorem-ipsum]  
  
Fillerati：很有设计感和风格现代的文本生成器。

![5e0526cb-6794-3b4b-9b1c-9923864b21d8.jpg][]

[http://www.fillerati.com/][http_www.fillerati.com]  
  
2.CSS生成器  
  
Border Radius：没有比它更简单的了。进入网站在矩形一角的输入框里输入数值，就可以生成圆角矩形的CSS代码。

![f5e61347-868c-3f61-9f96-d5b161b571ad.jpg][]

[http://border-radius.com/][http_border-radius.com]  
  
CSS3 Gradient Generator：超好用的CSS渐变代码生成器，也很容易上手。

![13f71366-64f6-3259-b621-41091e3dd6b4.jpg][]

[http://gradients.glrzad.com/][http_gradients.glrzad.com]  
  
Ultimate CSS Gradient Generator：熟悉Photoshop的话，对这款CSS渐变代码生成器会感到很亲切，当然它的功能也很强大。

![b0e8049e-b863-3e87-a86b-2f062bde5676.jpg][]

[http://www.colorzilla.com/gradient-editor/][http_www.colorzilla.com_gradient-editor]  
  
CSS Tricks Button Maker：一个按钮CSS代码生成器，没说的，实在是太方便了！  
你可以自如定义按钮大小，颜色，边界半径，渐变，背景，边界，悬停，活动状态，设置好之后点击你的按钮，就可以拷贝CSS代码了。

![0616a5b5-b123-38b0-8fa0-54a08a4020b1.jpg][]

[http://css-tricks.com/examples/ButtonMaker/][http_css-tricks.com_examples_ButtonMaker]  
  
3.排版工具  
  
Baseline CSS：对于包含大量文本的网站它是一个非常得力的工具。

![37195100-482e-3dba-85ec-13c852d6b157.jpg][]

[http://baselinecss.com/][http_baselinecss.com]  
  
TypeTester：可以方便快捷地测试最佳字体排版的工具！提供三种方案对照，并有安全字体列表。当你找到了完美的设置方案，还可以获取相应的CSS。

![bc3df389-4d99-3c01-9d94-f019993ecbba.jpg][]

[http://www.typetester.org/][http_www.typetester.org]  
  
4.其它工具  
  
Favicon.cc：这是个用于生成通常出现在浏览器状态栏或浏览器标签上的小图标（用于识别一个网站）的工具。完成后只需下载.ico文件并把它拖到Web服务器根目录下即可。很快很方便。

![0a4de501-89b4-3fe8-826a-721a9a981446.jpg][]

[http://www.favicon.cc/][http_www.favicon.cc]  
  
JSONLint：简单易用的JSON验证器。只需把代码拷贝粘贴到文本区域即可。它甚至还可以支持仅输入网址（而不是代码）的验证。

![0ba2d0ce-266c-3a45-9c46-bba566b6cda7.jpg][]

[http_www.javaeye.com_news_19474]: http://www.javaeye.com/news/19474
[596a0905-db81-34c7-b6de-416a1346a355.jpg]: http://dl.javaeye.com/upload/attachment/386607/596a0905-db81-34c7-b6de-416a1346a355.jpg
[http_www.blindtextgenerator.com_lorem-ipsum]: http://www.blindtextgenerator.com/lorem-ipsum
[5e0526cb-6794-3b4b-9b1c-9923864b21d8.jpg]: http://dl.javaeye.com/upload/attachment/386609/5e0526cb-6794-3b4b-9b1c-9923864b21d8.jpg
[http_www.fillerati.com]: http://www.fillerati.com/
[f5e61347-868c-3f61-9f96-d5b161b571ad.jpg]: http://dl.javaeye.com/upload/attachment/386611/f5e61347-868c-3f61-9f96-d5b161b571ad.jpg
[http_border-radius.com]: http://border-radius.com/
[13f71366-64f6-3259-b621-41091e3dd6b4.jpg]: http://dl.javaeye.com/upload/attachment/386613/13f71366-64f6-3259-b621-41091e3dd6b4.jpg
[http_gradients.glrzad.com]: http://gradients.glrzad.com/
[b0e8049e-b863-3e87-a86b-2f062bde5676.jpg]: http://dl.javaeye.com/upload/attachment/386615/b0e8049e-b863-3e87-a86b-2f062bde5676.jpg
[http_www.colorzilla.com_gradient-editor]: http://www.colorzilla.com/gradient-editor/
[0616a5b5-b123-38b0-8fa0-54a08a4020b1.jpg]: http://dl.javaeye.com/upload/attachment/386617/0616a5b5-b123-38b0-8fa0-54a08a4020b1.jpg
[http_css-tricks.com_examples_ButtonMaker]: http://css-tricks.com/examples/ButtonMaker/
[37195100-482e-3dba-85ec-13c852d6b157.jpg]: http://dl.javaeye.com/upload/attachment/386619/37195100-482e-3dba-85ec-13c852d6b157.jpg
[http_baselinecss.com]: http://baselinecss.com/
[bc3df389-4d99-3c01-9d94-f019993ecbba.jpg]: http://dl.javaeye.com/upload/attachment/386621/bc3df389-4d99-3c01-9d94-f019993ecbba.jpg
[http_www.typetester.org]: http://www.typetester.org/
[0a4de501-89b4-3fe8-826a-721a9a981446.jpg]: http://dl.javaeye.com/upload/attachment/386623/0a4de501-89b4-3fe8-826a-721a9a981446.jpg
[http_www.favicon.cc]: http://www.favicon.cc/
[0ba2d0ce-266c-3a45-9c46-bba566b6cda7.jpg]: http://dl.javaeye.com/upload/attachment/386625/0ba2d0ce-266c-3a45-9c46-bba566b6cda7.jpg