控制导航条随滚动条固定于页面顶部 javascript

导航栏随着滚动条的滚动,固定浮于页面顶部:

divFix:
function fixDiv(div_id,offsetTop){var offsetTop=arguments[1]?arguments
[1]:0;var Obj=$(‘#’+div_id);var ObjTop=Obj.offset().top;var
isIE6=$.browser.msie && $.browser.version == ’6.0′;if(isIE6)
{$(window).scroll(function(){if($(window).scrollTop()<=ObjTop){Obj.css
({‘position’:’relative’,’top’:0});}else{Obj.css
({‘position’:’absolute’,’top’:$(window).scrollTop()+offsetTop+’px’,’z-
index’:1});}});}else{$(window).scroll(function(){if
($(window).scrollTop()<=ObjTop){Obj.css
({‘position’:’relative’,’top’:0});}else{Obj.css
({‘position’:’fixed’,’top’:0+offsetTop+’px’,’z-index’:1});}});}

前端笔记

HTML:

1.html5声明:<!DOCTYPE HTML>

2.flash背景透明:

火狐:在embed标签中,添加属性wmode=”Transparent”

IE:在object标签中间,添加<param name=”wmode” value=”Transparent” />

3.html标签<marquee></marquee>可以实现字幕滚动。

完整:<marquee id=”affiche” align=”left” behavior=”scroll”
bgcolor=”#FF0000″ direction=”up” height=”300″ width=”200″ hspace=”50″
vspace=”20″ loop=”-1″ scrollamount=”10″ scrolldelay=”100″
onMouseOut=”this.start()” onMouseOver=”this.stop()”>

4.有两次发现IE浏览器下文档模式总是被解析成杂项,今揪出凶手,原来是页面
头部的声明多了一些没有用的东西,这些东西即使被注释掉也会影响整个页面。

 

CSS:

1.text-shadow:

text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[
颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]…或者text-
shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X
Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]…例:text-shadow: 0
1px 1px #fff;

2.背景线性渐变:

内核类型写法Webkit(Chrome/Safari):-webkit-linear-gradient()/-webkit-
gradient();

Gecko(Firefox):-moz-linear-gradient();

Presto(Opera):-o-linear-gradient();

Trident(IE):-ms-linear-gradient();

W3Clinear-gradient()

IE:

filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr=’#fafafa’,endColorstr=’#eaeaea’);

例:

background:-moz-linear-gradient(#fff,#333);background:-webkit-gradient
(linear,center top,center bottom,from(#fff),to(#333));background:-
webkit-linear-gradient(#fff,#333);background:-o-linear-gradient
(#fff,#333);background:-ms-linear-gradient
(#fff,#333);background:linear-gradient(#fff,#333);

全:

background:linear-gradient(bottom,#ccc 0,#f0f0f0
100%);background:-o-linear-gradient(bottom,#ccc 0,#f0f0f0 100%);background:-moz-linear-gradient(bottom,#ccc 0,#f0f0f0 100%);background:-webkit-
linear-gradient(bottom,#ccc 0,#f0f0f0 100%);background:-ms-linear-gradient
(bottom,#ccc 0,#f0f0f0 100%);
filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr=’#f0f0f0′,endColorstr=’#cccccc’)

3.IE6下line-height属性失效是由于文字中包含img、input、select、textarea
、button、object等标记造成的。

给与文字相连接的img、input、textarea、select、object等元素加以css样式:
margin: (所属line-height-自身高度)/2px 0;
vertical-align:middle;

4.css雪碧在线制作网站

css sprite: http://css-sprit.es/

5.a标签伪类顺序:

a:link {color: #000;}
a:visited {color: #F00;}
a:hover{color: #0F0;}
a:active {color: #00F;}

顺序不正确有可能会导致设置失效。

6.css3.0 对象旋转属性:

-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);

-moz-transition:all 0.2s ease-in-out 0s (设置旋转方式和时间)

7.IE6 IE7下,当父元素的直接子元素或者下级子元素的样式拥有
position:relative属性时,父元素的overflow:hidden属性就会失效。只要给父级元素添加position:relative即可。

8.IE6下,<b>最新时评</b>用text-indent:-999em把文
字隐掉,b设置为display:block,height:20px;还需要定line-height:20px; 否
则,b的高度以默认行高计算,不受height的影响。(标签内必须有文字,否者
line-height也会失效)

9.IE6下绝对定位的div无法遮盖select解决办法:

在需要遮盖select的那个div放入一个空的iframe:
<div><!–[if lte IE 6]><iframe></iframe><![endif]–></div>
iframe样式:
iframe{

display:none;
display:block;
position:absolute;
top:0;
left:0;
z-index:-1;
width:3000px;
height:3000px;
}

10.设置阴影:

box-shadow:inset x-offset y-offset blur-radius spread-radius color
box-shadow属性至多有6个参数设置,他们分别取值:
阴影类型:此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;如
果取其唯一值“inset”,就是将外阴影变成内阴影,也就是说设置阴影类型为
“inset”时,其投影就是内阴影;
X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值,如果值为正值,
则阴影在对象的右边,反之其值为负值时,阴影在对象的左边;
Y-offset:是指阴影的垂直偏移量,其值也可以是正负值,如果为正值,阴影在对
象的底部,反之其值为负值时,阴影在对象的顶部;
阴影模糊半径:此参数是可选,,但其值只能是为正值,如果其值为0时,表示阴
影不具有模糊效果,其值越大阴影的边缘就越模糊;
阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延
展扩大,反之值为负值是,则缩小
阴影颜色:此参数可选,如果不设定任何颜色时,浏览器会取默认色,但各浏览
器默认色不一样,特别是在webkit内核下的safari和chrome浏览器将无色,也就
是透明,建议不要省略此参数。

仅兼容:IE9 firefox3.5 chrome2.0 opera10.6 safari4

11.IE6浮动产生双边距的问题,在浮动元素的css里加display:inline即可解决。

12.当给浮动元素的父级div设置overflow:hidden时,IE6下是不起作用的,因为
IE6下必须有固定高度宽度这一属性才会起作用,需要给元素添加height:100%即
可!

13.display:inline-table;
子元素浮动,父级元素闭合,避免overflow:hidden造成的子元素浮出父级时被隐
藏。
#main { width:700px;display:inline-table ;position:relative;
top:20px;left:300px;}
#main #left {width:233px;float:left;position:relative;top:0;left:-
230px;}
#main #right { float:left;width:428px;position:relative;top:0px;left:-
230px;}
<div id=”main”>
<div id=”left”></div>
<div id=”right”></div>
</div>
14.IE6中PNG格式图片不能显示透明背景,改用GIF透明背景图。
15.color:red; /* 所有浏览器都支持 */

color:red !important;/* 除IE6外 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
+color:red;/*IE7支持*/
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7、IE8、IE9支持 */
color:red\0; /* IE8、IE9支持 */
color:red\9\0;/*IE9支持*/

/* webkit and opera */
@media all and (min-width: 0px){ div{color:red;} }

/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ div{color:red;} }

/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-
webkit-min-device-pixel-

ratio:0) { div{color:red;} }

/* firefox * /
@-moz-document url-prefix(){ div{color:red;}} /* all firefox */

html>/**/body div, x:-moz-any-link, x:default {color:red;} /* newest
firefox */
}

/*针对safari 3+, chrome 1+, opera9+, ff 3.5+浏览器*/
body:nth-of-type(1)div { color:red;}?9;
<!–[if lt IE 7 ]> <html> <![endif]–>
<!–[if IE 7 ]> <html> <![endif]–>
<!–[if IE 8 ]> <html> <![endif]–>
<!–[if IE 9 ]> <html> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–> <html> <!–<![endif]–>
<!?[if IE 7]> = 等于 IE7

<!?[if lt IE 8]> = 小于 IE8(就是 IE7 或以下了啦)

<!?[if gte IE 8]> = 大于或等于 IE8

<meta http-equiv=”x-ua-compatible” content=”ie=7″ />
把这段代码放到<head>里面,在ie8里面的页面解析起来就跟ie7一模一样的了

16.
Chrome和Safari中,li一定要定宽度,否则无法浮动。
IE6中的li边框无法显示。

17.一直对同一行里的两个部分左右分开难以驾驭。
a: 用一个标题标签(h1、h2…),里面放一个p标签,一个span标签,两个左右
浮动;

18.设置背景透明度:
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
19.当<li><a href=”#”></a></li>浮动,overflow:hidden不起作用,要隐藏溢出
的内容,先定li宽和高,a标签display block,li标签white-space:nowrap;
display:block;/*内联对象需加*/
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(…) ;需与
overflow:hidden;一起使用。*/
text-overflow:clip/*不显示省略标记*/

20.当h标签内有a标签和其他元素,图片直接放在a标签里,会导致其他元素无法垂
直居中,可以将图片设置为a标签的背景,设定好a标签的宽高,display:inline
-block;

21.css写边框圆角:
border-top-right-radius
border-bottom-right-radius
border-bottom-right-radius
border-bottom-right-radius
border-radius表示所有的角;但是IE8及以下版本都不支持

22.今天才发现,a标签display设为block是可以只设高度不设宽度的,好了,以
后导航mouseover的效果不用纠结了

23.CSS解压缩:http://tool.lu/css/

24. css设置英文全部大写:text-transform:uppercase;

全部小写:text-transform: lowercase

首字母大写:text-transform:capitalize

25.简单的清除链接虚线框的办法:

a:focus{ outline:none;}

不过这种办法兼容性不是很好

JAVASCRIPT

1.弹出框背景宽高度控制
$(“#popup_mask”).css({
“width” : $(document).width(),
“height”: $(document).height(),
opacity:0.5
}).show();

2. js获取当前时间

<SCRIPT LANGUAGE=”JavaScript”> <!–var now= new Date();var
year=now.getYear();var month=now.getMonth()+1;var day=now.getDate();var
hour=now.getHours();var minute=now.getMinutes();var
second=now.getSeconds(); alert(year+”-“+month+”-“+day+”
“+hour+”:”+”:”+minute+”:”+second); –> </SCRIPT>
23.js代码压缩工具:http://javascriptcompressor.com/,css代码压缩工具:
http://www.csscompressor.com/

3.在文本输入栏中,如果加入了提示,加入onMouseOver=”this.focus

()”onFocus=”this.select()” 可以直接选中提示文本:

<textarea name=textarea wrap=virtual rows=2
cols=22onMouseOver=”this.focus()” onFocus=”this.select()”>站长之家
www.chinaz.com</textarea>

鼠标移入提示文字消失:<input type=text name=”address” size=19value=”站
长之家 www.chinaz.com”onFocus=”this.value=””>