摘要：
gulp是前端工程化的工具，它可以对html,css,js等代码和图片进行压缩，也可以对sass和less等预处理语言进行编译，代码部署。gulp学起来简单，用起来方便，大大提高我们工作效率。 这里可以参考CTOLib码库的gulp基本教程 ||《gulp中文网》 安装node.js 因为gulp是 阅读全文
posted @ 2018-03-02 21:16
ShareAndCreate
阅读(423)
评论(0)
推荐(0)
摘要：
这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动画特效，请大家使用如Safari和Chrome这类基于WebKit内核的浏览器。(IE浏览器谢绝观赏~) 1.CSS3实现钟表效果(基于jQuery) 使用CSS3的基本变形特性 阅读全文
posted @ 2018-03-02 18:13
ShareAndCreate
阅读(1460)
评论(0)
推荐(0)
摘要：
HTML 5 规范引进了很多新特性，其中最令人期待的之一就是 canvas 元素。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个canvas 元素都有一个”上下文( context )” (想象成绘图板上的一页)，在其中可以绘制任意图形 阅读全文
posted @ 2018-03-02 18:12
ShareAndCreate
阅读(252)
评论(0)
推荐(0)
摘要：
HTML5 & CSS3 准备就绪 该网站通过扇形图表的形式展现了从08年到10年以来各大浏览器对HTML5和CSS3的支持情况。发展势头还是很可观的。 HTML5安全手册 CSS3按钮生成器 所见即所得的为你生成CSS3按钮，你仅需通过基本的鼠标点击便可生成令人满意的CSS3按钮，点击生成好的按钮 阅读全文
posted @ 2018-03-02 18:06
ShareAndCreate
阅读(703)
评论(0)
推荐(0)
摘要：
注意:这篇文章介绍的 API 尚未完全标准化，并且仍在变动中，在项目中使用这些实验性 API 时请务必谨慎。 引言 现在的 web 严重缺乏表达能力。你只要瞧一眼“现代”的 web 应用，比如 GMail，就会明白我的意思： 堆砌 <div> 一点都不现代。然而可悲的是，这就是我们构建 web 应用 阅读全文
posted @ 2018-03-02 18:04
ShareAndCreate
阅读(730)
评论(0)
推荐(0)
摘要：
组件是 Web 开发的方向，现在的热点是 JavaScript 组件，但是 HTML 组件未来可能更有希望。 本文就介绍 HTML 组件的基础知识：自定义元素（custom elements）。 文章结尾还有一则 React 培训消息（含 React Native），欢迎关注。 一、浏览器处理 我们 阅读全文
posted @ 2018-03-02 17:57
ShareAndCreate
阅读(5514)
评论(0)
推荐(0)
摘要：
Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站。我们可以在不使用内联<font>和<br>标签的基础上对网站添加漂亮而细腻的风格样式。事实上，我们目前的设计能力已经让我们远离了那个可怕的浏览器战争时 阅读全文
posted @ 2018-03-02 17:49
ShareAndCreate
阅读(217)
评论(0)
推荐(0)
摘要：
我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预置好的脚本或那种从头开始开发的创建者。这篇文章适合那些打算提高工作效率或不愿意从头开发脚本的人阅读。 阅读全文
posted @ 2018-03-02 17:45
ShareAndCreate
阅读(518)
评论(0)
推荐(0)
摘要：
CSS兼容问题一直困扰着CSSer，面对各浏览器，往往感觉束手无策，愁眉不展。CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法，在各浏览器厂商解析CSS没有达成一致前，我们只能用这样的方法来完成这样的任务。 我进行前端开发的时候，测试用的浏览器大致有: IE7、IE6、O 阅读全文
posted @ 2018-03-02 17:42
ShareAndCreate
阅读(147)
评论(0)
推荐(0)
摘要：
在这里可发现很多与众不同的技术，比如:图片集、阴影效果、可扩展按钮、菜单等…这些实例都是使用纯CSS和HTML实现的。单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面(英文)，单击每个实例的图片截图可以直接跳转到相应实例的Demo页面。 1.Hoverbox 图片集 一个纯净的基于CSS 阅读全文
posted @ 2018-03-02 17:40
ShareAndCreate
阅读(145)
评论(0)
推荐(0)
摘要：
1. A List Apart CSS Topics A List Apart，学习网页设计和最佳实践的首选网站。这个网站从1999年就开始发表关于CSS的文章，其中大部分文章都是面向那些更注重符合标准设计的中级到高级设计师。 2. CSS Help Pile CSS Help Pile汇集了大量的 阅读全文
posted @ 2018-03-02 17:37
ShareAndCreate
阅读(1620)
评论(0)
推荐(0)
摘要：
层叠样式表(css)是Web设计的一种语言，CSS的下一代版本CSS3已经蓄势待发。你是否可望开始使用它们却又不知从何下手呢？虽然还有一些新属性没有得到官方的确认，但是一些浏览器已经开始支持来自CSS3得新特性了。但问题是——许多浏览器支持了，唯独最主要的Internet Explorer浏览器仍不 阅读全文
posted @ 2018-03-02 17:32
ShareAndCreate
阅读(416)
评论(0)
推荐(0)
摘要：
Web服务的一个重要特点就是流量大、数据多，仅靠一台服务器肯定难以支撑大规模的服务。 所以我们经常会看到诸如以下的一些术语，教人好生不懂： *：系统架构、物理架构、Web服务基础设施 *：应用服务器 *：数据库服务器 *：索引服务器 *：反向代理服务器 *：缓存服务器 *：分布式、可扩展性 *：cp 阅读全文
posted @ 2018-03-02 17:20
ShareAndCreate
阅读(8886)
评论(0)
推荐(0)
摘要：
您正在学习WEB标准CSS网页布局吗？是不是还不能完全掌握纯CSS布局？通常有两种需要您特别注意: 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对 阅读全文
posted @ 2018-03-02 17:14
ShareAndCreate
阅读(282)
评论(0)
推荐(0)
摘要：
当我们谈论网站可用性的时候，我们总会提及用户界面(UI)——按钮、标记(label)、标签(tab)等的设计与布局。但是，还有一个可能会被你忽视的元素可能会把你辛辛苦苦设计的网站毁于一旦，那就是(文字)内容。 这些文字内容就是你的网站上用文本方式提及的方方面面，它涵盖了何种类型的文本内容。今天暴风彬 阅读全文
posted @ 2018-03-02 17:13
ShareAndCreate
阅读(181)
评论(0)
推荐(0)
摘要：
导航结构在网站设计中是起到决定性作用的，导航菜单/栏常常通过颜色、排版、形状和一些图片来帮助网站创造更好的视觉和感受，它是网页设计的关键元素。虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的关键，但视觉效果也不能影响到网站可用性。最理想的设计是网站的导航既能比其他网站的导航外观更吸引人，又 阅读全文
posted @ 2018-03-02 17:12
ShareAndCreate
阅读(141)
评论(0)
推荐(0)
摘要：
决定一个网站成败命运的，不是视觉设计，而是设计的可用性和有效性。访问网页的用户们握着鼠标，决定一切，“以用户为中心”已然是成功网站的标准设计方向。总之，用户不用的功能，就不该存在。 我们并不打算重复探讨操作细节（比如：“搜索工具栏”应当怎么放置），相反，我们的目光将集中在网站有效设计的核心原则、启发 阅读全文
posted @ 2018-03-02 17:07
ShareAndCreate
阅读(481)
评论(0)
推荐(0)
摘要：
过去有很多网页设计师喜欢将他们的网页效果图用table布局实现成网页，但是这样做会遇到一个比较麻烦的问题就是，后期调试和维护会相当的困难。现在，越来越多的前端开发er们开始使用xHTML+CSS替代最初的table布局完成网页的整体布局，不但让网站降低了开发和维护的成本，而且代码也更语义化了。但是， 阅读全文
posted @ 2018-03-02 16:58
ShareAndCreate
阅读(360)
评论(0)
推荐(0)
摘要：
前些日子在SmashingMagazine看到一篇关于CSS3新技术不错的文章，它详细介绍了CSS3的新特性和它的使用方法，它包括:浏览器专有属性、选择器(属性选择器、连字符、伪类、伪元素)、RGBA和透明度属性、多栏布局、多背景图、Word Wrap、文字阴影、CSS圆角、边框图片、盒阴影、盒尺寸 阅读全文
posted @ 2018-03-02 16:54
ShareAndCreate
阅读(1145)
评论(0)
推荐(0)
摘要：
级联样式表(CSS)在当代Web设计中已经成为重要的环节，如果没有CSS现在的网站将像10年前一样不堪入目。随着CSS技术的普及，越来越多的高质量CSS教程涌入互联网，让我们的学习更加方便。 1.CSS跨浏览器幻灯片 演示了如何仅适用CSS打造一个跨浏览器的图片画廊 2.基于CSS的图片地图 这个教 阅读全文
posted @ 2018-03-02 16:49
ShareAndCreate
阅读(161)
评论(0)
推荐(0)
摘要：
转自：http://blog.bingo929.com/cheat-sheets-for-web-develop.html Cheat sheet这个词组如果直译成中文，意思大概是”作弊小抄”之类的词，但Cheat sheet这个词的实际意思已经并非是贬义了，虽然中文还没有实际的对应词能够很好的翻译 阅读全文
posted @ 2018-03-02 16:46
ShareAndCreate
阅读(631)
评论(0)
推荐(0)
摘要：
现在国内绝大多数的站点都用CSS把字体大小设定为12px，像素虽然也是相对尺寸单位，但只是相对于屏幕的分辨率 ，当屏幕的分辨率一定时，如果你 感到字太小，阅读有困难，在非标准浏览器中就无能为力了，从而降低了用户体验。所以说，如果把单位改成em，那么就可以用CTRL+鼠标滚动把字放大，或者用菜单上的查 阅读全文
posted @ 2018-03-02 16:43
ShareAndCreate
阅读(255)
评论(0)
推荐(0)
摘要：
转自：http://blog.bingo929.com/lunascape-firefox-safari-ie-all-in-one.html 作为前端开发/网页设计师，电脑中总是安装着各种不同内核渲染引擎的浏览器，如IE(Internet Explorer)、FireFox、Safari、oper 阅读全文
posted @ 2018-03-02 16:40
ShareAndCreate
阅读(366)
评论(0)
推荐(0)
摘要：
转自：http://blog.bingo929.com/css-frameworks-15.html 什么是css框架 实际上还是让我们从框架说起吧。框架就是一个你可以用于你的网站项目的基本的概念上的结构体。 css框架通常只是一些css文件的集合，这些文件包括基本布局、表单样式、网格或简单结构、以 阅读全文
posted @ 2018-03-02 16:37
ShareAndCreate
阅读(153)
评论(0)
推荐(0)
摘要：
推荐9款很棒的可在网页中绘制图表的JavaScript脚本，这些有趣的JS脚本可以帮助你快速方便的绘制图表（线、面、饼、条…），其中包括jQuery、MooTools、Prototype和一些其它的JavaScript框架。您还可以参考以下JavaScript/CSS相关教程及资源:《10个非常棒的 阅读全文
posted @ 2018-03-02 16:35
ShareAndCreate
阅读(4969)
评论(0)
推荐(0)
摘要：
这些网站都会经常更新一些优秀且高质量的Web界面设计教程。如果你热爱网页设计并且经常搜集各种界面设计教程，那么你一定要把下面这些网站收藏起来。 您还可以参考以下网页设计相关教程及资源:《Web UI 设计(网页设计)命名规范》《30个运用纸类元素网页设计的创意实例欣赏》《2008年最佳Web设计/前 阅读全文
posted @ 2018-03-02 16:31
ShareAndCreate
阅读(496)
评论(0)
推荐(0)
摘要：
转自：http://blog.bingo929.com/web-design-stars-aurora.html 如果将这种简单的星空或极光设计效果添加到你的网站、博客的背景图或页头中，马上会令富有新的生命力！ 您还可以参考以下Web设计相关教程:《网页设计新趋势:云隙阳光和光线效果》《网页设计趋势 阅读全文
posted @ 2018-03-02 16:29
ShareAndCreate
阅读(1175)
评论(0)
推荐(0)
摘要：
在设计Web界面的时候，如何确保用户更方便快捷的使用是关键所在。在导航或其他一些地方使用恰当的图标既可以让网页更漂亮又可以提高用户体验和可用性。但是如果每个网站项目都要从头开始创意和设计一套图标的话，会浪费很多宝贵的时间，为什么不使用那些现成做好的图标呢（当然如果项目比较大，那是需要单独设计的。）下 阅读全文
posted @ 2018-03-02 16:21
ShareAndCreate
阅读(281)
评论(0)
推荐(0)
摘要：
这50个CSS网站是由WebDesignerWall评选出来的，很具参考价值。我们在欣赏的同时，也能从中吸取很多灵感，也能从它们的源代码中学习更高级的CSS技术。今年，越来越多的设计师开始使用超大的背景图片技术和一些JavaScript框架（如jQuery及MooTools）来提高用户体验。还有一些 阅读全文
posted @ 2018-03-02 16:20
ShareAndCreate
阅读(466)
评论(0)
推荐(0)
摘要：
网站可用性是任何网站的基本要素，而可用的导航更是网站所必需的要素之一。导航决定了用户如何与网站进行交互。如果没有了可用的导航，那么网站内容就会变得毫无用处。导航菜单应当足够简单以让用户快速了解它，但还要包含一些必要的元素来引导用户浏览整个网站——融入一些有创意且漂亮的设计。下面的有些是基于CSS设计 阅读全文
posted @ 2018-03-02 16:15
ShareAndCreate
阅读(337)
评论(0)
推荐(0)
摘要：
Web UI 设计命名规范 一.网站设计及基本框架结构: 1. Container“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.2. Header“header” 是网站页面的头部区域，一般来讲，它包含网站的l 阅读全文
posted @ 2018-03-02 16:12
ShareAndCreate
阅读(583)
评论(0)
推荐(0)
摘要：
遇到的问题： 网站本身设计初衷就没有打算支持IE8及以下版本浏览器，并不是因为代码兼容性问题，而是真的不想迁就那些懒得更新自己操作系统和浏览器的用户，毕竟是我自己的网站，所以我说了算！哈哈~ 没有了低版本IE6浏览器，就不用顾虑他们的性能问题了，本以为开发会一帆风顺，结果”性能问题”竟然出现在了一直 阅读全文
posted @ 2018-03-02 16:10
ShareAndCreate
阅读(2301)
评论(0)
推荐(0)
摘要：
本集合是有一位国外设计师收集整合，并由 oncoding翻译成中文的，感谢他们的辛苦贡献。CSS Sprites技术在国外并不是什么新技术，只不过近两年(尤其08年开始)中国开始流行这个词，大家也开始越来越关注CSS Sprites这个没有标准中文翻译的技术。CSS Sprites这个词如果直译的话 阅读全文
posted @ 2018-03-02 16:00
ShareAndCreate
阅读(286)
评论(0)
推荐(0)
摘要：
使用Photoshop为每个图片添加某种样式虽然可行，但会是相当乏味且困难的长久工作。下面要介绍的CSS技巧将帮助你从痛苦中解脱出来！ 阴影效果 通过使用带有一些padding之的背景图来添加阴影效果。 HTML <img class=”shadow” src=”sample.jpg” alt=”” 阅读全文
posted @ 2018-03-02 15:55
ShareAndCreate
阅读(1452)
评论(0)
推荐(1)
摘要：
使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题，作为网页设计师或前端开发工程师，这个垂直居中问题也是必须掌握的技巧之一 该CSS垂直居中的条件: 1.已有一个已定义高度的容器(如<div>)2.内部有一个未知高度的对象(也许是后台动态生成的文本，放在另一个<di 阅读全文
posted @ 2018-03-02 15:44
ShareAndCreate
阅读(153)
评论(0)
推荐(0)
摘要：
为什么是960px？ 一直以来，网页设计师都希望寻找一个理想的页面宽度值，既能适应大部分屏幕，又尽可能的在一行显示更多的信息。 我们首先会考虑的是全屏自适应，但这并非一个好的解决方案。一方面，需要做一个能适应各个宽度的设计，从背景图片，到每个栏目标题的文字长度，都需要考虑到适应多变的宽度；另一方面， 阅读全文
posted @ 2018-03-02 15:32
ShareAndCreate
阅读(171)
评论(0)
推荐(0)
摘要：
前几天彬Go和大家一起讨论了960 Grid System这个CSS网格系统框架的基本原理和使用方法。今天，暴风彬彬将教大家使用Photoshop结合960 Grid System模板来设计一个真正符合960网格系统的网页效果图。 网格设计呢，通常显得很整齐规范，有时看上去也比较专业。但网格设计相对 阅读全文
posted @ 2018-03-02 15:29
ShareAndCreate
阅读(680)
评论(0)
推荐(0)
摘要：
Bryan Veloso 在最近在他重新发布的网站Avalonstar 上应用了960网格系统（960 Grid System）中的16列的PS模板开发。 在这同时感谢他给960.gs提供了网站的截图以供使用。 您还可以参考以下960网格系统相关教程:《960 Grid System 基本原理及使用 阅读全文
posted @ 2018-03-02 15:24
ShareAndCreate
阅读(415)
评论(0)
推荐(0)
摘要：
作为网页设计师(前端工程师)，你可能还记得曾经的那个网页大小建议:一个网页（包括HTML、CSS、Javacript、Flash和图片）尽量不要超过30KB的大小，随着互联网的日益庞大，网络带宽也在飞速发展，很多设计师已经不再考虑这条30KB的理想准则。随着越来越受欢迎的CSS布局和Javascri 阅读全文
posted @ 2018-03-02 15:18
ShareAndCreate
阅读(177)
评论(0)
推荐(0)
摘要：
本文里面收集一些有关CSS的技巧、教程、工具和观点等，其中一些你也许早就运用的炉火纯青，也可能有的你听都没听说过。不管是新手还是高手，大家都继续学习吧。 一，Web 标准 要玩游戏，就得先了解规则。要学CSS，就应该先了解一下Web标准。尽管看上去不是必须的(我在学CSS之前，根本不知道也不想知道W 阅读全文
posted @ 2018-03-02 15:14
ShareAndCreate
阅读(196)
评论(0)
推荐(0)
摘要：
您还可以参考以下网页设计相关资源:《美学设计—黄金分割与九宫格》《使用CSS创建三列固定布局结构》《精选15个国外CSS框架》《精选31个网站界面设计实践教程》《推荐20个关于网站可用性及界面设计的网站》 网页骨架 这些是web页面的主要元素。有很多不同的方法去组织它们，但是这种布局也许是最常用的。 阅读全文
posted @ 2018-03-02 15:12
ShareAndCreate
阅读(1300)
评论(0)
推荐(0)
摘要：
工具&Web应用 13个可能会让你说”Thank You”的必不可少的开源应用 14个免费工具让你了解为什么人们会放弃访问你的网站 40+CSS生成器 74个我们可能已经忘记的适合网页设计师的很棒的Web应用 50+能提高你的网站速度和性能的技巧和资源 15个可以监视网站人气的工具 20个免费的SE 阅读全文
posted @ 2018-03-02 15:10
ShareAndCreate
阅读(175)
评论(0)
推荐(0)
摘要：
在中国，很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS，甚至很多人都还不知道xHTML+CSS是什么意思，只知道盲目的追求DIV+CSS，但在国外，是没有DIV+CSS这个概念的，很明显如果单从字面上去理解，DIV+CSS的网页就要全都是div，很明显是无法达到语义化标准的。彬 阅读全文
posted @ 2018-03-02 15:08
ShareAndCreate
阅读(354)
评论(0)
推荐(0)
摘要：
第一步:学会如何组合选择器 什么是选择器?如果你还不知道什么叫做”选择器”，你可以先参考一下w3schools.com的CSS语法概述。 未优化的CSS代码在下面的图例中，你会看到来自三个不同选择器的同样的CSS属性声明。 点击小图浏览清晰大图 优化的CSS代码你可以将上面的css代码优化组合，让所 阅读全文
posted @ 2018-03-02 15:04
ShareAndCreate
阅读(349)
评论(0)
推荐(0)
摘要：
CSS简写就是指将多行的CSS属性声明化成一行，又称为css代码优化。CSS简写的最大好处就是能够显著减少CSS文件的大小，其实还有很多其他益处。臃肿而杂乱的CSS样式表会使你遇到问题是难以调试。尤其是当一个团队在进行设计的时候，你的臃肿的CSS代码会使你的团队其他成员的工作效率下降。 属性值为0 阅读全文
posted @ 2018-03-02 15:00
ShareAndCreate
阅读(244)
评论(0)
推荐(0)
摘要：
CSS命名规范 一．文件命名规范 全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css； 二．常用类/ID命名规范 页 眉：header内 容：content容 器：container页 脚：footer 阅读全文
posted @ 2018-03-02 14:54
ShareAndCreate
阅读(431)
评论(0)
推荐(0)
摘要：
CSS代码的命名惯例一直是大家热门讨论的话题。今天暴风彬彬想通过分析一个流行三栏布局中的必要元素，来为大家讲解关于使用语义化方法替代结构化方法来命名CSS类的建议和指导。 您还可以参考彬Go的相关文章:《整理及优化CSS代码的7个原则》《10个CSS简写技巧让你永远受用》《DIV+CSS网页布局常用 阅读全文
posted @ 2018-03-02 14:51
ShareAndCreate
阅读(136)
评论(0)
推荐(0)
摘要：
我听说很多开发者厌恶 CSS。而在我的经验中，这往往是由于他们并没有花时间来学习 CSS。 CSS 算不上是最优美的『语言』，但迄今二十多年来，它都是美化 web 举足轻重的工具。从这点来说，也还算不错吧？ 尽管如此，CSS 写得越多，你越容易发现一个巨大的弊端。 因为维护 CSS 真是老大难。 特 阅读全文
posted @ 2018-03-02 14:37
ShareAndCreate
阅读(151)
评论(0)
推荐(0)
摘要：
Nick Babich – 早在2016年的时候，移动端流量就已经超越桌面端成为目前主流。根据Google UK 的研究，如今65%的英国成年人都以智能手机作为他们的主要上网设备。 人们通过移动端设备搜索信息，在线购物，使用移动端设备订阅各种服务。用户偏好上的转变推动着用户期望发生变化。现如今，绝大 阅读全文
posted @ 2018-03-02 14:12
ShareAndCreate
阅读(1415)
评论(0)
推荐(0)
摘要：
在Tutorialzine上你可以了解最新最酷的Web发展趋势。这就是为什么每个月都会发布一些偶然发现并认为值得你关注的最佳资源的缘由。 Direction Reveal （方向展示） 该插件检测光标进入或离开块时的方向，允许你使用各种酷炫特效和过渡。它提供了一些开箱即用的CSS动画，让你可以轻松创 阅读全文
posted @ 2018-03-02 14:06
ShareAndCreate
阅读(197)
评论(0)
推荐(0)
浙公网安备 33010602011771号