使用 CSS3 渐进增强 在编写 Web 页面时，首先让他们在基础的浏览器和设备上正常工作且展现得当，然后再辅以更高级但非必要的 CSS 和 JavaScript 等增强功能，为当前和未来的浏览器提供更好的支持。 相对于那种一开始就力求完美的编写方式，渐进增强的开发方式更能符合我们的实际情况，用户无论在任何浏览器都能够正确展示，但如果在符合增强方式的浏览器运行时就会展现更加丰富的效果。 提升性能 使用...
自定义属性： 选择器 -webkit--moz--o- 属性选择器 在CSS3以前，如果需要选择选择某个/类元素的话，一般会使用id/class来进行选择，CSS3则提供了更强大的功能，可以根据元素中的某个属性，从而选中该元素。具体如下： E[attr]：属性名为 attr 的所有 E 元素 E[attr="value"]：属性 attr 的属性值 为 value 的所有 E 元素 E[attr~="value"]：属性值(>=1)中包含 value 的 E[attr^="value"]：属性值是以 value 开头的 ...
选择器： :root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。 :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。 :empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。 :target选择器称为目标选择器，用来匹配文档(...
前言 CSS代码难维护众所皆知。 为一个元素设置样式的方式可以通过定义的class、定义的id、元素的标签名、元素的属性等选择器以及这些选择器的组合来实现； 作用于某个元素上的样式又可能来自单个样式规则，也可能来自多个样式的组合，还可能来自父元素； CSS样式可以定义在元素的style属性里面，也可以定义在页面head部分，还可以定义在单独的CSS文件中。 CSS样式定义上的灵活性带来的是CSS代码的多样性，如...
上一篇中，我们为组件添加了“删除一条item”的功能，现在，再增加一个“增加一条item”的功能。 首先，在页面中增加一个按钮，用来触发添加功能（红框中的内容是对比上一篇新加的代码）。 在main.js中绑定按钮的单击事件，触发add函数。 再在smartList.js里写add函数。 1 // 增加一条数据 2 SmartList.prototype.add = function (data) { 3 4 var isExist = false; 5 6 // 判断id是否已存...
Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。 移动设备优先策略 内容 决定什么是最重要的。 布局 优先设计更小的宽度。 基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。 渐进增强 ...
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素： 标签 描述 为表格添加基础样式。 表格标题行的容器元素（），用来标识表格列。 表格主体中的表格行的容器元素（）。 一组出现在单行上的表格单元格的容器元素（ 或 ）。 ...
前言 之前在写网页的时候有一个展示图片的需求,我使用一个div包裹一个img,但是在浏览器中预览的时候碰到了一下的问题,仔细看,图片和div之间有间隙。下面贴上简易的代码 .content{ float:left; margin:100px auto; background:pink;} 我外层容器content设置浮动,按浮动元素会收缩的原理,本不应该出现这条粉色的间隙,但为什么这里会有呢？之后去网上查了一下,其中涉及到了line-height以及vertical-align的...
声明：本文大多数知识是从慕课网摘录而来，加了一点自己的注释 1.</e m> 斜体 2.在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入 3.可恶的空格在HTML中只能这样写→   ; 4. 单选框 若type="checkbox" 则为复选框 5.初识CSS css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示： CSS 选择符：又称选择器，指明网页中...
如果希望选择具有某个属性的元素，而不论该属性的值是什么，可以使用属性选择器。 例如要选择有 class 属性（值不限）的所有 h1 元素，可以这样写： h1[class]{} 也可以根据多个属性进行选择，例如，为了将同时有 href 和 title 属性的HTML超链接的文本置为粗体，可以写作： a[href][title]{font-weight: bold;} 还可以只选择有特性属性值的元素，例如想要选择链接指向 “http://www.163.com” 的 a 标签： a[hr...
原文地址： http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是笔者的 《CSS 设计指南》 学习笔记的第二部分，由于最近都在准备期末考的事，所以都没来得及对 《CSS 设计指南》 进行一些总结，没有看之前第一部分的话也可以从 这里传送过去。 第三章 定位元素 3.1 理解盒模型 其实 HTML 页面中每个元素其实都是一个「盒子」，默认情况下这些盒子的边框不可见，背景也是透明的，所以我们不能直接的看...
众所都之，数组项在一个数组中都有自己的位置。在JavaScript中提供了两个确定数组项位置的方法： indexOf() 和 lastIndexOf() 。今天我们主要一起学习这两个方法是如何使用，又是如何查找出数组项在数组中的确切位置。 indexOf() 方法 indexOf() 方法从数组的开头（位置为 0 ）开始向后查询。 indexOf() 方法返回指定数组项在数组中找到的第一索引值。如果通过 indexOf() 查找指定的数组项在数组中不存在，那么返回的值会...
文字排版--字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。 body{font-family:"宋体";} 这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）现在一般网页喜欢设置“微软雅黑”，如...
JavaScript中提供了 sort() 和 reverse() 方法对数组项重新排序。但很多时候这两个方法无法满足我们实际业务的需求，比如说扑克牌游戏中的随机洗牌。 在这篇文章一起来学习如何完成上面这个示例的效果，以及一些有关于数组随机排序的相关知识。 在网上查了一下有关于数组随机排序的相关资料，都看到了 Math.random() 的身影。打开浏览器控制器，输入： Math.random() 有关于JavaScript随机数相关介绍...
1、语义化，让你的网页更好的被搜索引擎理解 标签的用途：我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。 讲了这么多语义化，但是语义化可...