分类目录归档：WEB开发

2014
12-03

CSS垂直水平完全居中手册

居中一直是CSS中被抱怨的典型。为什么实现起来这么辛苦？所以有人被嘲笑。我觉得问题不是没有办法做到，只是视情况而定，有很多不同方式，但是很难弄清楚应该用何种方式。因此我写了这篇文章，希望能把他变得容易点。水平居中 内联元素（inlineorinline-*）居中?你可以让他相对父级块级元素居中对齐.center-children{text-align:center;}块级元素（blocklevel）居中?你可以通过设置... 继续阅读 >
2014
12-03

11个实用的CSS学习工具

1.盒子模型的幻灯片通过3D转换效果产生的互动的幻灯片。按向左或向右箭头键切换，全屏观看会有更好的效果。2.CSSDiner通过一个简单的小游戏让你学习CSSselector，输入正确的selector来完成每一关。你也可以通过菜单来选关。3.CSSSelectors交互这是一个简单可视化CSS选择器。选择左边菜单中的选择器,选择的条目就会出现在右边。4.前端Web开发考查CSS属性有大小写之分吗？5.TheMa... 继续阅读 >
2014
12-03

即使不编程 你也应该学会HTML和CSS的9大理由

你是不是听过太多人告诉你：「人人都应该要会coding！」都快要不耐烦了对吧？到底为什么身为一个行销专业者、作家、金融巨擘……，整个世界还要你学会coding？其实只要对HTML、CSS有基本的认识，就可以对你的事业造成很大的影响了！学习电脑语言可不只是产品助理与设计师的责任，就算你是个业务主管、活动企画、甚至是魔术师，你都能藉由学习coding来为你自己获得好处。听起来是不是说的比... 继续阅读 >
2014
12-03

8个提高效率的CSS实用工具

CSS，也就是CascadingStyleSheets，推出于1997年，差不多是17年前，至此为我们开发网页大开方便之门，协助我们制作出一个又一个惊艳绝伦的网站设计和模板，提升了我们的创造能力，给整体平台增加了对称美。网页设计不是一蹴而就的，需要不断的实践和改进，然后在最后期限前完成。如果你在写CSS代码上花费大量的时间，那么你就是在浪费资源。因为有很多工具能提高我们改进CSS文件的工作效率。这些工具需要我们先... 继续阅读 >
2014
12-03

HTML head 头标签

HTMLhead头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head头部结构，移动端的meta元素，显得更为重要。了解每个标签的意义，写出满足自己需求的head头标签，是本文的目的。本篇以一丝的文章为基础，进行扩展总结介绍常用的head中各个标签、元素的意义以及使用场景。DOCTYPEDOCTYP... 继续阅读 >
2014
12-03

HTML5 中 40 个最重要的技术点

内容介绍SGML（标准通用标记语言）和HTML（超文本标记语言），XML（可扩展标记语言）和HTML的之间有什么关系？什么是HTML5？为什么HTML5里面我们不需要DTD（Document Type Definition文档类型定义）？如果我不放入<! DOCTYPE html>标签，HTML5还会工作么？哪些浏览器支持HTML5？HTML5的页面结构同HTML4或者更前的HTML有什么区别？HTML5中的datalist是什么？HTML5中哪些是不同... 继续阅读 >
2014
12-03

HTML 5 History API的”前生今世”

History是有趣的，不是吗？在之前的HTML版本中，我们对浏览历史记录的操作非常有限。我们可以来回使用可以使用的方法，但这就是一切我们能做的了。但是，利用HTML5的HistoryAPI，我们可以更好的控制浏览器的历史记录了。例如：我们可以添加一条记录到历史记录的列表中，或者在没有刷新时，可以更新地址栏的URL。为什么介绍HistoryAPI？在这篇文章中，我们将了解HTML5中HistoryAPI的来源。在此之前，我们... 继续阅读 >
2014
12-03

怎样用纯HTML和CSS更改默认的上传文件按钮样式

如果你曾经试过，你就会知道，用纯CSS样式加HTML实现统一的上传文件按钮可能会很麻烦。看看下面的不同浏览器的截图。很明显的，他们长得很不一样。我们的目标是创造一个简洁，用纯CSS实现的，在所有浏览器里的样子和布局是一样的上传文件按钮。我们可以这样： 步骤1.创建一个简单的HTML标记 <divclass="fileUploadbtnbtn-primary"><span>Upload</span><inputtype="file"class="upload"/>... 继续阅读 >
2014
12-03

这30类CSS选择器 你必须记在脑袋里！

