Category: Div / Css / XML / HTML5 / SVG

July 29, 2016

HTML5: 全局属性

By  Div / Css / XML / HTML5 / SVG  1 Comment
HTML5: 全局属性
出处：http://www.cnblogs.com/starof/p/4593741.html 全局属性：对于任何一个标签都是可以使用的属性。 一、data-* 在html5之前需要在html标签上添加自定义属性来存储和操作数据，可能是会写<form role=”xxx”>，但这是种非常不规范的方式。 也正是因为有这种自定义属性的需求，在html规范里增加了自定义属性data-*属性。html5中开发人员可自定义任何想要的属性，只要加上前缀data-，通过这种方式避免与未来的html版本冲突。 <form data-type="comment" class="cont… Read More
Read More
July 29, 2016

CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)

By  Div / Css / XML / HTML5 / SVG  0 Comments
CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)
BFC的理解与应用 首先我们来看看w3c规范对BFC的解释，其实对于这种概念的学习上，我们总是建议首先寻找官方的定义，因为原则上来说官方的才是最权威和正确的，而且还比较详细，千万不要因为看到英文就畏惧不前。 什么是BFC（Block formatting contexts） w3c规范中的BFC定义： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。 在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的… Read More
Read More
July 29, 2016

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing

By  Div / Css / XML / HTML5 / SVG  1 Comment
详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
W3C规范 一般来说，页面中的每一个元素都会形成一个矩形盒子，渲染引擎根据给定的样式确定这个盒子的呈现。通俗的来说，页面的布局就是一个个盒子的排列和摆放。掌握了盒子呈现的本质，布局也就轻而易举。 在 W3C 规范中定义了标准的盒模型： Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these area… Read More
Read More
July 25, 2016

CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?

By  Div / Css / XML / HTML5 / SVG  0 Comments
CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?
其实方法非常简单，直接写代码： <div style="background-image: url(http://your-image.jpg);"> <img src="http://your-image.jpg" style="visibility: hidden;" /> </div> 同时设置图片和背景图片，同时将图片设置为不可见（不是不显示），只显示背景图片。 这里用到技巧就是：display:none和visibility:hidden的区别 dispaly:none ；　CSS1隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 v… Read More
Read More
July 22, 2016

移动开发需要知道的像素知识『多图』

By  Div / Css / XML / HTML5 / SVG  0 Comments
移动开发需要知道的像素知识『多图』
像素（Pixel）对于WEB开发者来说很是熟悉，在PC互联网时代没少与其打交道。进入移动互联网之后，随着移动设备屏幕的解析度越来越高，衍生了一些关于屏幕和像素的一些新概念，比如DPI，DP，PT，Retina，4K等等，本文对这些概念做一个简单的介绍。 DPI与PPI DPI（Dots Per Inch）是印刷行业中用来度量空间点密度用的，这个值是打印机每英寸可以喷的墨汁点数。计算机显示设备从打印机中借鉴了DPI的概念，由于计算机显示设 备中的原子单位不是墨汁点而是像素，所以就创造了PPI（Pixels Per Inch），这个值是屏幕每英寸的像素数量，即像素密度（Screen density）。由于各种原因… Read More
Read More
July 22, 2016

HTML5: 两个viewport的故事（第一部分）

By  Div / Css / XML / HTML5 / SVG  2 Comments
HTML5: 两个viewport的故事（第一部分）
英文：http://www.quirksmode.org/mobile/viewports.html 翻译：http://weizhifeng.net/viewports.html 在这个迷你系列的文章里边我将会解释viewport，以及许多重要元素的宽度是如何工作的，比如<html>元素，也包括窗口和屏幕。 这篇文章是关于桌面浏览器的，其唯一的目的就是为移动浏览器中相似的讨论做个铺垫。大部分开发者凭直觉已经明白了大部分桌面浏览器中的概念。在移动 端我们将会接触到相同的概念，但是会更加复杂，所以对大家已经知道的术语做个提前的讨论将会对你理解移动浏览器产生巨大的帮助。 概念：设备像素和CSS像… Read More
Read More
July 22, 2016

HTML5: 两个viewport的故事（第二部分）

By  Div / Css / XML / HTML5 / SVG  1 Comment
HTML5: 两个viewport的故事（第二部分）
英文：http://www.quirksmode.org/mobile/viewports2.html 翻译：http://weizhifeng.net/viewports2.html 在这个迷你系列的文章里边我将会解释viewport，以及许多重要元素的宽度是如何工作的，比如<html>元素，也包括窗口和屏幕。 这篇文章我们来聊聊关于移动浏览器的内容。如果你对移动开发完全是一个新手的话，我建议你先读一下第一篇关于桌面浏览器的文章，先在熟悉的环境中进行下热身。 移动浏览器的问题 当我们比较移动浏览器和桌面浏览器的时候，它们最显而易见的不同就是屏幕尺寸。为桌面浏览器所设计的网站在移动浏览器中显… Read More
Read More
July 22, 2016

CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）

By  Div / Css / XML / HTML5 / SVG  2 Comments
CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）
1. Phones and Handhelds a) iPhones /* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-de… Read More
Read More
July 22, 2016

CSS3: 移动端开发中 max-device-width 与 max-width 的区别

By  Div / Css / XML / HTML5 / SVG  2 Comments
CSS3: 移动端开发中 max-device-width 与 max-width 的区别
翻译自stackoverflow.com，源地址：http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web 有同学需要开发web页在iphone/android手机上访问，想问max-device-width 与 max-width 有什么区别，他打算针对不同的屏幕大小加载不同的样式，就像下面这样： @media all and (max-device-width: 400px) @media all and (max-width: 400p… Read More
Read More
July 22, 2016

CSS：媒体查询 CSS3 Media Queries

By  Div / Css / XML / HTML5 / SVG  0 Comments
CSS：媒体查询 CSS3 Media Queries
定义和使用 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。 浏览器支持 表格中的数字表示支持 @media 规则的第一个浏览器的版本号。 CSS 语法 @media mediatype and|not|only (media feature) { CSS-Code; } 你也可以针对不同的媒体使用不同 stylesheets : <link rel=”stylesheet” media=”med… Read More
Read More
July 21, 2016

CSS: SASS用法指南 (附视频)

By  Div / Css / XML / HTML5 / SVG  0 Comments
CSS: SASS用法指南 (附视频)
  学过CSS的人都知道，它不是一种编程语言。 你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。 很自然地，有人就开始为CSS加入编程元素，这被叫做“CSS预处理器”（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。 各种”CSS预处理器”之中，我自己最喜欢SASS，觉得它有很多优点，打算以后都用它来写CSS。下面是我整… Read More
Read More
July 20, 2016

九张 Gif 图回顾 Web 设计的 25 年历史

By  Div / Css / XML / HTML5 / SVG  0 Comments
九张 Gif 图回顾 Web 设计的 25 年历史
原文出处： fastcodesign   译文出处：码农网 – 小峰 Froont，一家为web设计师制作工具的旧金山公司，用9个GIF格式动画来表现网页设计在过去25年的发展历程。如果你想知道为什么CSS这么重要，为什么Flash会逐渐淘汰，这些动画图或许能让你一窥究竟。 网页设计的单色时代，约1989年。想想Lynx和其他以Unix为基础的web浏览器，这些浏览器只会通过网络从这个终端到另一个终端一个字一个字地蹦出来。没有图形用户界面，只有一串字母和一个闪烁的光标。 现代化的开始，约1995年。第一个浏览器，例如Mosaic，允许设计人员在网站上显示图片，但是唯一的方法是将这些网页元素丢进不雅的表格布… Read More
Read More
July 20, 2016

设计: 从登录开始

By  Div / Css / XML / HTML5 / SVG  0 Comments
设计: 从登录开始
原文出处： 迅雷CUED 登录？ 两个输入框加一个按钮？还能怎么做？ 那就先来看看为什么而做？ 就数据而言，网站的流量仍是大量的匿名用户带来的。我们无法根据请求的任何方面（ip地址，用户代理等）准确识别来自同一人的连续请求。 不能识别，自然无法对其分类进而转化挖掘，获取网站所需的价值。 互联网服务于人，要开发一个真正令人动心的网站，我们必须触达到浏览器后面那些活生生的人。 他们是谁？他们想要什么？ 我们如何服务他们？ 以下是4种具有代表性的用户识别方法，我们来看一下它们的优劣： ip地址：IP地址是最容易获取到的信息。但用它来标识唯一用户会有很大弊端，伪IP、代理、动态IP、局域网共享同一公网IP出口等情况都会干扰… Read More
Read More
July 20, 2016

设计: 未来Web设计的7大趋势

By  Div / Css / XML / HTML5 / SVG  0 Comments
设计: 未来Web设计的7大趋势
原文出处： Medium   译文出处：朵璞 1. 手势取代点击 我们都已经忘记滚动条曾经是有多麻烦，大多数用户都得煞费苦心地把鼠标移至屏幕右侧来移动这古老的滚动条： 作为一名专业人士，想必你一定用过鼠标滚轮、光标键或触控板，那么你就已经超越了许多用户了。 在当今这个时代，滑动已取代了点击。手机用户轻松滑动手指即可随意滚动页面，相对而言，要精准地点击某一点反倒是变得困难了——完全和以前在电脑上的操作相反。 因此，我们应将网站体验的首要重点放在滚动上，点击为辅。当然，这一特点已经随处可见： 随着手机用户的规模日益庞大，现代化网站都开始尽量减少点击，增加滚动。我们会发现链接越来越少，按钮因为其更大的“点击”区域，… Read More
Read More