2018年02月_ixygj197875

06月 04月 03月 02月 01月

原创《揭秘 CSS》开源啦

《揭秘 CSS》将整个 CSS 体系作为一个有机整体，系统介绍整个 CSS 体系，全面涵盖 CSS1、CSS2.1、CSS3。内容由浅入深，从基础讲起，逐步深入，让零基础的 web前端工程师从入门到完全精通CSS。《揭秘 CSS》采用创意共享4.0许可证，只要保持原作者署名和非商用，您可以自由地阅读、分享、修改其内容。《揭秘 CSS》已经在 Github 开源...

2018-02-27 22:03:16 801

[1] http://www.w3.org/TR/CSS1/[2] http://www.w3.org/TR/CSS21/[3] http://www.w3.org/TR/css3-color/[4] http://www.w3.org/TR/css3-flexbox/[5] (英)Andy Buddha, Simon Collison, Cameron Moll 著，陈剑瓯译。精通CSS：高级...

2018-02-27 18:22:51 942

原创网页的键盘翻页功能

键盘翻页功能如果文档较长，用户每次阅读到文章末尾，都要回到目录树去点击，才能跳转到下一节。对用户来说，这样的应用就不是特别友好。如果在每篇文章的末尾，增加到上一节和下一节的链接，就会很方便。如果用户可以通过键盘方向键，按 ← 键回到上一节，按 → 键跳转到下一节，那就更方便了。我们的网页版 word 就支持键盘翻页功能，只需在文章的末尾增加上一节和下一节的链接，用户可以通过鼠标点击，也可以通过键盘...

2018-02-27 18:21:56 1531

原创 CSS Word的文档结构视图设计

文档结构视图“文档结构视图”功能，可以通过jQuery的动画来模拟。该功能与Word保持一致，默认情况下，目录可见。当用户点击“文档结构视图”后，隐藏目录，再次点击后，显示目录。首先，在文章的页眉上，增加“文档结构视图”复选框，供用户点击。复选框被包含在一个label中，并为label增加id属性，以便jQuery能够根据id来捕获用户点击事件。同理，也要为复选框增加id属性，以便用户点击后，jQ...

2018-02-27 18:21:16 366

原创网页交互性设计

交互性设计对于任何一个Web应用，与用户互动是最基本的要求。为Web应用增加交互性，最常用的方法，莫过于使用 Javascript 或 jQuery、AJAX 了。本节不打算详细介绍这几种技术，只是简要介绍在网页版 word 中，如何使用这些技术来实现目录展开折叠功能、文档结构视图功能、键盘翻页功能。这些功能看似不起眼，却非常实用，可以大大提高网页版 word 的易用性，增强用户体验。目录展开折叠...

2018-02-27 18:20:17 3934

原创网页嵌入对象（图片、视频、网页）

嵌入对象在网页中嵌入对象，实际上并不会在网页中插入对象，而是通过某种标签链接到指定的对象，标签创建的只是被引用对象的占位符而已。嵌入式对象主要包括图片、视频、音频、文档等，不同的对象使用不同的标签，并具有不同的样式，本节重点介绍如何控制不同对象的样式，而标签的使用方法不是本节的重点。图片使用 img 元素，可以在网页中嵌入一幅图片，并通过CSS的width 和height 属性来定义图片的宽度和高...

2018-02-27 18:19:34 2770

原创 CSS 设置超链接格式

超链接超链接是万维网的基础，是它让整个Web成为一个整体，并获得生命。可以毫不夸张地说，整个Internet就是由超链接连接而成的。word也不例外，它也需要通过超链接实现各章节之间的互联，甚至链接到本文档之外的资源。在前面，已经介绍了链接的动态样式和根据文件类型显示相应文件类型的图标，来提高网站的可访问性。本节主要介绍如何区分一个链接是指向本站点的另一个页面，还是指向另一个站点上的页面，并为指向...

2018-02-27 18:18:54 2580

原创 CSS 设置表格格式

表格在word中，表格是一项很常用的功能，并且表格的样式变化多端，用户可以根据需要选择自己喜欢的样式。那么，各式各样的表格到底是怎么实现的呢？本节，通过一个简单的表格，来揭开word表格的神秘面纱。表格的HTML代码如下：<table><caption>表3-2 关系选择器</caption><thead> <tr> &...

2018-02-27 18:18:11 4225

原创 CSS 设置列表格式

