web前端基础知识

2012-5-15

[成就源于整理] | oush

[深圳残

友动漫] 静态页面效果代码

目录

1.获取当前日期和星期 (2)

2.繁简中文转换 (2)

3.支持ff和ie的滤镜效果样式 (2)

4.让ie6实现li的hover事件代码 (3)

5.首页菜单效果 (3)

6.鼠标经过时菜单显示不一样的背景js (5)

7.banner效果 (6)

8.兼容两种浏览器，通常方法 (6)

9.用样式实现div的圆角 (7)

10.如何在ie6及更早浏览器中定义小调试的容器 (7)

11. 如何解决IE6及更早浏览器浮动时产生双倍边距的BUG (7)

12. 如何在IE6及更早浏览器下模拟min-height效果 (7)

13．如何解决按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题.. 8 14．如何解决IE7及更早浏览器下当li中出现2个或以上的浮动时，li之间产生的空白间隙的BUG (8)

15．如何解决IE6下的文本溢出BUG (8)

16．如何使文本溢出边界显示为省略号 (8)

17. 如何使连续的长字符串自动换行 (9)

18．如何让已知高度的容器在页面中水平垂直居中 (9)

19. 如何做1像素细边框的table (9)

20. 如何在点文字时也选中复选框或单选框 (9)

21.渐变背景色css3 (9)

22.加载在线jquery (10)

23.鼠标经过时宽度加长 (10)

24.跳转下拉菜单 (10)

25.去除超链接虚线框 (10)

26.显示子菜单封装类 (10)

27. 实现图片延迟加载 (11)

28.动态获取当前时间 (11)

29.百度地图API，地图生成工具 (12)

30.返回到顶部 (12)

31．刷新页面的js方法 (13)

32.固定层div样式 (13)

33.高级样式 (13)

34.激活hasLayout (14)

静态页面效果代码

1.获取当前日期和星期

2.繁简中文转换

繁體版 注意：这个js的引用一定要放到紧跟其后，不然没有作用

3.支持ff和ie的滤镜效果样式

cursor:hand;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /*IE8*/

filter:alpha(opacity=60); /*IE5、IE5.5、IE6、IE7*/

opacity: .2; /*Opera9.0+、Firefox1.5+、Safari、Chrome*/

4.让ie6实现li的hover事件代码

5.首页菜单效果

在这里面要把握一个关键就是在a里加class时，一定要在样式时加display：block

• 首页
• 政务公开
• 业务快车
• 科技园
• 科普宣传
• 联系我们

Css样式部分

.menu_ul

{

width:686px;

height:39px;

float:left;

background:url(../images/menu_bg_01.gif);

}

.menu_ul ul li a:link

{

color: #FFF;

display:block;

width:105px;

height:39px;

text-decoration: none;

}

.menu_ul ul li a:visited

{

text-decoration: none;

color: #FFF;

display:block;

width:105px;

height:39px;

}

.menu_ul a:active

{

text-decoration: none;

color: #FFF;

}

.menu_ul ul

{

list-style-type:none;

}

.menu_ul ul li a.current,.menu_ul ul li a:hover

{

display:block;

width:105px;

height:39px;

text-decoration: none;

color: #FFF;

background:url(../images/menu_current_bg_03.gif) center top no-repeat; }

.menu_ul li

{

width:105px;

float:left;

font-size:14px;

text-align:center;

line-height:39px;

font-size:15px;

font-weight:bold;

color:#FFF;

}

6.鼠标经过时菜单显示不一样的背景js

这里的关键是一段js，鼠标经过和鼠标离开时调用不同的函数