大概大家都知道id,class以及descendant选择器，并且整体都在使用它们，那么你正在错误拥有更大级别的灵活性的选择方式。这篇文章里面提到的大部分选择器都是在CSS3标准下的，所以它们只能在相应最新版本的浏览器中才能生效，你完全应该把这些都记在你聪明的脑袋里面。1.**{margin:0;padding:0;}在我们看比较高级的选择器之前，应该认识下这个众所周知的清空选择器。星号呢会将页面上所有每一个元素都选到。... 继续阅读 >
2014
12-03

7个你可能不认识的CSS单位

众所周知CSS技术我们虽然很熟悉，在使用的过程却很容易被困住，这让我们在新问题出现的时候变得很不利。随着web继续不断地发展，对于新技术新解决方案的要求也会不断增长。因此，作为网页设计师和前端开发人员，我们别无选择，必须熟悉我们手上的工具，做到知己知彼，这样才能百战不殆。这就意味着有那么些个特别的货，虽然平常都不怎么会用上，但是一旦某个地方需要它们了，他们就真的是特么得合适不过来了呢。今... 继续阅读 >
2014
12-03

为HTML5开发人员量身打造的7个Web框架

HTML5规范开发完成时，将成为主流。据统计2013年全球将有10亿手机浏览器支持HTML5，同时HTMLWeb开发者数量将达到200万。毫无疑问，HTML5将成为未来5-10年内，移动互联网领域的主宰者。毋庸置疑，HTML5已经改变了我们的percieve在线网站、应用程序和内容。它是如此的先进，以至于许许多多的浏览器期望使用上HTML5的最新功能，然而这需要很长时间来计划以及实施。如果你之前有与网络相关的脚本经验，那么学习HTML5可能并... 继续阅读 >
2014
12-03

推荐十款超赞的Google Chrome扩展插件

浏览器作为互联网的重要入口，越来越受到人们的重视。而一款好的浏览器，除了可以浏览网页之外，还应该是个“全能选手”。譬如谷歌的Chrome浏览器，其一大魅力就在于可以安装各种扩展插件，让Chrome自身的功能更加丰富。所谓“好马还需配好鞍”，本文笔者将推荐十款超赞的Chrome扩展插件。EyeDropper作为GoogleChrome及Chromium的插件EyeDropper，它允许开发者从任何网页或颜色选择器中挑... 继续阅读 >
2014
12-03

12 个强大的 Chrome 插件扩展

Chrome功能强大，也得益于其拥有丰富的扩展资源库。ChromeWebStore里有各种各样的插件，可以满足你使用Chrome时的各种要求。和Firefox一样，Chrome的扩展非常容易安装，而且非常容易卸载。与Firefox不同，Chrome的扩展不需要重新启动，并且不会有扩展插件会减小你的网页面积。在这里我总结出2013年Chrome的12款非常强大的扩展程序，供大家挑选分享。这些插件能不同程度地提升效率。诸如Turnoffthelight这些非常常用的... 继续阅读 >
2014
12-03

如何开发Chrome扩展程序

我真的很喜欢Chrome浏览器，这种感觉是在我发现创建Chrome扩展竟然是如此的容易之后才有的。如果你懂得基本的HTML、CSS、JavaScript，那你就有了扩展Chrome浏览器需要的所有知识。这篇文章将会是一个让你对Chrome扩展有基本了解的速成班，但我在这个方面也不敢自称是专家，如果你在文章中发现任何错误，请一定让我知道。开始为了着手创建你的扩展程序，你只需要为你的扩展创建一个文件夹。程序所必须的文件只有man... 继续阅读 >
2014
12-03

Web开发人员必备的12款Chrome 扩展程序

之前已经分享过一些帮助Web开发人员和设计师的 Chrome扩展，这次我们继续展示一组很有用的Chrome应用程序。这些免费的Chrome应用程序可以简化您的工作流程，为了加快您的工作流程，从而快速帮助你提高你的工作效率。谷歌浏览器是一个功能强大的现代浏览器，许多人都喜欢使用它。在这里，我们给大家带来Chrome应用程序的另一个有趣的收集——专注于网页设计和开发的12款最重要的Chrome扩展程序... 继续阅读 >
2014
12-03

功能不错！IE11支持基于网页的文件编辑

目前，IE11浏览器已经随同Windows8.1正式发布，而为Windows7所使用的IE11也正在研发中，新版浏览器包含了不少新功能，其中之一便是用户可以用它来对基于网页的邮件或文件进行编辑。在本周最新发布的一篇官方博客中，微软宣布了更多有关IE11编辑功能的细节。微软称IE11是第一款能够同时支持从剪贴板或使用HTML代码来复制图片的浏览器（点此测试此功能），不管是DataURI还是Blob都可以被用来将图片转换为代码。此外... 继续阅读 >
2014
12-03

