常用的代码字段整理

超出宽度一省略号显示
 <nobr>发布者的名字发布者的名字 </nobr>
    overflow: hidden;
    text-overflow: ellipsis;
    
    overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; 
/*兼容透明度*/
filter:alpha(opacity=80);

/* 解决a链接点击后出现虚框问题*/
outline: none;

/*兼容ie底部固定定位*/

#bottom {
_position: absolute;
_bottom: auto;
_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
} 


/*兼容ie顶部固定定位*/

#top {
_position: absolute;
_bottom: auto;
_top: expression(eval(document.documentElement.scrollTop));
} 

*html{
	background-image:url(about:blank);
	background-attachment:fixed;
	}

/* ie兼容圆角*/

behavior: url(PIE.htc)

/*修复 IE6/7 margin/padding双倍 间距错误*/

ul li  {    float: right;    margin-right: 10px;    *display: inline; /*Target IE7 and bellow*/    _display: inline; /*Target IE6 and bellow*/  } 

更好的兼容IE浏览器的

<!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 


body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,a,em,font,img,q,strong,tt,b,u,i,center,dl,dt,dd,ol,ul,li,form,label,table,tbody,tr,th,td 
{margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline; background: transparent;}


断字

CSS技巧也包括包住一个文本让它不出现在一行,因为这样实在不好看。下面的代码帮你行内断字。

.break-word {  word-wrap:break-word;  } 


链接伪类的顺序

a:link {color: blue;} a:visited {color: purple;} a:hover {color: red;} a:active {color: yellow;} 


在IE浏览器删除textarea的滚动条

textarea{      overflow:auto;  } 


修复 IE6/7 margin/padding双倍 间距错误

ul li  {    float: right;    margin-right: 10px;    *display: inline; /*Target IE7 and bellow*/    _display: inline; /*Target IE6 and bellow*/  } 


浏览器特定的 hacks

/* IE 6 */  * html .yourclass { }    /* IE 7 */  *+html .yourclass{ }    /* IE 7 and modern browsers */  html>body .yourclass { }    /* Modern browsers (not IE 7) */  html>/**/body .yourclass { }    /* Opera 9.27 and below */  html:first-child .yourclass { }    /* Safari */  html[xmlns*=""] body:last-child .yourclass { }    /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */  body:nth-of-type(1) .yourclass { }    /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */  body:first-of-type .yourclass {  }    /* Safari 3+, Chrome 1+ */  @media screen and (-webkit-min-device-pixel-ratio:0) {   .yourclass  {  }  } 


伪元素向文本的第一个字母添加特殊样式

p:first-letter{     display:block;     margin:5px 0 0 5px;     float:left;     color:#000;     font-size:60px;     font-family:Georgia;  } 


多背景图片

#multiple-images {    background: url(image_1.png) top left no-repeat,    url(image_2.png) bottom left no-repeat,    url(image_3.png) bottom right no-repeat; 


Box Shadow阴影

box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2); -> 


CSS3工具提示(这个很实用,看我网站的导航工具提示效果)

