制作网页常用的50种CSS工具

2016-02-19 23:56 1 1 收藏

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐制作网页常用的50种CSS工具,赶紧看过来吧!

【 tulaoshi.com - Web开发 】

50款CSS工具,包含,CSS网格和布局工具,CSS 优化工具,CSS 菜单生成工具,CSS 按钮生成器,CSS 圆角生成器,CSS 框架,CSS Sprites生成器,CSS 排版工具以及 CSS 表单生成器。

网格和布局

The 1KB CSS Grid

新颖的 CSS 网格工具,可用于简化内容管理系统的页面模板,轻巧易用。

Variable Grid System

基于 960px 的常规CSS网页布局工具,用于快速生成基本的 CSS 网格。

Grid Designer 2

可控性强,选项丰富的网格系统,支持 CSS 在线即时输出。

Design By Grid PNG Grid Generator

生成用于CSS网格的 PNG 图片,以方便地用作 PSD 或 HTML/CSS 设计背景,免除手工制作网格的麻烦。

nP: Grid Generator

用于设计布局结构,制定列、边缘、间距等参数。

YAML Builder

可视化,快捷的标准 XHTML 页面框架生成工具,但对 IE6 兼容欠佳。

GRIDINATOR

简单定制基于网格的CSS布局工具,可自定义多种参数。

Grid System Generator

生成适用于 960.gs,Golden Grid,1KB Grid 的网格布局,也可生成基本的通用网格。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

YUI: CSS Grid Builder

来自 Yahoo 的网格工具,用于创建基础布局,统一浏览器表现。

Blueprint Grid CSS Generator

帮助你创造更灵活的 CSS 蓝图,包括 grid.css、compressed.css 和 grid.png 文件。

CSS Grid Calculator

快速设计页面布局,以多种方式构造网格。对于页面元素在浏览器中的表现方式,提供了精确的视觉反馈。

Layout generators – www.pagecolumn.com

使用 CSS 2.0 技术生成 1-5 列的布局输出。

Dynamic 4 Column Layout Generator

可控性强的 4 栏式页面布局生成器。

CSS Layout Generator – CSS Portal

创建自适应或固定宽度栏式布局,可指定或者像素或百分比。

templatr

模板生成器,可在线创建单独的设计方案。无需了解任何 HTML 和 CSS 知识。

CSS Source Ordered 1-3 Columned Page Maker

生成 1-3 栏式页面的 CSS 代码。

CSS Creator

创建自适应宽度或固定宽度的浮动栏式布局。

CSS 优化和样式生成

Online CSS Optimiser/Optimizer

输入网址或复制并粘贴到样式输入框中,一键提交即可优化。

Free CSS Template Code Generator

三栏式布局生成工具,同步生成 HTML 和 CSS 代码。

CSS Builder – Generate Styles on the Fly

只需填写表格数据,单击生成,并复制代码到样式表。

Firdamatic: the Design Tool for the Uninspired Webloggers

通过完成一份简单的表格输入来创建和定制布局,轻而易举。

Wordpress Theme Generator

在线定制独一无二的 WordPress 主题。只需改变颜色,设置,布局等参数,完成后保存并下载。

CSS Formatter and Optimiser/Optimizer

CSS 整形与优化工具,基于 CSSTidy 构建。

XHTML/CSS Markup Generator

通过框架加快 XHTML+CSS 设计工作,界面直观,语法缩短。

CSS 菜单工具

13 Styles – CSS Menu Generator

简单的 CSS 菜单生成器。

CSS Menu Builder

提供 30 多款横向菜单,700 多款垂直菜单,多种菜单组合方式应有尽有。

Pure CSS Menu.com

纯粹的 CSS 菜单生成工具。

CSS Menu Generator

多种现成 CSS 菜单可供选择,支持样式自定义。

My CSS Menu Generator – Horizontal, Vertical, Drop Down, DHTML CSS Menu

自定义创建浏览器兼容的 CSS 菜单。导航内容,方向性,均可控制。

CSS Menu Generator – Webmaster Toolkit

CSS 控制的文本形式的菜单有比图片形式的菜单具有更强的搜索引擎友好性。

