- 博客(57)
- 收藏
- 关注
RSS订阅原创 jekyll项目开发
1. jekyll servea built-in development server that will allow you to preview what the generated site will look like in your browser locally.运行此命令，可以在本地预览将要生成的网站的样子。2. _config.ymlMany conf
2015-10-30 15:42:31
650
原创 10 Color Inspiration Secrets Only Designers Know About
刚看到文章，一些小技巧非常有意思。转载翻译一部分。Specific hues can provoke different emotions, associations, and responses that affect how your brand is perceived. Put simply, color choices can make or break a design.
2015-07-20 11:36:57
665
原创 JS Output
Writing to The HTML DocumentUse document.write for testing.If you execute it, on a loaded HTML document, all HTML elements will be overwritten.注意，只用在test时，如果在一个已经下载好的html文件中执行 document.write，所有h
2015-06-24 11:16:19
1652
原创 HTML5 Drag and Drop
1. make an Element Draggable首先把希望拖动的元素的 draggable 性质设为 true2. specify what should happen when the element is dragged然后指定当这个元素被拖拽时应该发生的行为。把这个处理函数绑定到 ondragstart 性质里function drag(ev) {
2015-06-12 18:16:11
820
原创 Deploying Jekyll project to GitHub Pages
最近在做Jekyll项目。第一次接触这种技术，简单说就是一种创建并生成静态网站的工具。基本功扎实的，敲好代码（用Git来管理代码，建立独立工作分支），现在情况是想要在web上看一下效果，因为一些问题在本地开发环境下可能发现不了。这里使用GitHub Pages来实现。有关资料请看官网。说一些自己在部署项目到 GitHub上遇到的问题和解决办法。1. site.url vs site.b
2015-06-11 16:56:49
537
原创 RWD Images & Videos
Responsive Web Design - Images1. set width property to 100%img { width: 100%; height: auto;}这样图片就变为响应式的了，可以放大或缩小。注意：图片可能被放大到超过原始尺寸。更好的解决办法，在许多情况下是使用 max-width.2. set max-width propert
2015-06-01 14:56:50
609
原创 CSS3 Transform & Transition & Animation
CSS3 TransformsRelated 2D transform methods:translate() 移动: the element moves from its current position, depending on the parameters given for theleft(X-axis) and the top (Y-axis) positionrota
2015-05-26 16:26:01
517
原创 CSS Display
Display and VisibilityHiding an element两种方法实现元素的隐藏：h1.hidden {display:none;}h2.hidden {visibility:hidden;}区别：display:none it will not take up any space. The element will be hidden, and the
2015-05-18 17:18:05
368
原创 CSS List
ListWith CSS, lists can be styled further, and images can be used as the list item marker.List item markerThe type of list item marker is specified with the list-style-type property
2015-04-28 11:21:24
400
转载 谷歌：打造面向跨屏时代用户的网站
发布时间2014年3月，时隔近一年才看到，落后了。把自己觉得有用的信息摘录在这里。您的跨屏策略应符合客户及业务的需求。您希望在自己的网站上实现什么样的目标?您的客户期望获得什么?了解跨屏用户在您当前网站上的所见和所想。使用分析程序(如 Google Analytics(Google分 析))查看当前移动用户来自哪里、他们执行了 哪些操作, 以及他们与桌面设备用户的行为有何不同 (例如按设备
2015-04-24 11:26:09
469
翻译 Prepare Landing Pages for Google’s “Mobile Friendly” Algorithm, Beginning April 21
刚看了一篇文章，对于使用谷歌搜索服务的地区，从2015年4月21日起，首页对手机设备友好的网站将在谷歌搜索结果排名中很有利。当然对于国内可能不完全适用，但这是全球趋势。数据显示，谷歌的60%流量来自手机。如果你的网站不是手机友好的网站，在谷歌ranking中将会有落后的风险。让你的网站为这个手机友好算法做准备：1. 谷歌官方推荐响应式设计，确保你的网页在所有设备上键入相同的URL都
2015-04-21 16:19:09
479
翻译 HTML Input Attributes
HTML Input Attributes主要整理Input元素的一些属性。value该属性设定了一个输入区域的初始值，即页面加载完用户看到的input的值。readonly该属性指定了一个输入区域是只可以读，不能被改变的。这个属性不需要有一个值。It is the same as writing readonly="readonly".disabled
2015-04-21 10:47:40
2053
原创 HTML Input Types
Input Types总结所有 元素的类型text定义了一个 one-line 单行输入区域，注意：输入区域的默认宽度是 20 characterspassword在密码输入区域里的字符是隐藏的（以星号或者黑圆圈显示）submit定义了一个用于提交表格的按钮。如果缺省提交按钮的 value 属性的值，则按钮将会显示一个默认的文本（Submit）。radio
2015-04-20 16:57:52
501
原创 HTML Forms & Form element
JavaScript uses the name of the form to specify which form to submit.
2015-04-20 15:12:58
665
原创 Media Queries
W3C Recommendation Media Queries本文为文档阅读笔记。Media-specific style sheets are supported by several user agents. The most commonly used feature is to distinguish between ‘screen’ and ‘print’.指定媒体
2015-04-15 14:36:57
423
翻译 How to change user habits with interaction design
如何使用交互设计改变用户习惯原文地址：点击打开链接摘录自认为有用的信息。Studies have verified that we spend more than 40 percent of our time engaged in habitual action. Our brains seem to prefer being on auto-pilot, as the mechani
2015-04-01 14:55:34
496
原创 HTML Entities & Charset & URL Encode
Character entities are used to display reserved characters in HTML.
2015-03-12 16:03:32
618
原创 HTML Iframes & Responsive Web Design
An iframe is used to display a web page within a web page.
2015-03-02 17:17:26
519
原创 CSS Combinator
Combinator把基础选择器组合起来使用。There are four different combinators in CSS3:descendant selector 后代选择器child selector 自选择器adjacent sibling selector 相邻兄弟选择器general sibling selector 一般同级选择器Desce
2015-03-02 16:20:53
715
翻译 CSS Selector Performance has changed! (For the better)
可能有些人看过MDN上面 Writing efficient CSS （作者：David Hyatt）这篇文章，不过网站也标注了，这是2000年写的，建议参考一下本文所翻译的文章（2011年12月29日，作者：Nicole Sullivan）关于CSS选择器优化。本文地址：点击打开链接像David Hyatt的书写高效CSS等优秀的文章，帮助开发者适应了一个基本的选择器匹配大背景。
2015-03-02 14:03:44
534
原创 HTML Blocks
Block ElementsBlock level elements normally start (and end) with a new line when displayed in a browser.块级元素通常（以新的一行开始/结束）换行在浏览器中显示。Examples: , , , Element该元素是块级元素，可以为其他HTML块级
2015-02-28 16:54:48
424
原创 HTML Lists
HTML ListsUnordered HTML List 无序列表Starts with the tag. Each list item starts with the tag. Coffee Milklist-style-type : disc （实心小圆）,circle （空心小圆）,square （实心正方形）, none
2015-02-28 16:42:35
596
原创 HTML Head
HTML ElementA container for all the head elements. 容纳所有头部元素的容器。可以嵌套在元素里的HTML元素有：The element:defines a title in the browser toolbar定义浏览器工具条里显示的标题provides a title for the page when it
2015-02-28 16:21:17
371
原创 HTML Quotation & Citation Elements, Comments, <noscript>
HTML Quotation and Citation Elements Defineslongquotation, usually indent (缩进引用的文本) elements Defines an inline (short) quotation 短的引用, usuallyinsert quotation marks (使用引号把引用的文字括起来) around t
2015-02-28 11:25:11
653
原创 HTML Attributes
HTML Attributes (case-insensitive 大小写不敏感)Attributes provide additional information about an element, always specified in the start tagAttributes come in name/value pairs like: name="value"la
2015-02-27 17:09:15
1157
原创 HTML Web Storage
顾名思义，使用 Local Storage 本地存储，web应用可以将数据就近保存在用户的浏览器中。Cookies vs. Local Storage在H5之前，应用数据通常存储在cookies中，包含在每一个服务器请求里。When a browser request a web page from a server, cookies belonging to the pa
2015-02-26 15:12:07
542
原创 CSS Units
CSS has several different units for expressing a length. Many CSS properties take "length" values, such as width, margin, padding, font-size, border-width, etc. CSS 有不同的单位用来描述长度A whitespace cann
2015-02-04 15:20:04
451
翻译 <html> vs. <body> element in css
SummaryThe html and body elements are distinct block-level entities, in a parent/child relationship.The html element's height and width are controlled by the browser window.It is the html elemen
2014-07-15 15:50:44
464
原创 Keep your footer show at the bottom of the page
如何使网页的footer显示在页面最下方。两种情况要kao
2014-07-15 15:10:02
617
原创 CSS Attribute Selectors
Attribute Selector可以对那些拥有特殊属性的HTML元素进行个性化设置。Note: IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified.[attribute] SelectorThe[attribute]selector 选择凡是拥有这个 attrib
2014-04-28 12:10:16
753
原创 CSS Pseudo-classes & Pseudo-elements
Pseudo-classesused to add special effects to some selectors. 用于给一些选择器
2014-04-28 00:03:50
2306
原创 CSS Box Model & Outlines & Dimension
OutlineAn outline is a line that is drawn around elements (outside the borders) to make the element "stand out".CSS轮廓The outline is not a part of an element's dimensions; the element's t
2014-04-26 16:18:16
637
原创 CSS Links & Tables
Links can be styled differently depending on what state they are in.The four links states are:a:link - a normal, unvisited linka:visited - a link the user has visiteda:hover - a link whe
2014-04-26 00:50:47
494
原创 CSS Background
该性质是用于定义一个元素背景的效果。Background-color顾名思义，我们可以对每一个HTML元素设定它的背景色，常用取值：color，transparentThe background of an element is the total size of the element,includingpadding and border (but not the
2014-04-25 22:59:02
541
原创 CSS Font
Font familiesthere are two types of font family names:generic family 通用字体系统 - a group of font families with a similar look (like "Serif" or "Monospace") font family 特定字体系统- a specific font f
2014-04-25 12:25:48
588
原创 CSS Border & Padding & Margin
BorderBorder styleThe border-style property specifies what kind of border to display.
2014-04-15 16:19:27
739
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人