css框架 | 易学教程

【译】前端开发者的基本要求

阅读更多关于【译】前端开发者的基本要求

原文链接： http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/ 本文在github上的链接： https://github.com/chyingp/blog/issues/1 备注：第一次翻译技术文章，标题都纠结了好久不知道肿么翻译，如发现翻译不当之处，可点击github链接提交评论，thx～前几天我为一个项目写README文档，我希望其他开发者能够看到这个项目，并从中学到一些东西。突然我意识到，若放在几年前，我写作的过程中随口提到的Node，npm，Homebrew，git，测试还有产品构建，会把我魂都吓没了。曾经有段时间，一个前端开工程师基本的工作流程是：编辑文件，本地测试下（尽我们可能做到最好），然后通过FTP上传到服务器。我们评价一个前端工程师的水平，是通过他是否能够兼容IE6，或者取得跨浏览器的像素级的一致。很多社区的成员——包括我在内——缺少传统的编程经验。HTML、CSS和JavaScript——通常指jQuery——是自学的技能。这些事情在过去的几年里发生了变化。可能是因为大家开始认真的看待前端开发者的工作，或者是因为浏览器开发商开始臭味相投（趋向一致？原句getting their shit together），又或者是前端开发者自己——同样，包括我在内—

JavaScipt 样式操作

阅读更多关于 JavaScipt 样式操作

我们知道HTML样式定义的三种方式： <link/>外部引入也就是定义 CSS 中的 <style/>嵌入式样式 style特性地定义给一个HTML元素设置css属性，如： var head= document.getElementById("head"); head.style.width = "20px"; head.style.height = "10px"; head.style.display = "block"; 这是 DOM2 级样式提供的 API 了，这里总的来说还涉及了3个问题，当然也是 jQuery 内部需要解决与优化的问题。 1.单一的设置太麻烦，而且每次style一次就等于浏览器要绘制一次，当然高级的浏览器是可能会合并 style 的次数的 2.style 接口只能针对行类样式，对于 link 引入的样式，无法获取 3.样式属性名的兼容问题，比如驼峰，保留字 float任何支持style特性的html元素在js中有一个对象的style属性，其实也是一个实例，但是内部属性命名都是采用驼峰形式的，如background-image要写成backgroundImage，其中一个比较特殊的就是float，保留字，所以就缓存cssFloat，ie:styleFolat,然后对于width，height这些处理都最好有一个量度单位。合并cssTextvar head

不要再说找不到前端项目练手了！

阅读更多关于不要再说找不到前端项目练手了！

前端学习还是很有趣的，可以较快的上手然后自己开发一些好玩的项目来练手，网上也可以一抓一大把关于前端开发的小项目，可是还是有新手在学习的时候不知道可以做什么，以及怎么做，因此，实验楼就整理了一些前端项目教程，希望可以帮助正在学习前端的小伙伴。为了方便阅读，大概把前端可以做的项目分为三类：游戏类实用类好玩类然后依次推荐一些项目教程，想要学习的小伙伴可以看看~ 游戏类其实很多常见的小游戏都是纯前端开发出来的，比如曾经风靡的2048、别踩白块啊等等，简单有趣，对于初学者来说，这些小游戏是非常不错的练手项目。网页版2048 项目通过搭建一个网页版的 2048 ，让大家学习 web 应用程序的开发流程、以及如何让应用在移动端自适应处理以应对各种大小的屏幕，布局和初始化，编写游戏的逻辑、实现让它能移动，判定结果。是不是和我们玩的2048一模一样呀，O(∩_∩)O~ HTML5两步实现拼图游戏项目使用HTML5和css3实现的九宫格拼图游戏。只要两步既可以实现炫酷的效果和动画。详细的讲解，让你清楚地知道每一句代码的作用。自己开发完之后还可以玩玩，告诉你，你可以开发它，但是玩可不一定行哦~ 网页版扫雷项目实现一个Web版本的扫雷游戏，通过该项目将学习并实践 JavaScript 和 CSS 等基本的Web开发知识。看着就有想玩的冲动啊，有木有~ 网页版-别踩白块游戏

