6种编写HTML和CSS的最有效的方法

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

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

1. Dynamic CSS(动态 CSS)

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

2. HTML snippets(HTML 片段)

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

3. CSS reset(CSS 重设)

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

4. CSS Grid layout(网格布局)

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

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

5. HTML/CSS 编辑器

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

6. 其他在线工具

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

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

时间: 2024-08-09 17:08:41

6种编写HTML和CSS的最有效的方法的相关文章

编写HTML和CSS几点心得

HTML代码优化 表单域用fieldset包起来,并用legend说明其用途(注意在css初始化的时候把fieldset的border设为0,把legend的display设为none) 每个input标签要用label来标注文本,并为每个input设id,用for关联. 为了提高搜索引擎友好性,要减少table标签使用.但是对于呈现二维数据,table却是首选,当然我们的优化方法是表格的标题用<caption></caption>包裹,表头用<thead></t

配置eclipse编写html/js/css/jsp/java时自动提示

配置eclipse编写html/js/css/jsp/java时自动提示步骤: 1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist 修改Auto Activation triggers for java的值为:zjava   点击apply按钮 如图: 2.继续打开JavaScript→Editor→Content Assist 修改Auto Activation triggers for JavaScript的值为:zjs  

css 清除浮动的各种方法

1.为什么要清除浮动 在网页中,DIV一般都是嵌套的,外面称为窗口,里面的DIV存放内容,如果不浮动的话,如下面这段代码<div style=”background:#ccc;”> <div style=”float:left; width:30%; height:40px;background:#333; “> Content here</div> </div>本来我们期望看到的是,外面背景为#ccc的层包含了里面背景为#333的层,但实际上,外面的层在显

Windows提供了两种将DLL映像到进程地址空间的方法(隐式和显式)

调用DLL,首先需要将DLL文件映像到用户进程的地址空间中,然后才能进行函数调用,这个函数和进程内部一般函数的调用方法相同.Windows提供了两种将DLL映像到进程地址空间的方法: 1. 隐式的加载时链接 这种方法需要DLL工程经编译产生的LIB文件,此文件中包含了DLL允许应用程序调用的所有函数的列表,当链接器发现应用程序调用了LIB文件列出的某个函数,就会在应用程序的可执行文件的文件映像中加入一些信息,这些信息指出了包含这个函数的DLL文件的名字.当这个应用程序运行时,也就是它的可执行文件

960网格布局框架(前端css框架)的使用方法

960框架总宽960px CSS框架已经出现很长时间了,关于这些框架的用处也被我们讨论了很多遍了.有人说,CSS框架不够先进,还有人说这些框架大大的节省了他们的开发时间.在此,我们将不再讨论这个问题. 前段时间,我了解到了CSS框架.经过对Malo.BluePrint和960做了实验对比后,我得出一个结论:我最喜欢960CSS框架. 本教程将解释这个框架的基本原理,这样你就可以用960来快速进入开发. 基本原理 你必须知道一些基本原理来“学习这个框架是如何工作的”.你可以通过实验(或者是用fir

Windows提供了两种将DLL映像到进程地址空间的方法

调用DLL,首先需要将DLL文件映像到用户进程的地址空间中,然后才能进行函数调用,这个函数和进程内部一般函数的调用方法相同.Windows提供了两种将DLL映像到进程地址空间的方法: 1. 隐式的加载时链接 这种方法需要DLL工程经编译产生的LIB文件,此文件中包含了DLL允许应用程序调用的所有函数的列表,当链接器发现应用程序调用了LIB文件列出的某个函数,就会在应用程序的可执行文件的文件映像中加入一些信息,这些信息指出了包含这个函数的DLL文件的名字.当这个应用程序运行时,也就是它的可执行文件

Ajax清除浏览器js、css、图片缓存的方法

做东东时都是把图片在服务器的地址存放在数据库里面,然后到浏览器中显示,但是后来发现了两个问题. 第一:为了安全起见,js是无法读取本地的图片的,不然你写一个js,岂不是可以获取任何人电脑里面的文件了. 第二:图片存在的是在服务器的硬盘上面,而不是在客户的硬盘里面,所以也是取不到的 后来在网上找方法,找的方法,都是各种转换二进制到xml中,的各种高大上的答案,然后本人又实在太懒了,就自己想了一个 方法,就是利用BufferedImage这个类. 开始 首先说说我的思路,就是把本地的图片,加载到内存

css实现三角的一些方法

css实现三角没有想象中的那么难,只要明白border的各种属性的意思就很好明白css三角是如何实现的. 一下是几个很简单的例子: css三角形状的制作: css样式: .triangle{ width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid red; }  方法解释:定义 左右两边边框透明,下边框不定义,上边框定义颜色即

关于css清除元素浮动的方法总结(overflow clear floatfix)

作者:文刀日月: 来源:http://www.cnblogs.com/dtdxrk/p/3555438.html 关于css清除元素浮动的方法总结(overflow clear floatfix) 在前两天的一个面试中考官问我web中清除浮动的一些css常用方法,我很轻松的答出了: 1.overflow:hidden 2.clear:both 3.floatfix类 然后问题就来了,考官接着问'为什么overflow:hidden'可以清除浮动?这下就把我问住了.写了这么多年css只是单纯的解决