超出宽度一省略号显示
<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 » 常用的代码字段整理
前端ABC