function menuhover (index) {

for (var i = 1; i <= 4; i++) {

if (index == i) {

$("#menu_" + i).addClass ("current_" + i);//鼠标经过哪，哪的样式就变成当前状态 }

}

}

function onmouseout1 (index, a) {

switch (a) {

case'1': //当第二个参数为1时，不删除当前样式，否则删除

$("#menu_" + index).addClass ("current_" + index);

break;

default:

$("#menu_" + index).removeClass ("current_" + index);

break;

}

}

• onmouseout="onmouseout1('1','1')">1

• 2
• 3

• onmouseout="onmouseout1('4','4')">4

7.banner效果

var nn = 1;

var tt;

function init() {

banner(nn);

nn++;

if (nn > 4) {

nn = 1;

}

tt = setTimeout('init()', 3000);

}

function banner(index) {

for (var i = 1; i <= 4; i++) {

if (index == i) {

$("#banner_" + i).addClass("current");

nn = index; //把index的值传给nn是为了当鼠标经过哪时就从哪开始往下切换

$("#img_" + i).show();

// $("#img_" + i).fadeTo(1000,1).show(); 如果加上这句的话，就会出现渐隐的效果，在1000毫秒内达到透明度为1.

} else {

$("#banner_" + i).addClass("").removeClass("current");

$("#img_" + i).hide();

}

}

}

8.兼容两种浏览器，通常方法

op.onclick=function(oEvent)

{

if(window.event)oEvent=window.event;

}

9.用样式实现div的圆角

.main

{

width: 500px;

height: 500px;

border: 1px #ccc solid;

background: #FFF;

border-radius: 8px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

box-shadow: #999 1px 1px 2px;

behavior: url(css/PIE.htc); /*这个路径与css无关，与页面相关，是相对于调用的页面来说的*/

}

为了更好的兼容性，这里的behavior必不可少，htc文件已经有封装好的文件,还有一个非常重要的就是加了圆角层里有背景图片时，父级不能再有背景图片了。或者加一个position:relative;。

10.如何在ie6及更早浏览器中定义小调试的容器

方法：

#test{overflow:hidden;height:1px;font-size:0;line-height:0;}

IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高

11. 如何解决IE6及更早浏览器浮动时产生双倍边距的BUG

方法：

#test{display:inline;}

当在IE6及更早浏览器中出现浮动后margin值解析为双倍的情况，设置该元素的display属性为inline即可

12. 如何在IE6及更早浏览器下模拟min-height效果

方法：

#test{min-height:100px;_height:100px;}

13．如何解决按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题

方法：

input,button{overflow:visible;}

14．如何解决IE7及更早浏览器下当li中出现2个或以上的浮动时，li之间产生的空白间隙的BUG

方法：

li{vertical-align:top;}

15．如何解决IE6下的文本溢出BUG

.test{zoom:1;overflow:hidden;width:500px;}

.box1{float:left;width:100px;}

.box2{float:right;width:400px;}

↓这就是多出来的那只猪

运行如上代码，你会发现文字发生了溢出，在IE6下会多出一只“猪”。造成此BUG的原因可能是多重混合的，如浮动，注释，宽高定义等等。并且注释条数越多，溢出的文本也会随之增多。列举几个解决方法：

删除box1和box2之间所有的注释；

不设置浮动；

调整box1或box2的宽度，比如将box的宽度调整为90px

16．如何使文本溢出边界显示为省略号

方法（此方法Firefox5.0尚不支持）：

#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。

17. 如何使连续的长字符串自动换行

方法：

#test{width:150px;word-wrap:break-word;}

word-wrap的break-word值允许单词内换行

18．如何让已知高度的容器在页面中水平垂直居中

方法：

#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;} 宽度是多少就是margin掉多少

19. 如何做1像素细边框的table

#test{border-collapse:collapse;border:1px solid #ddd;}

#test th,#test td{border:1px solid #ddd;}

姓名	Joy Du
年龄	26

20. 如何在点文字时也选中复选框或单选框

选项二

选项一

21.渐变背景色css3

background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));