CSS Menu Generator – CSS Portal

提供了较为丰富的 CSS 菜单模板。

List-O-Matic

著名的 List-O-Matic 可轻松制作最基本的 CSS 导航菜单,向导性的制作步骤更容易上手。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)CSS 按钮

CSS Button and Field Tool

傻瓜化地配置样式和参数,即可一键生成代码。

Navigation Tab Menu Generator

菜单参数可调,改动刷新后可预览。

CSS 圆角

RoundedCornr: Rounded Corner and Gradient Generator

产生一个基本CSS圆角。附带四个圆角图像文件和必要的 HTML 及 CSS 代码。

Spiffy Corners – Purely CSS Rounded Corners

简单生成 CSS 和 HTML 以满足创建无锯齿圆角,而无需使用图像或 JavaScript 脚本。

Spiffy Box – Simple Rounded Corner CSS Boxes

简单的 CSS 圆角框生成器。

Cornershop – Rounded Graphics for CSS Box Corners

生成圆角的 HTML 和 CSS 代码的CSS工具。

CSS 框架

CSS Frame Generator

构造基本的 CSS 框架,加强 CSS 编写的规格化。

CSS 表格

CSS Table Generator 0.1

简单的 CSS 表格生成工具。

HTML and CSS Table Border Style Wizard

配置选项丰富的可视化表格样式设计工具。

HTML Table Style Generator

简单配置即可设计美观的表格样式的CSS工具。

CSS Sprites

CSS Sprite Generator

提供源图片上传,重复图片合并,大小调整,拼合输出,CSS 输出等选项的控制,支持简体中文。

CSSSprites.com

把背景图片的拼合任务交给 CSSSprites.com,它会帮你组图并给出单个图片的定位。

CSS 文本和字体

CSS Type Set

简单的文本样式配置工具。

CSS 表单

Quick Form Builder

快速简洁的CSS表单创建工具,只需定义字段名称。

Form Style Web 2.0 Generator

参数详尽的CSS表单配置向导,生成的表单样式代码可直接下载。

来源:https://www.tulaoshi.com/n/20160219/1630898.html

延伸阅读
标签: Web开发
我们在网页教学网中向大家介绍过很多CSS经验与技巧,这些东西都发布在http://www.webjx.com/css/的文章中,相信对大家是有一些帮助与启发的。有些习惯显得尤为重要,今天与您分享六个CSS习惯。因为习惯其实是会变的,所以只能写最近的。这些习惯都跟技术无关,如果不遵守,也不会出错。但是我觉得良好的习惯会体现一个人的素质。 一、...
CSS命名规范 一.文件命名规范 全局样式:global.css; 框架布局:layout.css; 字体样式:font.css; 链接样式:link.css; 打印样式:print.css; 二.常用类/ID命名规范 页 眉:header 内 容:content 容 器:container 页 脚:footer 版 权:copyright 导 ...
标签: Web开发
在进行浮动布局时,大多数人都深知,在必要的地方进行浮动清理:div style=clear:both;/div。 例如: div style=background:#666;       div style=float:left; width:30%; height:40px;background:#EEE; Some Content/div /div 此时预览此代码,我们会发现最外层的父元素float container,并没有显示。这...
标签: Web开发
CSS标签重置 对于XHTML+CSS布局起着一个重要的决定性作用,它是提高页面浏览器兼容性的第一步。 那么什么是标签重置呢? 顾名思义,就是对HTML中的所有标签属性重置,因为每个浏览器都有一个自己默认的CSS文件,对HTML中的所有的标签进行定义,以便没有定义CSS的页面能够正常显示在页面,页面在加载的时候如果没有找到自带的CSS文件,浏...
标签: Web开发
       从前没有网页设计师,最早的网页都只有文字,后来有Html,便开始有了网页设计师。 如今有很多人都片面的认为网页设计师从事的是平面设计的工作,但如果不懂得html,很难 算得上是一流的网页设计师。         Html让纯文本的网页变得丰富起来,图形图像、音频、视频...

经验教程

110

收藏

91
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部