首页
学习
活动
专区
圈层
工具
发布

我和前端的那些事儿

--页面主体,在浏览器中展示--> HTML 有专用的脚本语言 1、JavaScript 是浏览器脚本语言,除了 JavaScript 还有 jQuery; 2、...JavaScript 是原生的,原始的,需要自己构造方法;jQuery 集成很多库,可以直接调用; 3、在HTML中写JavaScript脚本,需要用 来标记; 4、...同样支持 if、if-else、while、switch-case 等语句; 漂亮的页面可以使用CSS来控制 1、CSS 是用来装饰、修饰 页面的,就是让它更美观; 2、在 HTML中,如果已经单独定义...CSS 文件,那么可以使用 style 进行二次定义; 在高速发展的今天,很少人从零构建Demo,有种东西叫 框架 1、一开始我并不了解框架,同时也不知道怎么去用框架; 2、在写自己用的一个导航 Demo...的时候,手机端页面是非常可悲的;然后一些大佬给我建议,叫我用框架,几经折腾,终于用上了第一个框架 ZURB Foundation,我写的 Demo。

31630
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    2019年最全的web前端知识体系汇总

    : http://foundation.zurb.com/ · Uikit: http://www.getuikit.com/ · Web Components:http://css-tricks.com...//d3js.org/ · Three.js: https://threejs.org/ 其他库 · KINETIC:http://kineticjs.com/ · Particles.js--web中创建炫酷的浮动粒子的库...· Animsition—CSS 实现动画过渡的 jQuery 插件 · Barba.js—流式页面过渡 · TwentyTwenty—一个对比图片的可视化 diff 工具 · Vivus.js—在...JavaScriptkeycode · Sortable—拖拽插件 · Flexdatalist—自动补全 · Slideout.js—移动应用侧滑导航 · Jquerymy—使用 jQuery 实现双向数据绑定...jQuery 库 · Tether—使用固定定位来创建相关元素 · Shepherd.js—为应用创建新手引导 · Tooltip—tooltip 提示框 · Select2—Jquery 选择框插件

    3.6K00

    十五种加速设计开发的CSS框架

    ZURB Foundation 如果您正在寻找一种响应迅速的前端框架,那么ZURB Foundation就比较适合。该框架将允许您为所有的设备创建各种生产环境的代码和原型。...通过支持具有“准系统结构(barebone structure)”的流行框架,ZURB Foundation让用户能够使用简单的方法及其入门模板,来快速生成产品原型。...由于提交量不少于14,000次,而且贡献者超过了940名,因此ZURB在GitHub上也有着大量的支持。目前,《华盛顿邮报》和《国家地理》等知名网站都使用的是该框架。 4....以轻便闻名的Pure.css框架,在压缩后只有3.8KB。 12. mini.css mini.css同样提供全面的功能和轻巧的框架。虽然它在压缩后只有10KB,但仍然可以提供丰富的布局和UI元素。...Mobi.css 压缩后的Mobi.css仅为2.6KB,它是目前您可以找到的最小的框架之一。Mobi的优势在于速度,尤其是在针对移动设备的应用场景中。

    3.1K30

    合理使用CSS框架,加速UI设计进程

    Bootstrap Bootstrap最初是Twitter Blueprint作为供团队内部使用的工具而创建的。但在它公开发布后,它受到了开发者广泛使用,使用率增长不断增长。...ZURB Foundation 如果您正在寻找的是一个快速且响应迅速的前端框架,那么ZURB Foundation可能正是您要的。它允许您为所有设备创建生产环境的代码和原型。...依靠ZURB Foundation支持具有“准系统结构”的框架结构,可以让用户快速地完成产品设计原型。同时它在GitHub上也有大量的支持,提交的数量超过了14000个,贡献者也在940个以上。...目前华盛顿邮报和国家地理等网站均使用了ZURB Foundation框架。 UI Kit UI Kit以具有高度可定制的轻量级元素而著称。基于使用它提供的模板,您将可以轻松创建各种Web界面。...由于Pure.css是模块化的,您可以很轻松地导入您要使用的包。您还可以访问大量可供下载和安装的布局。Pure.css 以其轻量著称。在压缩后,这个框架的尺寸只有3.8KB。

    2.3K20

    Foundation:高级的响应式前端框架

    对于前端框架,Jeff 了解Bootstrap 甚于这个Foundation(貌似在写该文之前还没听说过Foundation)。...简介 Foundation 前端框架官方地址:http://foundation.zurb.com/ Foundation 是一款开源的前端框架,我们可以使用它快速创建页面原型。...相比于其他同类型工具,Foundation的移动化方案更加出色;借鉴响应式Web 设计的思路和方法,Foundation 对内容结构在不同类型设备中的的呈现方式进行了相应的预设。...毕竟,一个框架n多CSS 文件、js 文件的,于国内整体网速而言是一个软肋。之前社团有个同学用Bootstrap 做了个报名网页,但对于还在使用移动GPRS 的广大新生而言,注定是难有效果。...又言道响应式设计,姑且不论前端显示效果如何,单单为不同分辨率做媒体查询,进而增加“响应式”的CSS 代码,整个网页在样式文件、脚本文件上就够臃肿了。因此,我认为,响应式设计是看着很美好的东西。

    1.9K90

    前端工程师如何干掉设计

    (2)点击确定后,填充颜色 ?   当然除了使用“色彩范围”外,还可以使用“索套工具”或者“选择工具”来建立选区,这里就不做介绍了,建立复杂的选区也需要相对复杂的操作。   ...将刚刚下载的动作文件载入即可   (3)使用动作   载入完成后,打开任一psd文件,步骤如下:   a.首先我们选择“移动工具”,将“自动选择”勾选   b.点击我们要切的图标,在图层面板中我们可以看到对应的图层已经被定位到...  这里的框架主要指的是前端开发中的UI框架,合理的利用UI框架可以在美化页面的同时提高工作效率和开发成本。   ...(3)jQuery-ui:http://jqueryui.com/   jQuery-ui是jQuery的官方UI库,其在提高CSS样式美化的同时也提供了一系列的JS组件供开发者使用,同时也支持定制功能...2.适合移动端   (1)Foundation:http://foundation.zurb.com/   Foundation是一款体积小并且提供响应式布局的移动端优先的UI工具库。

    2.8K40

    10大H5前端框架,让你开发不愁

    算是框架界的元老啦,都说框架去的早,而这个框架一直到现在依然这么的热门,如果你比较介意 Bootstrap 开发撞脸的尴尬事情,那么你可以考虑使用 Foundation 。...官网:http://foundation.zurb.com/ Github:https://github.com/zurb/foundation-sites Star:22,736 UiKit UIkit...是YOOtheme团队开发的,在许多WordPress主题中都有应用(也就是如果你是个 WordPress 爱好者,那么这个框架应该比较适合深究),并且框架能够通过GUI编辑器和手动编辑,所以它提供了一个灵活...框架借助LESS、jQuery、normalize.css及FontAwesome开源项目的独有特点,整合成了这么一款轻量级、模块化的前端框架。...选择使用也是因为框架小巧,并且是纯 CSS,没有太多的牵扯,好用来与其他框架快速结合使用。

    5.7K80

    进阶攻略|最全的前端开源JS框架和库

    Ionic遵循视图控制模式,通俗的理解和Cocoa触摸框架相似。在视图控制模式中,我们将界面的不同部分分为子视图或包含其他视图的子视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。...与 jQuery 灵活的语法相比,YUI 显得更加中规中矩,在代码组织、结构和模式方面都更加讲究,更体现出工程师的严谨。...31.Foundation 官方网址:http://foundation.zurb.com/ 是 ZURB 旗下的主要面向移动端的开发框架,但是也保持对桌面端的兼容,目前已经更新到 Foundation4...同样,在 Kissy 的控件中也可以看到 Bootstrap 等国外框架的影子。此外,Kissy abc 项目工具可以帮助用户实现自动化构建,并有很多扩展组件方便用户使用。...TodoMVC最大的优点就是帮助开发者挑选出合适的MV*框架,从Backbone,Ember, AngularJS, Spine等一系列框架中决定使用哪个框架。

    4.7K71

    前端学习路线指南

    随着你前端的学习进程,熟练掌握 HTML/CSS简单易学 第二步: 使用基础工具 文本编辑器: Notepad2 / Sublime Text / Atom.io / IDE 图像编辑器:Photoshop...Arrays, Objects, etc 理解函数, 条件表达式, 循环,操作符等 事件处理 JSON(JavaScript Object Notation), JavaScript对象表示法 jQuery...——(现阶段还不足以称Web Developer) 有能力搭建一个专业的简单网站 有能力搭建网页应用的界面 能够把一张PSD 转化为基于HTML/CSS的静态网页 有在公司上班的实力, 或者选择成为一名自由职业者...Zurb Foundation Skeleton MUI Pure 第八步: 服务器端编程语言(专注于一个!)...我们可以使用React Native, Ionic, Cordova 等框架来构建移动App 第十六步:现阶段,现在你需要考虑什么?

    2.5K20

    译文:9个用于web前端开发的CSS开源框架

    the web 开源框架; by Google MIT Pure 开源框架; by Yahoo BSD Foundation 前端框架; by Zurb Foundation MIT Bulma 基于...添加描述 Foundation拥有大量可获得的文件,并且已经被许多企业、组织,甚至政客们使用。 添加描述 在Github上,Foundation的页面拥有近17000的提交以及1000名贡献者。...与此同时,Bulma也拥有许多web组件供你选择,并运用在设计中。 添加描述 在Github上,Bulma页面拥有超过1400条提交以及300名贡献者。...添加描述 Skeleton在Github上拥有167条提交以及22位贡献者。但是,它并不是最活跃的项目,上一次的更新是在2014年,所以在使用之前需要更多的维护。...就像所有的技术决策那样,对于所有人来说,没有唯一正确的答案,只有在发给定的时间和项目中相对正确的选择。 尝试着使用他们一段时间,然后看看哪一种才是你在以后的项目中真正需要的。

    1.5K10

    前端进阶攻略|最全的前端开源JS框架和库

    Ionic遵循视图控制模式,通俗的理解和Cocoa触摸框架相似。在视图控制模式中,我们将界面的不同部分分为子视图或包含其他视图的子视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。...与 jQuery 灵活的语法相比,YUI 显得更加中规中矩,在代码组织、结构和模式方面都更加讲究,更体现出工程师的严谨。...31.Foundation 官方网址:http://foundation.zurb.com/ 是 ZURB 旗下的主要面向移动端的开发框架,但是也保持对桌面端的兼容,目前已经更新到 Foundation4...同样,在 Kissy 的控件中也可以看到 Bootstrap 等国外框架的影子。此外,Kissy abc 项目工具可以帮助用户实现自动化构建,并有很多扩展组件方便用户使用。...TodoMVC最大的优点就是帮助开发者挑选出合适的MV*框架,从Backbone,Ember, AngularJS, Spine等一系列框架中决定使用哪个框架。

    4.9K70

    jQuery Growl 插件(消息提醒)

    jQuery Growl 插件(消息提醒) 允许您很容易地在一个覆盖层显示反馈消息。消息会在一段时间后自动消失,不需要单击"确定"按钮等。用户也可以通过移动鼠标或点击关闭按钮加快隐藏信息。...使用方式 下载好插件后导入 jQuery 库,jquery.growl.js,jquery.growl.css 三个文件,如: jquery/jquery.growl/javascripts/jquery.growl.js" type="text/javascript"> 如需使用 Growl 插件,请选择你要设置的显示文本元素,把文本作为参数传递给它: $.growl({ title: "消息标题", message: "消息内容!"...}); $.growl.warning({title: "警告标题", message: "警告消息内容!" }); 有几个可用的默认选项。如果您有兴趣,可以查看下面完整的实例演示。

    1.6K20

    最流行的5个前端框架对比

    在技​​术上,它不一定比列表中的其它框架更好,但它提供了比其它四个框架更多的资源(文章和教程、第三方插件和扩展、主题构建器等)。简而言之,Bootstrap 无处不在,这是人们继续选择的主要原因。...Foundation Foundation是排在第二名的框架。ZURB这样坚实的公司一直支持着Foundation,所以这个框架有强大的基础。...其框架的总体结构、类中清晰逻辑的命名约定方式和语义方面也超过了其它框架。 Pure Pure是一种轻量级的模块化框架,采用纯CSS编写,具有可根据需要一起使用或单独使用的组件。...这里的要点是,与具有高级别特异性的框架相比,更通用的框架更容易使用。在大多数情况下,最好选择一个应用最小样式的框架,因为它更容易自定义。...最后值得一提的是,现在Flexbox和Grid Layout在主流浏览器的最新版本中得到很好的支持,比以往任何时候都更容易构建复杂的布局。

    2.1K20

    【响应式】foundation栅格布局的“尝鲜”与“填坑”

    就是带大伙初步一下foundation的灵活和强大 何为“踩坑”?就是我把我使用的时候踩过的坑给标个记号,这样大伙用的时候就可以“绕道而行“啦! ?.../foundation/6.3.0-rc3/css/foundation.min.css">(放在head标签内) jquery...【foundation单行单列居中】 很多时候我们并不需要在一个行网格中放入多个列,很多时候我们需要只需要在一个行中放入一个列,然后让它居中就可以了,我们需要在对应的size-number后加入size-centered...margin-bottom已经被我们去掉啦 2.2坑点二:子类名写columns或column效果一样 (其实也不算是坑点)在查阅官方文档时我有一个感到疑惑的点,就是官方文档在弹性栅格这一节里使用的子类名不是...http://foundation.zurb.com/sites/docs/grid.html(我是就是那个文档) 【注意】我这篇文章是在参考官方英文文档的基础上写的,在这里提个建议——不要只看菜鸟教程

    1.5K110

    五年 Web 开发者 star 的 github 整理说明

    /mocha 简单、弹性、有趣的node测试框架 blueimp/jQuery-File-Upload 文件上传的jquery插件 terinjokes/gulp-uglify js混淆压缩的gulp...操作localStorage、IndexedDB或 Excel中的数据 timtian/qo-sql 腾讯某前端高工写的babel 插件,用sql操作js对象,将sql编译成js代码 thejameskyle.../bootswatch bootstrap主题 necolas/normalize.css css重置 zurb/foundation-sites 响应式的ui库 shixy/Jingle 一个比较早的移动端开发框架...jquery/jquery-mousewheel 处理鼠标滚轮事件的jquery插件 h5bp/html5-boilerplate h5开发模版 amsul/pickadate.js jquery...日期控件 arshaw/xdate 日期控件 cubiq/iscroll 前端处理滑动的工具库(在ios上总能碰到奇葩问题) twbs/bootstrap 第一个h5 ui框架 jashkenas

    9.8K50

    GitHub 上的顶级项目都是做什么的?(二)

    我们知道当不使用任何 CSS 的时候, HTML 页面在不同浏览器还是有略微不同的, 这是因为浏览 器自带了一些样式, 而 normalize 的意义就在于把这些样式统一起来....有人把它比喻成女生化 妆的打底妆过程, 可以说是非常形象生动了~ zurb/foundation-sites 类似 Bootstrap 的前端 UI 框架, 貌似响应式支持更好一些....blueimp/jQuery-File-Upload jQuery 的文件上传插件 gulpjs/gulp JS 的构建工具, 有点类似于 C 语言的 make yarnpkg/yarn...jykell/jykell jykell 是一个使用 Ruby 编写的静态网站生成器, 也就是说把你的网站预编译成 HTML. 经常用 在 GitHub Pages 上做免费的博客....spring-projects/spring-boot spring 框架相关的东西, 不太熟悉, 有做 Java 的同学欢迎在评论区补充.

    95030

    Web 开发常备工具

    如今 Web 开发标准越来越高,Web 开发者也在不断寻找途径提升自己的技能。为使大家的开发工作更顺利进行,本文整理了 10+ 款比较优秀的 Web 开发工具,希望对你有帮助。...它是一个 CSS 和 HTML 的集合,它使用了最新的浏览器技术,给你的 Web 开发提供了时尚的版式,表单,buttons,表格,网格系统等等。 ?...DEMO:https://atom.io/ Foundation Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。...DEMO:http://foundation.zurb.com/ Fiddler Fiddler 是一个 http 调试代理,它能够记录所有的你电脑和互联网之间的 http 通讯,Fiddler 可以也可以让你检查所有的...Cloud9 IDE 还为 node.js 和 Google Chrome 集成调试器,可以在 IDE 中启动、暂停和停止。 ?

    1.8K80

    13个帮你提高开发效率的现代CSS框架

    Pure.css Pure.css在压缩后仅为3.8KB,以移动优的先理念为中心。它是模块化的,所以你只需导入要使用的元素包。你还可以下载和安装许多常用布局。...mini.css mini.css 是一个在轻量级和功能丰富之间取得平衡的包。它确实达到了目标,压缩后大约10KB,同时拥有相当多的UI元素和布局。通过它提供的文档你可以深入了解这一切是如何运作的。...Mobi.css Mobi.css 非常小(压缩后仅 2.6KB),主要针对移动用户。但是其内置主题和插件系统还有很大的增长空间。如果基本样式不能满足你的要求,可以在框架之上以模块化的方式进行构建。...官网:https://getbootstrap.com/ Foundation ? Foundation Foundation 是模块化组件库,可以为你量身打造自己的项目。...官网:https://foundation.zurb.com/ Semantic UI ? Semantic UI 有时框架可以包含仅对其原始开发人员有意义的 CSS 类名。

    1.8K40
    领券