如何通过css的media属性，适配不同分辨率的终端设备，示例如下: 首页 @media (max-width:768px) { #div1 { width: 400px; margin: 0 auto; background:url('../img/1.JPG'); } #img2,#img3 { width: 100px; } } @media (min-width:768px) { #div1 { width: 600px; margin: 0 auto; background:url('../img/1.JPG'); } #img2,#img3 { width: 200px; } } @media (min-width:992px) { #div1 { width: 800...
在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题，而且关于Attribute和Property的区别也让人十分头痛，在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。 读写方式 data-*有两种设置方式，可以直接在HTML元素标签上书写 Click Here 其...
html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5学习笔记</title></head><body bgcolor="#90ee90"><b>加粗</b><br/><em>着重文字</em><br/><i>斜体字</i><br/><small>小字体</small><br/><strong>加重语气字</strong><br/>接下来是<sub>下标</sub><br/>然后是<sup>上标</sup><br/><ins>下划线</ins><br/><del>删除线</del><br/></body></html> 版权声明：本文为博主原创文章，未经博主允许不得转载。
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念. 顺序规则 如果不对节点设定 position 属性, 位于文档流后面的节点会遮盖前...
写在前面：由于CSS5标准还未完全订下来，所以各种内核的浏览器都有自己的标准，为了不使属性混淆，所以各家在各自标准前加了一个前缀。 -moz- 主要是firefox火狐 -webikt-主要是chrome谷歌和Safari -o-主要是用于苹果机上的浏览器如Opera 下面主要从颜色、文本、选择器等方面来总结一下CSS3新增的属性 颜色 css1和css2只能通过以下三种方式来表示颜色 颜色名称 eg:color:red HEX方式 （语...
这两天写个页面css的时候用到了vertical-align属性，使用过程中踩到了坑，所以总结如下： vertical-align的定义 W3C上对vertical-align的定义：vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。 文本通常根据不可见的基线进行对齐的，而字母...
2D 转换（须在style里面定义）：位移，缩放，旋转，斜切（扭曲） 转换---关键字：transform; 属性有： 1， 位移：translate（0px，0px） 属性值：（0px,0px）括号里跟两个值，用逗号分割，使元素沿x轴，y轴坐标位移，第二个值可以不给，如果不给则默认为0。 2， 缩放：scale（.5, .5） 属性值：（.5 , .5）括号里跟两个小数（百分数），用逗号分割，元素中心点做为缩放基点， 使元素沿x轴，y轴坐标按比例...
z-index属性值为负数的作用: 在很多CSS代码中，可以看到z-index属性值被设置为负数的情况，下面就简单介绍一下，此属性值为负数情况下的表现。在一般情况下只要对象设置了position属性，且属性值不为static，那么此对象能够覆盖非定位对象，代码实例如下: 蚂蚁部落div{ width:100px; height:100px;}.a{ position:relative; right:20px; top:20px; background-color:red; z-index:1;}.b{ background-color:green;} 以...
text-align属性有没有继承性: text-align属性可以将对象内的文本水平居中对齐，应该说不是什么难点，可能有时候会有这样的疑问词属性有没有继承性，如果有的话可以给父元素定义一个居中方式，下面子元素集成就可以了，能够节省些许代码。代码实例如下: 蚂蚁部落.grandfather{ width:440px; height:350px; background-color:green; text-align:right;}.parent{ width:200px; height:200px; background-color:blue;}....
Flex属性定义 .flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } 一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。 伸缩容器(flex containers)是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex items)。...
var pageController = { init: function () { this.featureBtnInit(); //功能按钮初始化 }, featureBtnInit: function () { //功能按钮 var $featureBtn = $("#featureBtn"); var openClass = "btn-feature-open"; if (!$featureBtn[0])return this; $featureBtn.on("click", function () { if(!$featureBtn.hasClass(openClass)){ ...
使用CSS3各个属性实现带有音乐小人的动画，完全不使用JS代码： 注：chrome浏览器效果最佳，最终效果静态图： HTML代码如下： <meta http-equiv="Content-Type" content="text/html; charset=utf-8";> 练习一个小人的动画 I ? Y O U ...
background-color属性有没有继承性: 因为对象的背景默认是透明的，所以如果父对象设置了背景颜色之后，子对象也呈现为父对象的背景颜色，好像子对象继承了父对象的背景颜色，其实这是一种视觉错误。下面通过一个实例来说明一下background-color不具有继承性。 实例代码: 蚂蚁部落 .parent { width:200px; height:200px; border:1px solid red; background-color:green; } .children { width:120px; height:1...
font-size属性有没有继承性:这问题自然再简单不过了，不过可能初学者有时对这个问题可能存在疑问，会造成处处为标签内的元素设置字体。这里可以给出一个肯定的答案，font-size数据具有继承性，这样有利于对网页字体进行统一设置。 代码实例如下: 蚂蚁部落body{ font-size:12px;}蚂蚁部落 太阳出来了 由以上代码的运行表现可以看出，font-size属性具有继承性。原文地址是:http://www.51texiao.cn/div_cssjiaoc...
CSS的z-index属性是做什么用的: 在网页制作中，可能有这样的需求，就是让几个层重叠在一起，并且可以指定顺序，这时候使用z-index属性是个不错的选择。 但是此属性仅作用于position属性值为relative、absolute或fixed的对象，不会作用于窗口控件，如select对象。 实例代码如下: 蚂蚁部落.index1, .index2, .index3{ position:absolute; width:150px; height:100px;}.index1{ z-index:1; background-color:#663}.i...