前端学习资源整理

阅读更多关于前端学习资源整理

说明:资料是个人学习过程进行整理. HTML& CSS HTML和CSS学习的英文网站: http://learn.shayhowe.com/ HTML&CSS–w3school HTML&CSS–菜鸟教程 CSS预处理器 SASS 推荐大神阮一峰的日志: http://www.ruanyifeng.com/blog/2012/06/sass.html 在线sass-IDE: http://www.sassmeister.com/ (供你所code即所view) CSS资源大全 https://github.com/jobbole/awesome-css-cn CSS 3D引擎举例: http://keithclark.co.uk/labs/css-fps/nojs/ Tridiv :a web-based editor for creating 3D shapes in CSS CSS的有趣的项目 http://web.jobbole.com/83258/ JS 教程 You-Dont-Know-JS star:41,449(截止20160918) 菜鸟教程当然也可以是w3school 廖雪峰的js教程 (推荐–讲的很易懂) 阮一峰的JS教程 JS单元测试工具 https://karma-runner.github.io/1.0/index.html http:/

翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

阅读更多关于翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者: Anthony Gore 译者: 蜗牛(GivenCui) 校对者: veizz "消除阻塞渲染的CSS和JavaScript"。这一条Google Page Speed Insights的建议总让我困惑。当一个网页被访问时，Google希望它仅加载对初始视图有用的内容，并使用空闲时间来加载其他内容。这种方式可以使用户尽可能早地看到页面。我们可以做很多事情来减少阻塞渲染的JavaScript，例如code splitting、tree shaking，缓存等。但是如何减少阻塞渲染的CSS？为此，可以拆分并优先加载首次渲染所需要的CSS（关键CSS)，然后再加载其它CSS。可以通过编程的方式筛选出关键CSS，在本文中，我将向你展示如何通过Webpack的自动化流程来实现该方案。什么是阻塞渲染如果资源是“阻塞渲染”的，则表示浏览器在资源下载或处理完成之前不会显示该页面。通常，我们在html的 head 标签中添加CSS样式表，这种方式会阻塞渲染，如下所示： <head> <link rel="stylesheet" href="/style.css"> ... </head> <body> <p>在style

14个HTML/CSS设计和开发框架

阅读更多关于 14个HTML/CSS设计和开发框架

专业的网页设计是既复杂又耗时的。它需要HTML和CSS框架的完美结合。这些框架不仅可以为设计方案增加特定的功能，还可以大大地节省时间和精力。高效的框架不仅是网站设计的基础，它提供的各种丰富多彩的功能，还提高整体的功能和性能。一个网站的外观和设计完全可以通过一些完美和可靠的工具而彻底改头换面。现在，越来越多的网页设计师和编辑人员选择使用CSS框架来创建网站。所以，如果你正在寻找一些高效的HTML和CSS框架，那么不妨继续看下去——众里寻他千百度，蓦然回首，那人却在灯火阑珊处。 1）CSS框架——Gumby Gumby是最好的框架之一，配备了各种有用的和有效的功能。它预置的设计和通用的界面元素，有助于我们创建完美的网站。Gumby框架还允许根据要求定制网格。官方网站：http://gumbyframework.com/ 2）CSS框架——Semantic UI框架 Semantic UI也是一个非常有用的网页设计框架。通过允许用户创建界面共享语言来授权给设计师。各种功能和3D动画也是不可小觑的功能。相比于其他框架，它更容易使用。官方网站：http://semantic-ui.com/ 3）CSS框架——YAML框架下面要说的是YAML。这是一个设计灵活，方便和响应网站的理想工具。它提供了一系列有效的功能。同时，它还带有Ajax Builder

web性能优化

阅读更多关于 web性能优化

前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ? 　　1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。　　2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。　　总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。　　前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。　　一、页面级优化　　 1. 减少 HTTP请求数　　这条策略基本上所有前端人都知道，而且也是最重要最有效的。都说要减少 HTTP请求，那请求多了到底会怎么样呢 ?首先，每个请求都是有成本的，既包含时间成本也包含资源成本。一个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程