列表在word中，列表也是使用频率非常高的元素。在CSS中，列表和列表项都是块级元素。也就是说，一个列表会形成一个块框，其中的每个列表项也会形成一个独立的块框。所以，盒模型中块框的所有属性，都适用于列表和列表项。除此之外，列表还有 3 个特有的属性 list-style-type、list-style-position和list-style-image，分别用来定义列表项目符号的样式、项目符号的位...

2018-02-27 18:17:24 948

原创 CSS 设置段落格式

段落在 word 中，一般都是通过段落来组织文本，段落是十分重要的组成部分。而 word 中的段落，主要有字体和段落两大属性。本节重点介绍字体和段落属性，在CSS中的对应属性及应用方法。字体属性word中的字体属性包括字体、字形、字号、字体颜色、下划线、效果等，如图 11‑11 所示：图11-11 word中的字体属性字体通过 font-family属性进行设置，为属性设置两个值，并把英文字体写...

2018-02-27 18:16:40 6259

原创纯CSS实现目录自动编号

正文设计纵观一篇word文档，一般都是通过章节来组织整个正文的内容，而构成正文的基本元素包括段落、列表、表格、超链接及嵌入式对象（如图片、视频、音频、文档）等。通过这些基本元素的排列、组合、嵌套，便构成了纷繁复杂、有条不紊的word文档。本节通过构建这些基本元素，来剖析一篇 word 文档的构建过程。章节在 word 文档中，都是通过各级标题来组织章节。对应到HTML中，使用标题元素 h1～h6 ...

2018-02-27 18:15:47 6859 1

原创目录树设计

目录树设计目录树的内容，将使用 dtree 来构建。使用 dtree 后，设计的重点就不是树，而是树中节点的设计。节点设计的核心是节点 id 的设计，既要保证节点 id 的唯一性，还要 id 有明确的含义，并且永不重复。事实上，对于节点设计的方案非常多，而对于这种树形结构，最合适的方案莫过于OID思想了。OID 在 SNMP 的 Mib 树中应用非常广泛，它可以为每个对象分配一个唯一的标识号。在构...

2018-02-26 22:05:09 5891

原创给网页穿上Word马甲

穿上马甲既然是网页版 word，就得穿上 word 的马甲，让人一眼看上去它就是真正的 word。其实，也非常简单。CSS3 提供了 border-image 特性，只需搞一个 word 的截屏，再把它设置为 wrapper 容器的边框图像，就有了 word 的轮廓，看上去就像真正的 word 了。由于图像边框会占据容器的空间，所以，需要调整容器的内边距，以便容器中的内容不会被边框图像所覆盖。CS...

2018-02-26 22:03:28 326

原创 CSS两栏布局之右栏布局

右栏布局右栏的主内容区包含页眉、正文和页脚三个部分。正文的内容将在11.3节介绍，这里只介绍页眉和页脚的布局。页眉包括两部分内容，左侧提供“文档结构视图”复选框，小屏幕用户可以通过该复选框关闭目录树，方便阅读。右侧为文章的章节标题。HTML代码如下：<header><label id="view"><input id="show" type="checkbox" /&..

2018-02-26 22:01:32 469

原创 CSS两栏布局之左栏布局

左栏布局左栏为文档的目录树，布局相对简单，分为顶部和底部两部分。顶部的左侧显示“目录”二字，以提醒用户这里是目录。右侧是一副图像，通过图像map提供“全部展开”和“全部收起”的链接，方便用户全部展开或全部收起目录树。HTML代码如下：<aside><header><span>目录</span><img src="../../img/open.p...

2018-02-26 22:00:46 497

原创 CSS 两栏布局之总体设计

总体设计随意打开一个 word 文档一看，其布局便一目了然。它分为左、右两栏，左栏为文档的目录树，右栏为文档的内容。而内容区又被分为页眉、正文和页脚三个部分。这里跟现实版的 word 保持一致，也采用相同的布局，并遵守HTML5结构化、语义化的要求。左栏为侧栏，用 aside 定义，其内容为目录树。右栏为主内容区，用 main 来定义，其内容为文章的正文。页眉和页脚用 header 和 foote...

2018-02-26 21:59:48 535

原创 CSS IE6躲猫猫Bug

