关闭

CSS3阴影 box-shadow的使用和技巧总结

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩...
阅读(599624) 评论(14)

IE6 IE7 IE8 css bug兼容性解决方法总结归纳

1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外。 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其低级元素ul的padding引 起,padding的上下值对li有影响,左右无影 响。所以只好笨手笨脚地把padding去掉,换成margin。这是能解决问题,但往往不是我们想要的结果,或许...
阅读(4721) 评论(1)

【CSS笔记之十】深入认识display:inline-block和hasLayout

【CSS笔记之十】display:inline-block和hasLayout hasLayout设计的初衷是用于辅助块级元素的盒子模型的,它是用于块级元素的。如果用于行内元素,会引发一些特殊效果。 设置宽高属性width、height值都可以触发hasLayout,但是有时候带来副作用,现在常用zoom:1;来触发,极少数非常复杂的css设置情况zoom无效的时候,需要借助更为强大的“pos...
阅读(3733) 评论(2)

【CSS笔记之九】CSS选择符权重、CSS Sprite技术和CSS hack

一、在实际使用中,使用类要注意:多用组合,少用继承。 上下margin重合问题:margin是个特殊的样式,相邻的margin-left和margin-right是不会重合的,但相邻的margin-top和margin-bottom会产生重合。 如果不确定模块的上下margin特别稳定,最好不要将它写到模块的类里,而是使用类的组合,单独为上下margin挂用于边距的原子类(如mt10/mb...
阅读(1894) 评论(0)

【CSS笔记之八】CSS标签语义化、怪异模式和CSS的组织方式

CSS语义化标签需要注意的问题 1.虽然CSS布局中不推荐使用table。但是table布局在二维数据展示方面是最好的选择。table除了table、tr、td标签外,表格标题要用caption,表头用thead包围,主体部分tbody包围,尾部用tfoot包围,表头和一般单元格要区分开,表头用th,一般单元格用td。 2.尽可能减少使用div、span等无语义标签。 3.在语义不明显,...
阅读(1403) 评论(0)

【五月夏花】CSS笔记之七:话说CSS字体属性font-family、font-style、font-size、font-weight、font-variant

话说CSS字体属性font-family、font-style、font-size、font-weight、font-variant: 使用CSS,可以对字体进行设置,字体属性包括五种常见属性:字体系列font-family、字体样式/字体风格font-style、字体大小font-size、字体粗细font-weight、字体变量font-variant。通过这五个属性,可以设定文本在we...
阅读(15566) 评论(0)

【CSS笔记之六】filter滤镜在IE浏览器失效的原因、Chrome不认document.documentElement.scrollTop的解决方法

一、filter滤镜在IE浏览器失效的原因及其解决方法 在项目后期补充交互效果的时候,发现有时候filter滤镜在IE浏览器下会失效。用IE Developer Toolbar检查测试后发现hasLayout 属性值为0。说明造成此现象的原因依然是IE的Layout没有被触发。 触发IE Layout的方式很多,比如display:inline-block;width/height:除...
阅读(12879) 评论(1)

【CSS笔记之五】IE6/IE7/IE8下float:right的异常及其解决方法

示例分析代码: 安卓首页>安卓游戏> 角色育成 下载量排序时间排序 对应CSS样式代码: #channel_tit h1,#channel_tit h2{ background:none; font-size:14px; padding-left:10px; height:34px; line-height:34px; width:6...
阅读(21033) 评论(2)

由锚点失效引发的hasLayout探究

最近在项目中遇到了一些与锚点相关的问题,由此引出hasLayout的一系列概念和方法,在此记录下来与大家一起分享。 一、锚点的相关问题 1.html map定位的名字问题。 大部分浏览器都支持map的name属性,而webkit内核的浏览器,如chrome和safari,不认识name,必须使用id,否则定...
阅读(6195) 评论(0)

柳絮纷飞的日子——CSS笔记之四

1.IE6也认识!important.我们知道!important一般用做提升优先级,区分IE6和Firefox/Chrome/Opera/IE 其他版本的hack,不过并不是因为IE6完全不支持!important. 代码段一:   .test{ color:blue !important; color:green; } 代码段一 代码段二: .test{ color:...
阅读(1197) 评论(0)
    个人资料
    • 访问:3215550次
    • 积分:11708
    • 等级:
    • 排名:第1443名
    • 原创:120篇
    • 转载:45篇
    • 译文:2篇
    • 评论:180条
    最新评论