background: -webkit-linear-gradient(#EEFF99, #66EE33);

background: -moz-linear-gradient(#EEFF99, #66EE33);

background: -ms-linear-gradient(#EEFF99, #66EE33);

background: -o-linear-gradient(#EEFF99, #66EE33);

background: linear-gradient(#EEFF99, #66EE33);

-pie-background: linear-gradient(#EEFF99, #66EE33);

behavior: url(css/PIE.htc);

22.加载在线jquery

23.鼠标经过时宽度加长

$(document).ready(function() { /*这里是hover事件*/

$(".ind li").hover(function() {

$(this).animate({ width: "142px" });

}, function() { /*这里就是out事件*/

$(this).animate({ width: "60px" });

});

});

24.跳转下拉菜单

$(document).ready(function() {

$("#selectweb").change(function(obj) {

var url = this.options[this.selectedIndex].value;

if (url != "") {

open(url, '_blank');

this.selectedIndex = 0;

this.blur();

}

})

});

25.去除超链接虚线框

$("a").focus(function (){ //获取焦点时失去焦点

$(this).blur();

});

26.显示子菜单封装类

function hover_show(hoverClass,showClass)

{

$(hoverClass).hover(function (){

$(showClass).eq($(this).index()).show();

},function (){

$(showClass).eq($(this).index()).hide();

});

}

$(document).ready(function(e) {

hover_show(".menu li",".sub_menu_panal");

});

27. 实现图片延迟加载

28.动态获取当前时间

29.百度地图API，地图生成工具

https://www.360docs.net/doc/182791616.html,/wiki/static/map/API/tool/creatMap/

30.返回到顶部

$(document).ready(function() {

//首先将#back-to-top隐藏

$("#back-to-top").hide();

//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失

$(function() {

$(window).scroll(function() {

if ($(window).scrollTop() > 100) {

$("#back-to-top").fadeIn(500);

} else {

$("#back-to-top").fadeOut(500);

}

});

//当点击跳转链接后，回到页面顶部位置

$("#back-to-top").click(function() {

$('body,html').animate({

scrollTop: 0

},

500);

return false;

});

});

});

样式：

#back - to - top {

position: fixed ! important;

bottom: 50px;

right: 50px;

cursor: pointer;

}

31．刷新页面的js方法

1.页面自动刷新：把如下代码加入区域中

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

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

其中20指隔20秒后跳转到https://www.360docs.net/doc/182791616.html,/页面

3.页面自动刷新js版

32.固定层div样式

position: fixed !important;

position: absolute;

top: 50px;

top: expression( ( 50 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );

margin: 0 0 0 -110px;

width: 220px;

height: 19px;

left: 50%;

text-align: center;

border: 1px solid red;

33.高级样式

div +p{color:red} 与div相邻元素第一个p的样式。对其它地方的p标签不起作用：如下：

与div相邻的上一个p

asdf

与div相邻的下一个p

只有这一行起作用

不与div相邻的p

h3[title]{ color:yellow;} 带有title属性的h3标签才有的样式属性也可以写多种属性h3[class][title] 如下：

g

只有这一行起作用

fg

dg

精确属性值a[href=”https://www.360docs.net/doc/182791616.html,”]{color:#fff}

input[type=”text”]{border:1px #ccc solid;}

34.激活hasLayout

overflow:hidden; /*符合w3c标准*/

zoom:1 /*IE下*/

35.高效率js代码

为了避免变量冲突可以这样：定义成局部变量

36引入我的新浪微博

37.改变网页默认选择时的背景颜色

在样式文件里加以下代码就行了：

::selection { background:#9C0; color:#fff; }

::-moz-selection { background:#9C0; color:#fff; }

::-webkit-selection { background:#9C0; color:#fff; }

38．半透明背景

background:rgba(255, 255, 255, 0.8)!important; 兼容ie8+

filter:Alpha(opacity=80); background:#ffffff;

39.关闭或者叉的html码

×

40. tip中的指示箭头实现

Html部分

Lorem ipsum dolor sit amet.

Css部分

.diamond {

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')";

filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand' );

-moz-transform: rotate(45deg);

-o-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform:rotate(45deg);

}

:root .diamond {

filter:none\9;

}/*ie9 hack*/

.tips {

position:absolute;

background: #fff8e8;

border:1px solid #ffba00;

padding:10px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

border-radius:5px;

}

.tips-top {

position:absolute;

display:block;

width:8px;

height:8px;

font-size:0;

background:#fff8ef;

border-left:1px solid #ffba00;

border-top:1px solid #ffba00;

top:-5px;

top:-6px\9;

_top:-7px;

left:10px;

}