IE6躲猫猫Bug在IE6中，另一个很奇怪而且让人抓狂的 Bug，就是 peek-a-boo Bug。peek-a-boo 是大人把脸一隐一现，来逗小孩发笑的一种游戏。因此，中文把它称作IE6躲猫猫Bug。IE6躲猫猫Bug出现的条件是：一个浮动元素后面跟着一些非浮动元素，接着是一个清理元素，所有元素都包含在一个有背景色或背景图片的父元素中。现在，我们构造一个HTML结构，来重现这个 Bug。代码...

2018-02-26 21:58:23 553

原创修复IE6重复字符Bug

IE6重复字符Bug在IE6中，如果一个元素中包含多个浮动元素，某些情况下，最后一个浮动元素中的最后几个字符，会在该元素的下面重复出现，被称作“IE6重复字符Bug”。当父元素的宽度减去最后一个浮动元素的宽度小于 3px 时，如果在第一个浮动元素和最后一个浮动元素之间，有多个 html 注释或 display：none 的元素，就会出现IE6重复字符Bug。并且，重复的字符数 =（注释的条数 + ...

2018-02-26 21:57:46 356

原创修复IE下相对定位子元素溢出Bug

相对定位子元素溢出Bug在页面上，常常使用 overflow 属性，来控制一个元素内容溢出时的处理方式。然而，在IE6和IE7中，当父元素设置了 overflow: auto 或 overflow: hidden，当子元素使用相对定位且高度大于父元素高度时，子元素就会溢出到父元素的外面。假设页面上有两个元素，#outter 为父元素，#inner 为子元素：<div id="outter"&...

2018-02-26 21:57:21 570

原创修复IE下相对容器中绝对定位Bug

相对容器中绝对定位Bug在页面布局中，将绝对定位的元素嵌套在相对定位的容器中，是一种很常见的布局。假设有两个元素，#outter 为父元素，#inner 为子元素：<div id="outter"> <div id="inner"></div></div>如果让父元素使用相对定位，子元素使用绝对定位，在 IE6 及更低版本中，它会有很多问题。最...

2018-02-26 21:56:37 3251

原创修复IE下列表 li 底部空行Bug

