在线编写html和css,6种编写HTML和CSS的最有效的方法

写HTML5和CSS3,以及JavaScript,前端开发者有了大大的用武之地。大家都在用很多的工具和技术来武装自己,以加快前段的开发。

本文分享了6中最有效的方法,希望能提供你的效率,为你节约时间。

1. Dynamic CSS(动态 CSS)

d56a52c2fc3e7d8bf6f941de386ac110.png

如果你想加速你的CSS代码编写,那么你需要学习并掌握动态CSS。大部分的动态CSS增加了nested riles,variables, mixins, selector inheritance功能,这里提高代码的利用率。

2. HTML snippets(HTML 片段)

f27547da6f8c512c9e55b0b5c7993644.png

使用代码片段是个编写HTML代码的一个很快的方法。推荐Zen Coding和HAML。首先,它会让你提速很快,其次,可以规避一些人为错误,因为所有的代码都是被测试和正确生成的。

3. CSS reset(CSS 重设)

e26b74244224e4cf6f0b8f37f972fc8a.png

CSS reset的优势是避免了浏览器的不兼容。推荐:Eric Meyer's CSS reset 和YUI.

4. CSS Grid layout(网格布局)

2756f7e137dc650e42dbfbce6bab88f4.png

不少的开发者,都没有使用CSS 网格布局。网格布局的理念来自于传统的印刷出版,在web上,网格布局在杂志类型模板/网站中非常重要。该方法已经被大量的开发者证明是提升产品设计速度的有效途径。

CSS 网格布局具有很好的跨平台支持等特性,下面再介绍一些相关的资源:

5. HTML/CSS 编辑器

de5f61ae93b8b388ed8643fec1a44fc6.png

你需要一个好的代码编辑器,除了notepad之外,还有很多,它们各具特色。比如coda的ftp引擎十分的稳定。

6. 其他在线工具

6791344cd56ec4a49a3fc98d2dcc5c53.png

下面的一些工具,还是可以帮助你省下那么一点的时间的。

Backfire: 保存firebug的CSS变化。

Live.js: 更新CSS。

CSS Auto Reload: 同Live.js,但可设置重载时间。

Markup Generator: 基于HTML代码,生成CSS标签。

Coda Clip: Coda 片段.

如果你刚刚学习HTML和CSS,那么还是建议扎扎实实地来手写代码。如果你已经有了坚实的基础,那么就尝试上述的方法吧。

Enjoy coding :)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值