Google Chrome中的高性能网络

GoogleChrome的历史和指导原则【译注】这部分不再详细翻译，只列出核心意思。驱动Chrome继续前进的核心原则包括:Speed:做最快的(fastest)的浏览器.Security:为用户提供最为安全的(mostsecure)的上网环境。Stability:提供一个健壮且稳定的(resilientandstable)的Web应用平台。Simplicity:以简练的用户体验(simpleuserexperience)封装精益求精的技术(sophisticatedtechnology)。本文关将... 继续阅读 >
2014
12-03

IE11中全新增强的F12开发人员工具

众所周知，微软最新发布的IE11里面增强了F12功能。F12是由VisualStudio团队和IE团队密切合作构建而成，旨在为开发人员提供可操作的数据，帮助开发人员快速找出并解决问题。全新的F12包含用于诊断和修复性能问题的工具以及帮助您深入了解IE如何布局和呈现您的应用的工具，可以帮助您提供快速而流畅的Web体验。F12支持现代Web开发人员所使用的快速、迭代工作流。下面让我们一起来看看F12中新增的功能。使用新的F12... 继续阅读 >
2014
12-03

IE11开发人员工具：UI响应工具详解

我讨厌debug，相信也没多少开发者会喜欢。但是当代码出错之后肯定是要找出问题出在哪里的。不过网页开发的时候遇到BUG是一件再正常不过的事情了，我们不能保证自己的代码万无一失，于是使用浏览器的开发人员工具调试是我们解决问题最快捷的方法了。微软在Windows8.1预览版中带来了全新的IE11浏览器，不光加入了诸如WebGL支持等功能，还将F12开发人员工具进行了重新设计，这是IE有史以来开发人员工具最大的更新。新的开... 继续阅读 >
2014
12-03

2014年13个最棒的Firefox扩展

每个月，一个由Firefox志愿者们组成的委员会-那些真正喜欢Firefox插件的人-都会花费自己的时间和精力来寻找最佳的新插件。这些插件其实只是帮助你定制个性化功能的一些小程序段。你知道这些志愿者们为什么如此钟爱它们么？这些是他们2013年每个月的最佳选择，除此之外他们还会挑出额外的一个，因为如果每个月只是挑出一个插件确实有点难！（好的插件太多，只挑出一个有点难为）1）URLLink: 你是否收到过... 继续阅读 >
2014
12-03

Web应用在IE11里的实际使用性能

W3CWeb性能工作小组与Google、Mozilla和其他社区领导者通力合作，制订了导航定时、资源定时、用户定时和性能时间线接口的标准化规范，可以帮助开发者了解在Web应用程序中导航、获取资源以及运行脚本的实际使用性能。您可以使用这些接口来捕获并分析您的客户实际使用您的Web应用程序的体验，而不是依靠那种在人工环境中测试您的应用程序性能的合成测试。利用此定时数据，您可以确定从哪些方面改进您的Web应用程序的实际使用... 继续阅读 >
2014
12-03

IE11虚拟机免费面向广大开发者

随着最近面向Windows7的IE11的发布，微软已经将面向Windows7的IE11和Windows8.1上的IE11增加到虚拟机套件（可在modern.IE 找到）中，以便开发人员在各个平台和版本之间测试IE。IE开发小组已经基于用户的反馈更新了所有虚拟机，以便令浏览器测试更加方便。不论您使用的是哪种开发平台，均可以免费使用VM 在所有版本的IE上测试您的网站。Linux、Mac和Windows上最常用的桌面虚拟化技术均可以使用这些映像。... 继续阅读 >
2014
12-03

modern.IE 一周年：为75万开发者节省100万小时

微软在去年推出了Web开发者测试工具和资源网站modern.IE，如今推出一周年之际，微软也分享了一些modern.IE的数据：modern.IE已经帮助75万开发者节省了100万小时的针对IE浏览器的测试时间。微软称75万Web开发者已经利用modern.IE提供的虚拟化工具进行测试，其中的预配虚拟机和BrowserStack平均为每位开发者分别节省了1小时20分钟和2小时48分钟。modern.IE提供了IE6至IE11在Wind... 继续阅读 >
2014
12-03

有用的 Chrome 浏览器命令

Chrome有很多的特性在界面菜单中是没有体现的，你可以通过chrome://命令来访问。本文介绍12个非常有用的chrome://命令：1.chrome://flags可用来启用或者关闭某些chrome的体验特性2.chrome://dns该命令将显示浏览器预抓取的主机名列表3.chrome://downloads该命令同时也可以从菜单中的下载来访问，其快捷键是Ctrl+J4.chrome://extensions该命令等同于菜单-工具-... 继续阅读 >