• 从实际使用分析CSS引用方式的异同2013-04-07闲来无事,翻看各个门户网站的代码。发现在引用CSS的方式上存在很大的区别,主要表现为使用 import、link以及在当前页面插入。就我个人而言,一般只用到link方式,所以看到超级大站用其他两种方式不免想要探个究竟,多么可贵的学习精神……淘宝网用的是import方式,代码如下:<..【阅读全文】
  • 收集的CSS浏览器兼容问题大全(转载)2013-04-07CSS技巧1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。 缺点是要控制内容不要换行2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 解决方案是在这个div里面加..【阅读全文】
  • CSS中强大的EM,css的em属性学习全攻略2013-04-07使用CSS也好久了,但一直都是在使用“px”来设置Web元素的相关属性,未敢使用“em”。主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中要求使用“em”作为单位设置元素,所以从头对“em”学习了一回。稍为有一点理解,今天特意整理了一份博文与大家一起分..【阅读全文】
  • 怎样用css实现图片垂直居中(兼容IE6/IE7)2013-03-26优劣对比:1.利用table-cell实现居中,font-size做兼容兼容IE6+/FF/Chrome优点:不添加任何多余标签,兼容主流浏览器缺点:需要计算处理font-size2.利用line-height实现居中兼容IE7+/FF/Chrome优点:不需要任何hack,兼容IE7+主流浏览器缺点:此方法不兼容IE6,当然也可以用方法1..【阅读全文】
  • Foundation的sass版本2013-03-261什么是sass? sass是css预处理器的一种,我们也听说过less,less与sass的最大区别就是,less是基于JavaScript,所以,是在客户端处理的,Sass是基于Ruby的,所以是在服务器端处理的。 2什么是ruby? 想要支持sass,那必然要先安装ruby环境,自然先要搞清什么是ruby,不过,我在这..【阅读全文】
  • css基础:一张图片做导航2013-03-26<html xmlns="/upload/201303/2013326112236t91.png) no-repeat 0 0;}#mini_nav li {width:65px; height:38px; float:left;}#mini_nav li a {display:block; width:65px; height:38px; padding-top:40px; overflow:hidden;}#mini_nav li a:hover {background:url(nav.png)..【阅读全文】
  • 【css】浅谈inline-block 属性2013-03-26如今有很多网站都用上了 inline-block 属性,比如 {display:inline-block; *display:inline; *zoom:1},以上 css 代码随处可见。很多人看见 *display:inline; *zoom:1 就下意识的认为:哦,原来 inline-block 这个属性 ie6 和 ie7 不支持。那么 ie6,7 真的不支持 display:inline-b..【阅读全文】
  • HTML+CSS布局小节2013-03-26好久没有更新了,学习也一直停顿着。今天看到同学的一句博客“你的高度决定你的视线,长得不高不是你的错,但是站的不高就是你的错了。”废话少说,开始学习:这几天一直在研究HTML+CSS布局。并没有把所有的布局都弄明白,只学了一点常用的css控制属性;先上图看看吧。..【阅读全文】
  • CSS读书笔记(一)2013-03-26这是开通blog后的第一篇随笔,争取养成勤于记录的好习惯,进入正文,精通CSS 高级Web标准解决方案(第二版)自认为是一本非常不错的css教程,借同事的已经读过几遍,每一遍都会有新的收获。1.子选择器、相邻同胞选择器 IE7以及更高版本的IE,FF,Chrome等浏览器都支持这两个选择器..【阅读全文】
  • CSS读书笔记(二)2013-03-26浏览器常见bug以及修复。1.双外边距浮动bug 最常见的bug是IE 6和更低版本中的双边距浮动bug,这个bug使任何浮动元素上的外边距加倍。 修复:display:inline2. 3像素文本偏移bug IE5和IE6上的bug,当文本与一个浮动元素相邻时,这个bug就会表现出来。例如将一个元素向左浮动,..【阅读全文】
  • CSS:不规则图片 瀑布流原理2013-03-20在项目中遇到了不规则图片墙的布局问题 分析原理如下:1.img display: block; 解决3px img标签bug2.img 设置height 和width 不然会出现 下面的图片如果先加载上面的图片再加载时 会推动图片向下移动3.父div position: relative; 让图片价格可以相对绝对定位4.子span position: abs..【阅读全文】
  • 纯CSS制作带三角(border篇)2013-03-20.arrow-up { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; _border-left: 5px solid white; _border-right: 5px solid white; border-bottom: 5px solid black; overflow:hidden;}.arrow-down { width: 0; height: 0; border-..【阅读全文】
  • 流行浏览器内核分类及样式区别2013-03-18一、流行浏览器内核分类1、Trident内核,代表产品IE。Trident(又称为MSHTML),是微软开发的一种排版引擎。Trident只能用于Windwos平台。 2、Gecko内核,代表作品Mozilla Firefox。Gecko是一套开放源代码的、以C++编写的网页排版引擎。它的最大优势是跨平台,能在Microsoft Wind..【阅读全文】
  • clientWidth clientHeight scrollWidth scrollHeight offsetWidth offsetHieght的区别2013-03-14clientWidth:元素内容区的宽度加上左右padding的值,如果有滚动条,不包括滚动条的宽度clientHieght: 元素内容区的高度加上上下padding的值,如果有滚动条,不包括滚动条的高度clientLeft:元素左边框的宽度,如果没有边框,就是0clientTop:元素上边框的宽度,如果没有边框,就是0 ..【阅读全文】
  • CSS滤镜兼容浏览器的实例2013-03-14 CSS代码.test{ background:#000; color:white; width:200px; position:absolute; left:10px; top:10px; filter: Alpha(opacity=10); -moz-opacity:.1; opacity:0.1; } 这里关键的是CSS代码filter: Alpha(opacity=10); -moz-opacity:.1; ..【阅读全文】
  • 10个获取免费网页背景纹理的最佳网站2013-03-121. Din Pattern创建这个网站的是 Evan Eckard,他开始只是作为一种业余爱好,后来变得越来越专业。 2. Squidfingers这些纹理由具有多年经验的专业平面设计师设计,非常的精美,可以免费下载使用。 3. Kaliber 10000几年前,这可能是最好的设计网站之一,但如今在设计方面被 Kalibe..【阅读全文】
  • css实现不规则图形2013-03-12闲着没事,逛了下googlepaly网站 看着他们的tabs选项卡样式竟然用的不是图片,而是css实现的斜边,没事简单说了一下自己理解的其中的原理1,理解border的原理查看样式style部分border-bottom:24px solid #F00; border-right:24px solid transparent; border-top:24px solid #F00; ..【阅读全文】
  • 重置浏览器默认样式2013-03-12浏览器内置了很多元素的默认样式,例如超链接的蓝色带下划线的文字样式。h1元素同样具有默认样式,例如外边距,粗字体,大字号等样式。糟糕的是,不同浏览器有不同的默认样式。 为更好的控制元素样式,Eric Meyer提供了一个样式重置工具,来提高设计师的工作效率。这是一张名为res..【阅读全文】
  • CSS属性值记号法2013-03-12CSS属性值记号法是一种描述如何定义样式规则的方法,即描述CSS语法的一种方法。例如,定义某元素边框的样式规则可用如下记号法(语法)描述。border: [ <border-width> || <border-style> || <border-color> ] | inherit在CSS规范中,对属性值记号法进行了详细..【阅读全文】
  • 获得css中的计算样式2013-03-12要获得css元素中的计算样式(即经过层叠之后,最终的样式),支持W3C的浏览器可以使用document.defaultView.getComputedSyle方法。该方法接受两个参数,第一个参数为要获得样式的元素,第二个参数为一个伪元素字符串(例如:":after",如果没有,就置为null)。该方法返回一个S..【阅读全文】
共 1231 条记录┊当前页次:1/62┊20条/页
首页上一页12345下一页尾页