前端开发通用CSS技巧

html5 css3 前端开发|前端开发css文件模板|最新css前端开发pdf

兼容屏幕大小的样式

<link rel=”stylesheet” type=”text/css” href=”style/pad.css” media=”(min-width:540px) and (max-width:979px)”/>
更好的兼容IE浏览器的

<!–[if IE]> <script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script&gt; <![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”&gt;
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt; <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;

标准写法

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

学会怎样对付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);
  1. history.back().
  2. window.history.forward()返回下一页
  3. 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”&gt;

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

前端开发要学php|python前端界面开发|百度前端开发规范 pdf

» 本文来自:前端开发者 » 《前端开发通用CSS技巧》
» 本文链接地址:https://www.rokub.com/4017.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!