• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 编写HTML和CSS的6种最有效的方法

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含HTML,CSS等相关知识,佚名 希望在学习及工作中可以帮助到您

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

1. Dynamic CSS(动态 CSS)

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

2. HTML snippets(HTML 片段)

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

3. CSS reset(CSS 重设)

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

4. CSS Grid layout(网格布局)

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

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

    Which CSS Grid Framework should you use for web design 960 Grid Layout YUI Grid layout Blue Print Grid layout 5. HTML/CSS 编辑器

    你需要一个好的代码编辑器,除了notepad之外,还有很多,它们各具特色。比如coda的ftp引擎十分的稳定。当然,你也可以登录开源中国社区检索更多的开源代码编辑器。

      Notepad++ (windows, free) Aptana (all platforms, free) Bluefish (all platform, free) Coda (mac, $99) Textmate (mac, $57) 6. 其他在线工具

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

        Backfire: 保存firebug的CSS变化。 Live.js: 更新CSS。 CSS Auto Reload: 同Live.js,但可设置重载时间。 Yahoo Grid Builder: YUI网格创建。 Markup Generator: 基于HTML代码,生成CSS标签。 Coda Clip: Coda 片段.

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

        Enjoy coding :)

        原文:http://www.queness.com/post/8004/6-most-effective-methods-to-code-html-and-css

您可能想查找下面的文章:

  • html编写edm时注意事项小结(一般发邮件需要注意的地方)
  • 浅谈.html,.htm,.shtml,.shtm的区别与联系
  • html、css基础注意点(前端必看篇)
  • 关于HTML面试题全部汇总
  • 符合w3c标准的html标准需要注意的地方详解
  • 深入理解HTML5在移动开发方面的发展现状
  • 浅谈HTML5与HTML4的10个关键区别
  • 分享15个最佳的HTML/CSS设计和开发框架
  • 自己在实践中遇到的一些前台基础(html、css)
  • 用ps两分钟做个xhtml+css的网站首页

相关文章

  • 2017-08-06比Bootstrap还更强大的前端框架:Toolkit
  • 2018-08-23高手的学习笔记!给Android TV做设计要注意的16个细节
  • 2018-08-23旅行照千篇一律?你可能需要试试这4个新思路
  • 2018-08-2320年前的Windows 98,有一套不俗的新用户引导流程
  • 2018-08-23一招教你让交互方案更靠谱!超好用的目标导向设计法
  • 2018-08-23表格行高如何设定?来看腾讯设计师的总结!
  • 2018-08-23看完转系列!甲方虐稿指南+设计师生存法则
  • 2018-08-23用一个实战案例,帮你学会讲述重设计作品的思路
  • 2017-08-06条件注释样式的编写方法及示例代码
  • 2018-08-23那些特别好用的App是如何设计的?首期揭秘:网易蜗牛读书

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 33款冰雪字体整理推荐下载(个人与商业)
    • 这5个色彩进阶技巧,能帮你创造更优质的网页用户体验
    • 世界上最受欢迎的色彩出炉了,她的名字叫马尔斯绿!
    • 按照字体名称调用字体让浏览器显示你希望的字体
    • JavaScript利用URL向后台传入中文参数乱码问题解决之道
    • 屏幕外的交互设计:界面设计 ≠ 屏幕设计
    • 人工智能与设计零基础手册!发展历史和定义+底层设计阐述
    • 16个优点告诉你,为什么表单设计应该用这个方法?
    • 专业科班方法!平面设计中如何把握比例?
    • 在firefox播放flash的object及param的写法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有