列表 li 底部空行Bug在IE6及更低版本中，如果在 li 元素中包含 display: block 的元素时，li 元素之间的空格将会转换为一个空行，夹在每个 li 的中间。假设使用上一节的HTML结构来制作垂直导航，为了增大链接的点击区域，常常将 a 元素的 display 属性设置为 block，让它成为块级元素。为了方便查看效果，为链接设置背景颜色：li a { display: ...

2018-02-26 21:55:59 351

原创修复IE下列表 li 的阶梯Bug

列表 li 的阶梯Bug在IE6及更低版本中，如果 li 元素中包含一些元素内容（如，链接元素），并且让其内容进行浮动，但 li 本身不浮动时，li 就会呈阶梯状。假设在一个无序列表中，包含多个 li 元素，并在每个 li 中包含一个链接元素：<ul> <li><a href="#">公司介绍</a></li> <..

2018-02-25 21:05:58 449

原创修复 IE 的文本3像素偏移Bug

文本3像素偏移Bug在IE6及更低版本中，当一个浮动元素与一个非浮动元素相邻时，在非浮动元素中，会莫名的为靠近浮动元素的内容添加 3 像素的间隙。假设在一个容器中，有两个元素：<div id="wrapper"> <div class="fl">float</div> <p>...</p></div&am

2018-02-25 21:05:27 397

原创修复IE的浮动元素双倍边距Bug

修复IE的常见BUGCSS开发人员可能经常会碰到的一个现象是，一个页面在IE（特别是老版本的IE）中显示正常，而在现代浏览器中却完全变形了，或者情况完全相反。常常能听到有人抱怨：“在IE上开发时间中，超过 60% 的时间，都是在与IE的Bug作斗争。”导致这一现象的根本原因，是不知道IE都有哪些 bug，也不知道如何解决这些 bug。在出现问题时，往往束手无措，更不要说预防 Bug 了。因此，作为...

2018-02-25 21:04:58 510

原创 IE的hasLayout

IE的hasLayout在 IE 浏览器中，一个元素要么自己对自身的内容进行组织和计算尺寸，要么依赖于包含块来组织内容和计算尺寸。为了协调这两种方式的矛盾，IE 浏览器的渲染引擎使用了一个私有属性 hasLayout，它是一个布尔型变量，取值为 true 或 false。当一个元素的 hasLayout 属性取值为 true 时，就说这个元素“拥有布局”。hasLayout是一个只读属性，无法通...

2018-02-25 21:04:24 270

原创浏览器私有前缀

浏览器私有前缀CSS3 规范从启动到成为W3C 的推荐标准，一般要经历数年。在W3C 开发标准的过程中，浏览器通常会提前实现这些特性。浏览器厂商通常都是在属性名称前添加厂商的私有前缀，来测试这些尚未成为标准的特性。因此，可以借助私有前缀，来解决浏览器对CSS3的兼容性问题。不同的内核都有各自的私有前缀，三大主流内核的私有前缀见表 10‑2：表 10-2 浏览器私有前缀内核前缀主要浏览器Triden...

2018-02-25 21:03:37 1016

原创客户端脚本selectivizr，PIE，Respond.js

客户端脚本CSS很强大的一点是，它具有很强的向前兼容性：如果浏览器不识别某个属性或值，它会忽略这个声明；如果不识别某个选择器，它会忽略整个规则。这意味着新的选择器、属性和值，不会对老的浏览器产生严重影响。因此，设计师就可以大胆的应用CSS3的高级规则和声明，而不必担心老浏览器是否能够识别。事实上，这些高级规则确实给设计带来极大的便利，设计师都迫不及待的要使用它，并且希望它们在老的浏览器中，和现代浏...

2018-02-25 21:02:46 697

原创 CSS 兼容浏览器的方法 CSS Hack

兼容浏览器的方法开发人员基本都知道，CSS的开发本身并不难，但是，当在不同的浏览器下测试代码时，困难就出现了。浏览器的 bug 和不一致的显示方式，是大多数CSS开发人员面临的主要难题，你的设计在一种浏览器上看起来很好，而在另一种浏览器上可能会支离破碎。实践证明，CSS的兼容性主要有两种情况：一种是对老版本IE的兼容性，一种是使用CSS3新特性后产生的兼容性。对老版本IE的兼容性，主要通过CSS ...

2018-02-25 21:02:18 1132

原创 CSS 渐进增强与优雅降级

渐进增强与优雅降级你可能听过优雅降级（graceful degradation）和渐进增强（progressive enhancement）这两个词，它们是构建Web应用时，处理多浏览器支持的两种方法论，并在Web社区中引发过激烈的辩论。持优雅降级观点者认为，应该针对最高级、最完善的浏览器来设计网站。然后，再为那些被认为过时或有功能缺失的浏览器提供候选方案，使之基本可用，但不至于完全失效。这样一来...

2018-02-25 21:01:47 724

原创 CSS3 响应式布局实例

布局实例掌握了响应式设计的核心技术之后，你可以迫不及待想要使用它来构建响应式网站了。也许你会认为响应式设计有点复杂，但事实上，它比你想象的要简单。下面通过构建一个响应式的页面基本布局，让你快速了解如何使用响应式设计技术来构建响应式网站。首先，创建HTML结构和页面布局。最常见基本布局将页面划分为 4 个部分，分别是头部、主内容区、侧边栏和页脚，而主内容区和侧边栏一般都会包含在一个容器中。如：&lt...

2018-02-25 21:00:55 3941

原创让老IE支持CSS3响应式布局

兼容老IE对于响应式布局，有一点需要注意，就是IE8 及以下的版本不支持媒体查询，这意味着它们只会呈现媒体查询以外的样式，即基准样式。并且，它们也不支持HTML5 的 header、main、aside、footer 等新元素。对于IE8及更早的版本，可以什么都不做，让网站显示最基本的版本，或者为它们单独创建一个样式表，让它们显示网站最宽的版本。当然，大多数人还是倾向于让页面具有响应式的效果。这也...

2018-02-25 21:00:05 479

原创 CSS3 响应式布局之响应式图片

弹性图片默认情况下，图像的显示尺寸是 HTML 中指定的 width 和 height 属性值。如果不指定这些属性值，图像就会按原始尺寸显示。当然，还可以在 CSS 中以像素为单位，设置图像的 width 和 height。在现代浏览器中（包括IE7+）中，只需将图像的 max-width 属性设置为百分数，就可以让图像随着弹性网格自动缩放。如：img { max-width: 100%;}...

2018-02-24 22:11:28 5335

原创 CSS3 响应式布局之弹性网格

弹性网格当页面需要适应各种尺寸的设备时，就应该使用弹性网格，让整个布局结构根据用户行为，以及设备环境进行响应式调整。弹性网格是一个网格系统，它参考流式布局中网格系统的设计，将每个格子设置为百分比宽度，以便网格的宽度会随时根据浏览器窗口大小做出相应的调整。那如何将固定宽度的网格系统，转换成弹性网格系统对应的百分比宽度呢？响应式设计之父 Ethan Marcotte 提供了一个简单易行的公式：目标元素...

2018-02-24 22:10:33 826

原创 CSS3 媒体查询（Media Queries）

响应式布局在早些时候，为了满足移动用户的需求，需要为移动设备专门建立一个额外的网站。随着响应式设计的出现，这种做法已经越来越少见了。2010年5月25日，Ethan Marcotte在A List Apart上发表了一篇开创性的文章，在这篇名为Responsive Web Design的文章中，他将媒体查询、弹性网格布局、弹性图片这三种已有的开发技术整合起来，并命名为响应式Web设计（RWD，Re...

2018-02-24 22:10:00 3133

原创 CSS3 Flex布局子元素的属性

弹性子元素的属性弹性布局盒模型的核心，在于弹性容器中子元素的尺寸是弹性的，容器会根据布局的需要，自动调整子元素的尺寸和顺序，并以最佳方式填充所有可用空间。当容器中有空白空间时，子元素可以扩展，以占据额外的空白空间；当容器中的空间不足时，子元素可以缩小尺寸，以防止超出容器范围。在弹性布局盒模型中，浏览器会根据子元素的相关属性，来自动调整子元素的尺寸和顺序。这些属性见表 9‑8：表 9-8 CSS3弹...

2018-02-24 22:09:22 3023

原创 CSS3 Flex布局弹性容器的属性

弹性容器的属性为了实现对弹性子元素的灵活控制，在弹性容器上定义了相关属性，通过这些属性来控制主轴的方向、子元素溢出后的行为、子元素的对齐方式等。这些属性见表 9‑2：表 9-2 父元素属性属性说明flex-direction定义容器的主轴方向flex-wrap定义容器溢出后的行为，即容器溢出后是否换行flex-flow复合属性，定义容器的主轴方向和溢出后的行为align-items定义单行容器的侧...

2018-02-24 22:08:47 905

原创 CSS3 建立弹性盒布局 Flex布局

建立弹性盒布局弹性盒布局模型中引入了一些新的属性，只要设置好相应属性，盒子就具有弹性，在改变浏览器窗口大小时，盒子大小也会自动发生变化。并且，盒子的大小由浏览器自动计算，使页面布局更加灵活、更加简单，可以很轻松创建自适应浏览器窗口的流式布局。如，在class = "father" 的父元素中，包含class = "box1"、class = "box2"、class = "box3"三个子元素。H...

2018-02-24 22:07:43 611

原创 CSS3 弹性布局盒模型 Flex布局

弹性布局盒模型Web 应用中，布局设计是非常重要的一部分。随着响应式设计的盛行，一般都要求 Web 应用能够适配不同尺寸的设备。响应式设计中最重要的一环就是布局，需要根据窗口尺寸来调整布局，从而改变元素的尺寸和位置，以达到最佳的显示效果，这也使得布局的逻辑变得更加复杂。CSS3中，提出了弹性布局盒模型（Flex Layout Box Model），它一种全新的布局方式，其目的是提供一种更加高效的方...

2018-02-24 22:06:57 365

原创 CSS3 多列布局列的填充方式column-fill属性

列的填充方式在多列容器中，如果显式设置了容器的高度，往往会由于内容不足，而导致最后面的列没有内容填充，就会出现各列高度不一致的情况。这种情况下，就可以通过 column-fill属性来控制各列内容的填充方式，可选值为 auto | balance。balance 表示各列的内容均衡填充，auto 表示各列的内容自动填充。由于多列布局还没有成为正式标准，各浏览器的默认填充方式也没有得到统一。Fire...

2018-02-24 22:05:35 1439

原创 CSS3 多列布局的跨列

跨列默认情况下，多列容器中的内容，会一列一列地自动填充。但有时候，却需要其中的某些内容（如，文章标题）不是多列布局，而是横跨所有列。要实现类似报纸、杂志上的跨列效果，就可以使用 column-span属性，来控制多列容器中的某个子元素是否横跨所有列，取值为 none | all。none 表示不跨列，all 表示横跨所有列。如，在上述结构中增加一个 h2 标题和若干个段落，为了节省篇幅，用（…）代...

2018-02-24 22:05:01 1708