前端开发初学者

阅读更多关于前端开发初学者

本文转载于: 猿2048 网站前端开发初学者刚入园，以此来记录有关学习html过程中的问题和理解。零基础，现在在看教学视频，刚看完html5.问题不大，作为前端开发最基础的一块，大致内容也就是记一些符号分别表示什么。期间有一个问题就是，直接复制粘贴有时候行不通哦，代码还是得自己一个一个敲啊，不要想着省事。记得之前是复制粘贴了一段话，而没有那个效果，于是乎求教别人，后来发现是一个全角符的问题，说是html默认的就是半角符，这个细节很难发现，所以老老实实敲吧。还有有关编码的问题，一般浏览器都支持国标码（GB开头）和UTF-8编码格式，现在才知道有时候看到页面上的乱码其实就是编码不符。现在浏览器一般都支持国标码和UTF-8的。 html和CSS的区别：简单来说，html用于表达结构，css用于表达样式。要制作出一个网页，需要用到最基础的html构建一个框架，功能是很局限的，要想更多的表现出美观和更复杂的结构还是CSS来决定了。追朔html的历史，其实最先出现了html时并没有CSS，最初的html拥有现在css中的部分功能，但是最初的html功能很少，做出来的东西也不尽人意，于是出现了CSS，保留了原先html里的一些符号并且拥有更多更全的功能。html作为最基础的一个框架，CSS用于装饰。以上我的理解，望大佬多指教。来源： https://my.oschina.net/u

前端之移动端库和框架bootstrap

阅读更多关于前端之移动端库和框架bootstrap

学习移动端场景下的js事件；制作移动端特效常用的js库；介绍移动端常用开发框架Bootstrap；介绍动态样式语言less、sass、stylus的基本使用。移动端js事件移动端的操作方式和PC端是不同的，移动端主要用手指操作，所以有特殊的touch事件，touch事件包括如下几个事件： 1、touchstart: //手指放到屏幕上时触发 2、touchmove: //手指在屏幕上滑动式触发 3、touchend: //手指离开屏幕时触发 4、touchcancel: //系统取消touch事件的时候触发，比较少用移动端一般有三种操作，点击、滑动、拖动，这三种操作一般是组合使用上面的几个事件来完成的，所有上面的4个事件一般很少单独使用，一般是封装使用来实现这三种操作，可以使用封装成熟的js库。移动端js库 zeptojs Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的api。如果你会用jquery，那么你也会用zepto。Zepto的一些可选功能是专门针对移动端浏览器的；它的最初目标是在移动端提供一个精简的类似jquery的js库。 zepto官网：http://zeptojs.com/ zepto中文api：http://www.css88.com/doc/zeptojs_api/ zepto包含很多模块

Web前端和Web后端的区分

阅读更多关于 Web前端和Web后端的区分

版权声明：本文为CSDN博主「十豆三展」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/zz13995900221/article/details/80374893 一、绪论 1、前台：呈现给用户的视觉和基本的操作。后台：用户浏览网页时，我们看不见的后台数据跑动。后台包括前端、后端。前端：对应我们写的html、css、javascript 等网页语言作用在前端网页。后端：对应jsp、javaBean、dao层、action层和service层的业务逻辑代码。（包括数据库）为什么jsp是后端呢？主要是jsp的运行原理是在tomcat服务器运行的。 2、 (1)javaweb是java开发中的一个方向 java有搞安卓的，搞web的，搞嵌入式的等。javaweb就是指搞web方向的，javaweb分两块，一块是服务器端叫后端，另一块叫前端，也就是web前端。前端就是用户能看到的部分，比如淘宝网，qq空间，网页上你能看到的都是web前端做的。后端做的就是为前端的展示业务逻辑功能做处理。 (2)java web包括了jsp，servelt以及一些框架比如spring，structs以及与数据库交互的知识，当然也涉及到了html，css等前端技术，但是更侧重于后端的开发

订阅 css框架