当前位置:文档之家› web前端基础知识

web前端基础知识

3.
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*/
behavior: url(css/PIE.htc);/*这个路径与css无关,与页面相关,是相对于调用的页面来说的*/
}
为了更好的兼容性,这里的behavior必不可少,htc文件已经有封装好的文件,还有一个非常重要的就是加了圆角层里有背景图片时,父级不能再有背景图片了。或者加一个position:relative;。
} else {
$("#banner_" + i).addClass("").removeClass("current");
$("#img_" + i).hide();
}
}
}
8.
op.onclick=function(oEvent)
{
if(window.event)oEvent=window.event;
10.
方法:
#test{overflow:hidden;height:1px;font-size:0;line-height:0;}
IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高
11.
方法:
#test{display:inline;}
当在IE6及更早浏览器中出现浮动后margin值解析为双倍的情况,设置该元素的display属性为inline即可
16
方法(此方法Firefox5.0尚不支持):
#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
首先需设置将文本强制在一行内显示,然后将溢出的文本通过overflow:hidden截断,并以text-overflow:ellipsis方式将截断的文本显示为省略号。
{
cssRule = document.styleSheets[i].rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1)
{
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
{
width:105px;
float:left;
font-size:14px;
text-align:center;
line-height:39px;
font-size:15px;
font-weight:bold;
color:#FFF;
}
6.
这里的关键是一段js,鼠标经过和鼠标离开时调用不同的函数
functionmenuhover(index) {
var daym=mydate.getDate()
var dayarray=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六")
var montharray=new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月")
{
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
2012-5-15
[成就源于整理]|oush
静态页面效果代码
1.
<script>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
<liid="menu_4"class="m_252"onmouseover="menuhover('4');"onmouseout="onmouseout1('4','4')"><ahref="index4.htm">4</a></li>
</ul>
</div>
7.
var nn = 1;
var tt;
}
.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
$("#banner_" + i).addClass("current");
nn = index; //把index的值传给nn是为了当鼠标经过哪时就从哪开始往下切换
$("#img_" + i).show();
//$("#img_" + i).fadeTo(1000,1).show();如果加上这句的话,就会出现渐隐的效果,在1000毫秒内达到透明度为1.
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
</script>
5.
在这里面要把握一个关键就是在a里加class时,一定要在样式时加display:block
<div class="menu_ul">
<ul>
<li><ahref="#" class="current">首页</a></li>
document.write(year+"年"+montharray[month]+""+daym+"日"+dayarray[day])
</script>
2.
<a id="StranLink">繁體版</a> <script language="javascript" type="text/javascript" src="match.js"></script>注意:这个js的引用一定要放到紧跟其后,不然没有作用
document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
}
}
var getElm = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<getElm.length; i++) {
.box1{float:left;width:100px;}
.box2{float:right;width:400px;}
<div class="test">
<div class="box1"></div>
<!-- 注释 -->
<div class="box2">↓这就是多出来的那只猪</div>
</div>
$("#menu_"+ index).addClass("current_"+ index);
break;
相关主题