css通用技巧

兼容屏幕大小的样式

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; _display: inline; }

浏览器特定的 hacks

* html .yourclass { } *+html .yourclass{ } html>body .yourclass { } html>body .yourclass { } html:first-child .yourclass { } html[xmlns*=””] body:last-child .yourclass { } body:nth-of-type(1) .yourclass { } body:first-of-type .yourclass { } @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标签

声明正确的文档类型( 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)

例:

response.Write(“<script language=javascript>”)

response.Write(“if(!confirm(‘完成任务?’)){history.back();}”)

response.Write(“</script>”)

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

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

P.S.

小技巧(JS引用JS):

<!–

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>区域中

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

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

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

3.页面自动刷新js版

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刷新框架的脚本语句 http://www.2cto.com

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

parent.location.reload();

</script>

//子窗口刷新父窗口

self.opener.location.reload();

</script>

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

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

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

</script>

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

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

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

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>
3.D<a href=”javascript:void(0);”></a>

猜你喜欢