shendayun1989-CSDN博客

原创纯CSS定位的固定浮动层代码不闪兼容IE6 8 火狐谷歌等

/* IE8 火狐谷歌等固定样式 */ .fixed-bottom { position: fixed; bottom: 0px; width: 1100px; left: 50%; margin-left: -550px; } /* IE6 固定样式 */ * html,* html body /* 修正IE6振动bug */...

2013-12-03 14:48:30 122

原创 em与px的介绍及换算方法

em是何物？ em指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font -size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原...

2013-11-22 09:46:19 159

原创解决弹出层被Flash挡住的问题

网页弹出的层被Flash 或Select 下拉列表阻挡的解决方法！今天在做网页的时候，我想在flash上放一个层，然后放图片等内容，可是总是被flash遮挡，因此总结了一下对于这方面的问题的几个解决方法，希望可以对朋友和自己有帮助！1.flash把层遮挡住了，如何处理呢？=========================================================...

2013-10-31 13:32:20 110

原创各种浏览器的Hack写法(chrome firefox ie等)

Hack是针对不同的浏览器去写不同的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不同的浏览器写不同的CSS CODE的过程，就叫CSS HACK，同时也叫写CSS Hack。然后将Hack放在浏览器特定的CSS文件中，让其符合条件的浏览器解析这些代码，就如前面所说的条件样式，我们将CSS Hack代码放入条件样式文件中，符合条件的浏览器就解析，不符合的将不解析，从面达到您所需要的页...

2013-07-05 13:59:35 84

原创 IE8的css hack

今天碰到一个问题，就是input输入框设置了一个高度height:40px;然后没有设置line-height，这是在Chrome里面显示是正常的但是IE7下输入的文字就会靠着顶部对齐，如图这时很容易就会用到IE7的hack写法，加上*line-height:40px;解决了IE7下的问题，但是看看IE8下又出现了IE7开始的问题，这时就要找I...

2013-07-01 15:55:20 92

原创 CSS中的行为——expression

最近对CSS中的行为比较感兴趣，虽然是不符合标准的也只有ie才能识别，但是他确实给css的功能扩展了不少。下面是摘自互联网上的文字和例子，因为都被转烂了，没法注明出处。IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式...

2013-07-01 14:04:21 109

原创 CSS定义Input之Radio和Checkbox的样式

CSS定义Input之Radio和Checkbox的样式<style type="text/css">form#form1 {font:12px tahoma,sans-serif} input[type="checkbox"] {visibility:hidden;width:0;height:0;margin:0;padding:0;}input[...

2013-05-27 14:56:13 137

原创 CSS 网页文字渐变效果

这里是一个简单的CSS技巧，它将向你展示使用一个png图片制作渐变文字的方法(纯CSS、无Javascript或Flash)。而你所需要的仅仅是在标题里面的一个空<span>标签，它使用背景图片和position:absolute属性将标题覆盖。该技巧经主流浏览器测试：Firefox, Safari, Opera, 以及Internet Explorer 6。好处这是一个...

2013-05-24 10:25:33 108

原创 CSS pointer-events 让鼠标穿透元素

最近，认识到一个新的CSS属性：pointer-events。称为鼠标事件，超级实用的属性！让我们来看看两个例子：　　首先，上图是某东商城的商品列表页中的商品，在右上角有一个“惊爆价”的图标，大家都知道这是用一个标签在绝对定位上去的，会遮住下面的商品图片，鼠标移到“惊爆价”图片是点击不了后面图片的链接的，当然我们也可以给这个图标也加上链接，这样就能解决问题。（今天可不是说这么简单的事情...

2013-05-15 20:34:43 540

原创 div+css的padding缩写方式

在css中使用padding可以将padding-top, padding-bottom, padding-left, padding-right缩写为一个标记。padding标记可以带一个、二个、三个、四个参数，各有不同的含义。[示例代码]<html> <body> <div style="border: 1px solid red;...

2013-05-08 09:58:18 77

原创 CSS 单行溢出文本显示省略号...的方法（兼容IE FF）

html代码：<div><p><span>CSS Web Design 我爱CSS-Web标准化 Div+css教程 - www.52css.com</span><p></div>css代码：div{width:200px;/*容器的基本定义*/height:200px;background-color:#eee...

2013-05-06 15:35:21 80

原创手机web——自适应网页设计（html/css控制）

文章主要参考于：http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html(阮一峰的网络日志) 在这篇文章的基础上加上了写自己的理解（文章蓝色部分）。一. 允许网页宽度自动调整："自适应网页设计"到底是怎么做到的？其实并不难。首先，在网页代码的头部，加入一行viewport元标签。 <...

2013-05-03 16:43:47 822

原创 [转载] 移动平台前端开发布局技巧(1)

此说明一下，在此所说的移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发Wap 2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解，你需要对HTML5和CSS3有一定的了解。如果你已经对此有所了解，那现在就开始往下阅读吧……1、首先我们来看看webkit内核中的一些私有的meta标签，这些met...

2013-04-19 10:14:32 183

原创 IE6 PNG透明终极解决方案

“珍惜生命，远离IE6”，IE6中的bug令很多Web前端开发人员实为头疼，因此不知道烧了多少脑细胞，在众多的Bug中最令人抓狂的就是IE对png图片的不支持，导致设计师和重构师放弃了很多很炫的效果，为了让大家在这方面少烧点脑细胞，KwooShung我就舍身一把，把当前最流行最实用的IE6支持PNG图片的方案整理到本贴内，以供大家学习参考！方案1 - 滤镜解决方案：介绍：滤镜从IE4.0被...

2013-04-19 09:59:24 55

原创多行文本溢出显示省略号(...)的方法

现在的浏览器都支持text-overflow:ellipsis属性，用来实现单行文本的溢出显示省略号，但是这个属性并不支持多行文本。那么有没有方法在多行文本上实现同样的效果呢？-webkit-line-clampWebkit支持一个名为-webkit-line-clamp的属性，他其实是一个WebKit-Specific Unsupported Property，也就是说这个属性并不是标...

2013-04-18 18:33:17 195

shendayun1989的博客