a {    color: #900;    text-decoration: none;  }      a:hover {    color: red;    position: relative;  }      a[title]:hover:after {    content: attr(title);    padding: 4px 8px;    color: #333;    position: absolute;    left: 0;    top: 100%;    white-space: nowrap;    z-index: 20px;    -moz-border-radius: 5px;    -webkit-border-radius: 5px;    border-radius: 5px;    -moz-box-shadow: 0px 0px 4px #222;    -webkit-box-shadow: 0px 0px 4px #222;    box-shadow: 0px 0px 4px #222;    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));  } 


响应布局的HTML Meta标签

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="HandheldFriendly" content="true"> 


声明正确的文档类型( DocType )

笔者早先曾加入过许多CSS论坛,在那里,如果有用户遇到问题,我们会建议他首先做两件事:

1. 验证CSS文件,解决所有可见的错误

2. 加上文档类型 Doctype

DOCTYPE 定义在HTML标签出现之前,它告诉浏览器这个页面包含的是HTML,XHTML,还是两者混合出现,这样浏览器才能正确的解析标记。

通常有四种文档类型可供选择:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 


  标准写法

<!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"> 



学会怎样对付IE

IE一直以来都是前端开发人员的噩梦!

如果你的CSS样式表基本定型了,那么可以为IE单独建立一个样式表,然后这样仅对IE生效:

<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" /> <![endif]--> 这些代码的意思是:如果用户浏览器是IE6及以下,那这段代码才会生效。如果你想把IE7也包含进来,那么就把“[if lt IE 7]”改为“[if lte IE 7]”。


响应视频

为了嵌入视频并使其自适应长宽,我们为所有开发人员准备了一个非常有用的CSS技巧。在我进一步之前,我想引入介绍这个CSS技巧并帮助很多开发者嵌入交互视频的网站tjkdesign.com

.video {  position: relative;  padding-bottom: 56.25%;  height: 0;  overflow: hidden;  }   .video iframe,  .video object,  .video embed {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  } 

css3选择器
#list li:nth-of-type(odd){ background:#00ccff;}奇数行 
#list li:nth-of-type(even){ background:#ffcc00;}偶数行 

<!--固定导航-->
<script type="text/javascript">
	$(document).ready(function() {
		var topH=$(".banner").height();  
		var navH=$(".daohang").height(); 
		$(window).scroll(function(event) {   
			var  num=$(document).scrollTop(); 
			if(num>=topH)
			{
				$(".daohang").css({"position":"fixed","top":0,"z-index":"555",});
				$(".banner").css("padding-top",navH);
			}
			else
			{
				$(".daohang").css("position","static");
				$(".banner").css("padding-top",0);
			}
		});
	});

	</script>


 1. Javascript 返回上一页history.go(-1), 返回两个页面: history.go(-2);

2. history.back().

3. window.history.forward()返回下一页

4. window.history.go(返回第几页,也可以使用访问过的URL) 

例:

<a href="javascript:history.go(-1);">向上一页</a>

response.Write("<script language=javascript>")

response.Write("if(!confirm('完成任务?')){history.back();}")

response.Write("</script>")

response.Write("<script language=javascript>history.go(-1);</script>")

<a href="javascript:history.go(-1);">向上一页</a>

 
页面跳转:onclick="window.location.href='list.aspx'" 

P.S.

小技巧(JS引用JS):

<script type=text/javascript>

<!--

if (typeof SWFObject == "undefined") {

document.write('<scr' + 'ipt type="text/javascript" src="/scripts/swfobject-1.5.js"></scr' + 'ipt>');}

//-->

</script> 

Javascript刷新页面的几种方法:

1    history.go(0)

2    location.reload()

3    location=location

4    location.assign(location)

5    document.execCommand('Refresh')

6    window.navigate(location)

7    location.replace(location)

8    document.URL=location.href 

自动刷新页面的方法:

1.页面自动刷新:把如下代码加入<head>区域中

<meta http-equiv="refresh" content="20">  

其中20指每隔20秒刷新一次页面.

 

2.页面自动跳转:把如下代码加入<head>区域中

<meta http-equiv="refresh" content="20;url=http://www.javaeye.com">  

其中20指隔20秒后跳转到http://www.javaeye.com页面

 

3.页面自动刷新js版

<script language="JavaScript">

function myrefresh()

{

       window.location.reload();

}

setTimeout('myrefresh()',1000); //指定1秒刷新一次

</script> 

ASP.NET如何输出刷新父窗口脚本语句

1.   this.response.write("<script>opener.location.reload();</script>");

2.   this.response.write("<script>opener.window.location.href = opener.window.location.href;</script>");


3.   Response.Write("<script language=javascript>opener.window.navigate(''你要刷新的页.asp'');</script>") 

JS刷新框架的脚本语句 www.2cto.com

 
//如何刷新包含该框架的页面用

<script language=JavaScript>

   parent.location.reload();

</script>

 
//子窗口刷新父窗口

<script language=JavaScript>

    self.opener.location.reload();

</script>

( 或 <a href="javascript:opener.location.reload()">刷新</a>   )

 

//如何刷新另一个框架的页面用

<script language=JavaScript>

   parent.另一FrameID.location.reload();

</script>

 

如果想关闭窗口时刷新或者想开窗时刷新的话,在<body>中调用以下语句即可。

 

<body onload="opener.location.reload()"> 开窗时刷新

<body onUnload="opener.location.reload()"> 关闭时刷新

 

<script language="javascript">

window.opener.document.location.reload()

</script>	


js禁止鼠标右键
<script>
function stop(){
   return false;
  }
  document.oncontextmenu=stop;
</script>
<!--禁止F12查看源代码-->
<script language="javascript">
 function testKeyDown(event)
 {  
  if ((event.keyCode == 112)  || //屏蔽 F1
   (event.keyCode == 113)  || //屏蔽 F2
   (event.keyCode == 114)  || //屏蔽 F3
   (event.keyCode == 115)  || //屏蔽 F4
   
   (event.keyCode == 117)  || //屏蔽 F6
   (event.keyCode == 118)  || //屏蔽 F7
   (event.keyCode == 119)  || //屏蔽 F8
   (event.keyCode == 120)  || //屏蔽 F9
   (event.keyCode == 121)  || //屏蔽 F10
   (event.keyCode == 122)  || //屏蔽 F11
   (event.keyCode == 123))    //屏蔽 F12
  {
   event.keyCode = 0;  
   event.returnValue = false;
  }
 }
 document.onkeydown = function(){testKeyDown(event);}
 window.onhelp = function(){return false;}
</script>
使一个a标签的href属性失效方法3种:
1.<a href="" onclick="return false;"></a>
2.<a href="javascript:;"></a>



<!--判断返回顶部-->

<script type="text/javascript">
    $(document).ready(function() {
        $("#back-to-top").hide();
        $(function() {
            $(window).scroll(function() {
                if ($(window).scrollTop() > 150) {
                    $("#back-to-top").fadeIn(1500);
                } else {
                    $("#back-to-top").fadeOut(1500);
                }
            });
            $("#fh").click(function() {
                $('body,html').animate({
                    scrollTop: 0
                },
                1000);
                return false;
            });
        });
    });
</script>
<!--tab切换-->
<script type="text/javascript">
	$(document).ready(function() {
		$(".tab li").click(function(event) {
			$(this).addClass('current').siblings().removeClass('current');
	        $(".con ul").eq($(this).index()).show().siblings().hide();
		});	
	});
	
</script>



自适应屏幕的算法
<script>
            (function (doc, win) {
                    var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
                    };
                    if (!doc.addEventListener) return;
                    win.addEventListener(resizeEvt, recalc, false);
                    doc.addEventListener('DOMContentLoaded', recalc, false);
                })(document, window);
        </script>
.
我借用jquery实现了这种效果,但并没有禁用掉浏览器本身的“前进”按钮,以下是代码,希望有用的朋友借鉴以下:
$(function () {
        jQuery(window).bind("unload", function () {
            history.go(-1);
        });
    });
function changeFrameHeight(){
      var ifm= document.getElementById("iframe_content");
      ifm.height=document.documentElement.clientHeight;
    }
    window.onResize=function(){
      changeFrameHeight();
    }
【管理员】IT-北京-愚公 2016/12/22 09:46:09
这几行代码搞定iframe高度根据src自适应问题

欢迎分享本文,转载请保留出处:前端ABC » 常用的代码字段整理

赞 (1)
分享到:更多 ()

发表评论 0