keimon
- 浏览: 72566 次
- 性别:
- 来自: 上海
-
最新评论
-
ch2004：
...
仿百度百科的页面导航效果 -
y_hai_n：
需要再加一个jquery.min.js，效果就出来了，谢谢分享 ...
仿百度百科的页面导航效果 -
liu621java：
t=exp(2)*L*cos(degree)-L; 能详细的解 ...
两种图片360度旋转方法的比较 -
town2you：
代码很好用，谢谢！不过有个小问题不知道怎么弄：右边导航栏是固 ...
仿百度百科的页面导航效果 -
town2you：
很好用，谢谢了！
仿百度百科的页面导航效果
文章列表
在网页中有很多左右结构的标题，在一行的左边是“标题”，右边则是“更多”，在IE6,7中，如果处理不当则会出现右边的文字“更多”出现在下一行。究其原因是float：right的问题。下面是几种解决方法，可根据情况来选择，当然也可以有其他更好的办法。1：使一行中的元素全部浮动起来，如在这里，我们可以让第一个span元素增加float：left属性。2：用绝对定位代替浮动，如在这里，让div元素获得position：relative属性。第二个span元素获得position：absolute属性,该元素的具体位置可以设置它的top、left等属性。
示例代码如下：
<style> ...
IE6下默认的字体大小至少是12px；当你设置的div的高度小于这个值时，IE6会自动调节它默认的高度。要解决这个问题，可以在设置div高度的同时，设置字体的大小，也可以通过设置overflow：hidden来使div的高度显示为设定的值；示例代码如下：
<style>div{ width:300px; height:2px; background-color:#000; _font-size:2px; /*设置字体大小*/ /*_overflow:hidden;*/ /*隐藏超出范围的内容*/}</style>
<body><div ...
IE兼容-line-height
- 博客分类：
- 浏览器兼容
在ie6下，当元素设置了height值和line-height值时，元素的实际高度按两者中大的那个来定的。而在其他浏览器中元素的高度只与height值有关，line-height的值只会影响元素中内容如文字在元素中的位置。
示例代码如下：
<style>
div{
height:30px; line-height:40px; width:40px; border:1px solid blue;
}
</style>
<div>
1111
</div>
显示效果如下：
...
ie6，ie7在进行绝对定位时，必须同时设置left（right）和top（bottom）值。代码如下：
<style>*{ margin:0; padding:0;}div{ width:166px; height:122px; border:1px solid #000; position:relative;}p{ position:absolute; bottom:0px; left:0px; /*ie6.7*/ width:166px; height:30px; background-color:#666; color:#fff;}img{ ...
IE兼容-z-index
- 博客分类：
- 浏览器兼容
今天在做页面的时候，发现要显示的元素在ie6，7中一直位于其他元素的下面（图片元素特别明显），该元素已经设置position：absolute；z-index：9999；其父元素也设置了position：relative；z-index：9998；
显示效果如下左。
后经学习发现ie6，ie7有同样的bug，虽然父级元素设置了z-index属性，但父级的父级元素未设置z-index；当将父级的父级元素的z-index设置为1后，显示正常了。效果如下右。
父级关系代码示例如下：
<div style="pos ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb23 ...
1、deffered对象：http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html
--------------------------------------------------------------------------------------------------------------------------------------------------
2、focusin，focusout与focus，blu ...
核心jquery代码：
$(function(){
$('.topH li').mouseenter(function(){ var that = $(this); var index = $('.topH li').index(that); $('.topH li').removeClass('activeLi').eq(index).addClass('activeLi'); $('#content .neirong').hide().eq(index).show();// var a = $('#content .neirong').eq(i ...
各浏览器兼容方法总汇
- 博客分类：
- 前端工具
1：css-hack；
2：条件注释判断浏览器：
例如：
<script>
//IE 6 会alert 2 次，其他浏览器只 alert 第一个 alert('other');</script><!--[if IE 6 ]><script type="text/javascript" defer="defer" async="true"> alert('IE 6')</script><![endif]-->
3：webkit，moz：
...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset= ...
1、测试各IE版本下的兼容性：IETester；
2、可爱小猫占位符：http://placekitten.com/g/160/200；160表示图片宽度，200表示图片高度；可根据所需图片大小进行修改。
简单图片占位http://placehold.us/200x200
3、html5shiv：http://code.google.com/p/html5shiv/
引用html5shiv，并通过以下代码：
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></sc ...
1：使用插件 masonry
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/h ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2 ...
<!doctype html><html> <head><meta> <title>Regex--正则简单demo</title> </head> <body> </body> <script> /* * demo1： *“\1”指与第一个（）内的内容相同； */ var a= /^<(\w+)\s*\/?>(?:<\/\1>)?$/ ; b1 = a.exec("<body>&qu ...
分享到各网站-bshare
- 博客分类：
- jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb23 ...